Interactive setup for HTML/CSS LSP development environment
Interactive setup for HTML/CSS LSP development environment
/plugin marketplace add zircote/html-css-lsp/plugin install html-css-lsp@zircote-lspThis command will configure your HTML/CSS development environment with vscode language servers and essential tools.
First, verify Node.js is installed:
node --version
npm --version
npm install -g vscode-langservers-extracted
This package includes:
vscode-html-language-server - HTML language supportvscode-css-language-server - CSS/SCSS/LESS language supportvscode-json-language-server - JSON language supportvscode-eslint-language-server - ESLint integrationQuick install (all recommended tools):
npm install -g prettier stylelint stylelint-config-standard
# Check language servers
vscode-html-language-server --version
vscode-css-language-server --version
# Check formatting/linting tools
prettier --version
stylelint --version
.prettierrc:
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "css"
}
.stylelintrc.json:
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": 2,
"string-quotes": "double",
"color-hex-case": "lower"
}
}
export ENABLE_LSP_TOOL=1
Test the LSP integration:
# Create test files
echo '<!DOCTYPE html><html><head><title>Test</title></head><body><h1>Hello World</h1></body></html>' > test_lsp.html
echo 'body { margin: 0; padding: 0; font-family: sans-serif; }' > test_lsp.css
# Run Prettier
prettier --write test_lsp.html test_lsp.css
# Run stylelint
stylelint test_lsp.css
# Clean up
rm test_lsp.html test_lsp.css