2

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.

Nafiz Ahmed
  • 567
  • 3
  • 10
  • Hi! I am a bit late, but maybe can help someone else. Check my answer here: https://stackoverflow.com/questions/69149058/why-the-stylelint-vscode-extension-is-not-working-on-my-computer/71817658#71817658 – Franco Berardi Apr 10 '22 at 14:51

1 Answers1

2

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

enter image description here

Reverberation
  • 31
  • 5