vscode-stylelint: [Bug]: Extension starts, but does not show stylelint errors

In my case just add the following to your settings.json of VSCode:

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

More info (I use the plugin stylelint-scss instead of postcss-scss). Make sure you use stylelint at version >= 14.

Update: Does still not report all problems. But it’s maybe another issue.

Solutions: You can upgrade stylelint to the latest version OR downgrade vscode-stylelint to v0.87.6 (latest compatible version before breaking change).

The upgrade solution doesn’t work. I’m also seeing errors from stylelint on the command line but not through this extension.

Configuration: stylelint: 14.4.0 vscode-stylelint: 1.2.1 node: 14.17.6 operating system: macOS 12.2 config in package.json:

  "stylelint": {
    "plugins": [
      "stylelint-scss"
    ],
    "extends": "stylelint-config-standard-scss",
    "overrides": [
      {
        "files": [
          "**/*.scss"
        ],
        "customSyntax": "postcss-scss"
      }
    ],
    "rules": {
      "color-hex-length": "long",
      "indentation": 4,
      "string-quotes": "single"
    }
  },

I want to finalize how to make it works for styled-components with typescript:

Don’t forget to remove the processors from the stylelint config

stylelint.config.js

module.exports = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-styled-components',
    'stylelint-config-standard'
  ],
  overrides: [
    {
      customSyntax: '@stylelint/postcss-css-in-js',
      files: ['**/*.ts', '**/*.tsx']
    }
  ]
};

VSCode config:

"editor.codeActionsOnSave": {
     "source.fixAll.stylelint": true
  },
"stylelint.validate": [
    "postcss",
    "typescript",
    "typescriptreact",
    "js"
  ],

But I’m still getting error:

Unexpected unknown function “${” (function-no-unknown)

EDIT: Please disregard; vscode-stylelint was working after all. The issues I was testing it against were formatting ones, which I had not realized were deprecated in v15 in favor of using Prettier or similar.

@jeddy3 Thank you for the reply.

————————

Ditto for vscode-stylelint not highlighting or fixing errors on my Macbook Pro. I see plenty of CSS issues when I run npx stylelint "**/*.css".

All packages are current. I am running VS Code v1.75.1, Stylelint extension v1.2.3.

Here are the relevant sections of my configuration files:

package.json

{
  "devDependencies": {
    "stylelint": "^15.1.0",
    "stylelint-config-standard": "^30.0.1",
  }
}

settings.json

{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.validate": [
    "css",
    "scss"
  ],
  "stylelint.enable": true,
  "stylelint.config": null,
  "stylelint.reportNeedlessDisables": true,
  "[css]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  }
}

.stylelintrc.json

{
  "extends": "stylelint-config-standard"
}

Per the troubleshooting instructions, I ran NODE_ENV=development code. When I opened a CSS file with known errors and reloaded VS Code, the Stylelint extension produced this output: stylelint-output.txt. I don’t see any obvious errors.

Any help is appreciated. Thank you.

Found the workaround : This problem is due to one of the vscode updates in the last weeks. It upgraded vscode-stylelint from v0.x to v1.x, which contains a breaking change if you use stylelint < 14 : https://github.com/stylelint/vscode-stylelint#migrating-from-vscode-stylelint-0xstylelint-13x Solutions: You can upgrade stylelint to the latest version OR downgrade vscode-stylelint to v0.87.6 (latest compatible version before breaking change).

@topheman Which solution did you use? I’m currently using the latest of both stylelint and vscode-stylelint.

I had this issue several weeks back when I upgraded vscode. I downgraded vscode-stylelint and was able to get it working until the next vscode update broke it again

@jeffweim-hm I’m currently using the solution of downgrading vscode-stylelint to v0.87.6 (until I fix some dependencies problems to upgrade stylelint)

You shouldn’t upgrade stylelint AND downgrade vscode-stylelint. Choose either one of the solutions.

I am also facing this issue in my macbook pro. Following is my settings.

.vscode/settings.json

.stylelintrc

package.json

Stylelint installed in VScode

Same issue with Nuxt, stylelint 14.1.0 and vscode-stylelint v1.2.2

module.exports = {
  customSyntax: "postcss-html",
  extends: [
    "stylelint-config-standard",
    "stylelint-config-recommended-vue",
    "stylelint-config-prettier",
  ],
};

Found the workaround :

This problem is due to one of the vscode updates in the last weeks. It upgraded vscode-stylelint from v0.x to v1.x, which contains a breaking change if you use stylelint < 14 : https://github.com/stylelint/vscode-stylelint#migrating-from-vscode-stylelint-0xstylelint-13x

Solutions: You can upgrade stylelint to the latest version OR downgrade vscode-stylelint to v0.87.6 (latest compatible version before breaking change).