How to configure the stylelint extension in vscode?

Question

I created a project using the create-react-app --template typescript. Now I wanted to try out the css linter stylelint. And, so I have installed the npm packages stylelint and stylelint-config-standard as dev dependency using yarn.

I have also added a config file named .stylelintrc.js with below content

module.exports = {
  extends: "stylelint-config-standard",
  ignoreFiles: ["./build/**/*.css", "./node_modules/**/*.css", "**/*.js",
  "**/*.jsx"],
}

In my package.json, I have also added a script like

"css-lint": "stylelint '*/**/*.css'",

Now when I run yarn css-lint in the terminal, it works.

As for VS Code, I installed and enabled the extension. And as suggested, I have disabled the default css, less, sass linters. I have also restarted the VS code but no luck, the stylelint extension does not work or highlight any errors in VS code.

I am stuck. And any help will be appreciated.

Answer 1

Add the language identifiers for the documents you want to validate to the extension's workspace or user settings using the stylelint.validate option. Troubleshoot vscode-stylelint with the output panel/channel.

//.vscode/settings.json
{
  "stylelint.validate": [
    "css",
    "scss",
    ...
  ],
}