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 ?

Capriola

Have you followed each step of the usage guidelines, including enabling stylelint with { "stylelint.enable": true }? – Protractile

Yes and i found the solution. I didin't have a stylelint.config.js file – Capriola

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.

Protractile

The referenced VS Code extension no longer exists. – Catlee

Hi, how can you declare a .stylelintrc file that is located in ./build subfolder ? – Ewall

it works only if I put { "extends": "stylelint-config-recommended" } in three lines and indent "extends": "stylelint-config-recommended" – Hydropathy

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"]
}

Phenothiazine