Why the stylelint vscode extension is not working on my computer?

Question

I follow the guide to install stylelint vscode extension, but it does not work on my computer.

I'm pretty sure that I follow all the necessary steps.

• Install Extensions.
• Disable the built-in linters in User setting.
• Use npm to install stylelint and its standard configuration.
• Create a .stylelintrc.json configuration file in the root of my project.
• Run stylelint from command-line.

But the extention still not automatically validate the css, what is going wrong?

Answer 1

After reading the guide again, I found the setting stylelint.config and understand its definition:

Set stylelint config option. Note that when this option is enabled, stylelint doesn't load configuration files.

So I look at my vscode user setting, oh, stylelint.config: {}. After changing it to null, stylelint automatically validates the css file immediately.

Phew~

Answer 2

I faced the same issue. Let me share how I got it to work smoothly with Stylelint extension ver.1.2.2:

In root project folder, you should have the following structure:

/path/to/project/
                .vscode/
                       settings.json
                       extensions.json
                src/
                .stylelintrc.json
                package.json

extensions.json

From the official documentation: Starting with 1.x, vscode-stylelint will depend on having a copy of Stylelint installed in the open workspace (recommended) or globally (not recommended). If the extension doesn't seem to be linting any documents, make sure you have Stylelint installed

{
  "recommendations": ["stylelint.vscode-stylelint"]
}

settings.json

{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["css", "scss"]
}

package.json

Some of the following packages are to detect reserved words inside sass files such us @use, @export, @global and so on. I think you don't actually need all of them, but it is my configuration.

    // DevDependencies
    "stylelint": "^14.6.0",
    "stylelint-config-css-modules": "^4.1.0",
    "stylelint-config-standard-scss": "^3.0.0",
    "stylelint-scss": "^4.2.0"

.stylelintrc.json

{
  "extends": ["stylelint-config-standard-scss", "stylelint-config-css-modules"],
  "plugins": ["stylelint-scss"],
  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true
  }
}

After configuring each file, remember to close vscode and open it again in order to start enjoying Stylelint!

Answer 3

In the extension settings, you should to check the file extensions, which it is watching:

• Stylelint: Snippet
• Stylelint: Validate

You can also do it through setting.json

"stylelint.snippet": [
    "css",
    "less",
    "postcss",
    "scss"
  ],
  "stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss"
  ]

Open extension settings to add a configuration rules source stylelint-config-standard-scss (or whatever you installed, more here )

For example, I have this, additionally rewritten some of my rules:

"stylelint.config": {
"extends": "stylelint-config-standard-scss",
"rules": {
  "no-empty-source": null,
  "no-missing-end-of-source-newline": null,
  "max-line-length": [
    300,
    {"ignore": ["comments"]}
  ],
  "selector-combinator-space-after": "never",
  "selector-combinator-space-before": "never"
}}

The same settings in the linter for the GitHub Action and in the VSCode extension are very convenient. Now I know about the problems in advance and do not wait until the build happens in the repository.

Answer 4

I got a new PC and installed the newest version, 1.2.1, and nothing worked - then I checked the version on the old PC, and it was at version 0.86.0. When changing the version to the older version and reloading VSC, it worked immediately.