Stylelint VScode doesn't work

alexzerah picture alexzerah · Nov 4, 2017 · Viewed 8.7k times · Source

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

jeddy3 picture jeddy3 · Mar 4, 2018

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

  1. 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.