Search code examples
visual-studio-codevscode-extensionsstylelint

Stylelint VScode doesn't work

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 ?

Solution

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