Stylelint VScode doesn't work

Question

I want to use the css linter "stylelint" on my VScode text editor. I downloaded the plugin and install it, then I make the "css.validate": false. But i don't have any box that show me error on my CSS files. What can I do ?

Answer 1

If you're getting started with stylelint for the first time, there are two key steps to enable it in Visual Studio Code:

1. turn off Visual Studio Code's built-in CSS linter and turn on the stylelint extension
2. create a stylelint configuration object and turn on some rules

You can complete the first step by following the extension usage instructions, mainly changing your Visual Studio Code settings to:

{
  "stylelint.enable": true,
  "css.validate": false,
  "scss.validate": false
}

And the second step by following the configuration documentation on the stylelint website. I believe the quickest means to get started is:

1. install the recommended config into your project using npm:

npm install --save-dev stylelint-config-recommended

2. Create a .stylelintrc file that extends the recommended config in the root of your project:

{ "extends": "stylelint-config-recommended" }

This config turns on just the possible error rules. It is a sensible config to start with and build upon. There are over 150 rules built-in to stylelint. You can choose to turn on and configure as many, or as few, as you like to meet your linting needs.

Answer 2

For anyone seeing this and trying to lint other file extensions; note that by default, the extension validates only CSS and PostCSS files. In order to validate file extensions such as SCSS, you would need to explicitly state so in .vscode\settings.json:

{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.enable": true,
  "stylelint.validate": ["css", "scss"]
}