stylelint / Vscode Stylelint
Programming Languages
Projects that are alternatives of or similar to Vscode Stylelint
vscode-stylelint
A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint
The extension uses the stylelint library installed in the opened workspace folder. If the workspace folder does not provide the stylelint, the extension looks for a global installed stylelint.
If not in the global installed stylelint, the extension uses the stylelint embedded in the extension. (However, using stylelint embedded in the extension is not recommended.)
Installation
- Execute
Extensions: Install Extensions
command from Command Palette. - Type
@id:stylelint.vscode-stylelint
into the search form and install the topmost one.
Read the extension installation guide for more details.
Optional (but recommended) setup
To prevent both the editor built-in linters [css]
[less]
[scss]
and this extension [stylelint]
from reporting essentially the same errors like in the screenshot, disable the built-in ones in User or Workspace setting:
"css.validate": false,
"less.validate": false,
"scss.validate": false
Usage
Once a user follows the stylelint startup guide by creating a configuration file or by editing stylelint.*
VSCode settings, stylelint automatically validates documents with these language identifiers:
- CSS (
css
) - HTML (
html
) - Less (
less
) - JavaScript (
javascript
) - JavaScript React (
javascriptreact
) - Markdown (
markdown
) - Markdown+MathML (
source.markdown.math
) - PostCSS (
postcss
) - Sass (
sass
) - SCSS (
scss
) - styled-components
- Sugarss (
sugarss
) - Svelte (
svelte
) - TypeScript (
typescript
) - TypeScript React (
typescriptreact
) - Vue (
vue
,vue-html
,vue-postcss
) - XML (
xml
) - XSL (
xsl
)
Extension settings
Though it's highly recommended to add a stylelint configuration file to the current workspace folder instead, the following extension settings are also available.
stylelint.enable
Type: boolean
Default: true
Control whether this extension is enabled or not.
stylelint.configOverrides
Type: Object
Default: null
Set stylelint configOverrides
option.
stylelint.config
Type: Object
Default: null
Set stylelint config
option. Note that when this option is enabled, stylelint doesn't load configuration files.
stylelint.configFile
Type: string
Default: ""
Set stylelint configFile
option. Path to a JSON, YAML, or JS file that contains your configuration object. Use this option if you don't want stylelint to search for a configuration file.
stylelint.configBasedir
Type: string
Default: ""
Set stylelint configBasedir
option. The path to the directory that relative paths defining "extends" and "plugins" are relative to. Only necessary if these values are relative paths.
stylelint.syntax
Type: "css" | "css-in-js" | "html" | "less" | "markdown" | "sass" | "scss" | "sugarss"
Default: ""
Set stylelint syntax
option. Specify a syntax. Only use this option if you want to force a specific syntax.
stylelint.customSyntax
Type: string
Default: ""
Set stylelint customSyntax
option. An absolute path to a custom PostCSS-compatible syntax module.
e.g.
"stylelint.customSyntax": "sugarss"
You can use ${workspaceFolder}
to replace the the path of the folder opened in VS Code.
e.g.
"stylelint.customSyntax": "${workspaceFolder}/custom-syntax.js"
stylelint.ignoreDisables
Type: boolean
Default: false
Set stylelint ignoreDisables
option. If true
, ignore styleline-disable
(e.g. /* stylelint-disable block-no-empty */
) comments.
stylelint.reportNeedlessDisables
Type: boolean
Default: false
Set stylelint reportNeedlessDisables
option. If true
, also report errors for stylelint-disable
comments that are not blocking a lint warning.
stylelint.reportInvalidScopeDisables
Type: boolean
Default: false
Set stylelint reportInvalidScopeDisables
option. If true
, also report errors for stylelint-disable
comments that used for rules that don't exist within the configuration object.
stylelint.validate
Type: string[]
Default: ["css","html","javascript","javascriptreact","less","markdown","postcss","sass","scss","source.css.styled","source.markdown.math","styled-css","sugarss","svelte","typescript","typescriptreact","vue","vue-html","vue-postcss","xml","xsl"]
An array of language identifiers specifying the files to be validated.
stylelint.stylelintPath
Type: string
Default: ""
Supply a custom path to the stylelint module.
stylelint.packageManager
Type: "npm" | "yarn" | "pnpm"
Default: "npm"
Controls the package manager to be used to resolve the stylelint library. This has only an influence if the stylelint library is resolved globally. Valid values are "npm"
or "yarn"
or "pnpm"
.
stylelint.snippet
Type: string[]
Default: ["css","less","postcss","scss"]
An array of language identifiers specifying the files to enable snippets.
editor.codeActionsOnSave
This setting supports the entry source.fixAll.stylelint
. If set to true
all auto-fixable stylelint errors will be fixed on save.
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}
The setting below turns on Auto Fix for all providers including stylelint:
"editor.codeActionsOnSave": {
"source.fixAll": true
}
You can also selectively disable stylelint via:
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.stylelint": false
}
You can also selectively enable and disable specific languages using VS Code's language scoped settings. To disable codeActionsOnSave
for HTML files, use the following setting:
"[html]": {
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": false
}
}
Commands
This extension contributes the following commands to the Command palette.
-
Fix all auto-fixable problems
: applies stylelint auto-fix resolutions to all fixable problems.