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

user_9884374 0
Viewed 3020

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. screenshot of project structure
  • Run stylelint from command-line. The screenshot of command-line result

But the extention still not automatically validate the css, what is going wrong? screenshot of no problems

stylelint visual-studio-code
3 Answers

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~

screenshot of successful validation from vscode stylelint extension

user_98843740

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!

user_107885070

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.

user_52963280
Related