How to get stylelint to work in Visual Studio Code?

Question

I am trying to get the stylelint extension to work in visual studio code. However, with no success so far. The extension with a short explanation is here:

https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint

What I did so far: Add

"stylelint.enable": true,
"css.validate": false,
"scss.validate": false,

to my settings. But this only deactivates the usual linting without activating stylelint. I also read at

Stylelint VScode doesn't work

in a comment that one needs a stylelint.config.js file. However, I don't have one and don't know how to create or put it (in Windows).

Edit

I found an "example configuration" file of stylelint:

https://github.com/stylelint/stylelint/blob/master/docs/user-guide/example-config.md

So, I guess part of that needs to go into the stylelint.config.js . But which are necessary to get it to work and where do I put it?

Answer 1

From the stylelint configuration documentation:

The linter expects a configuration object . You can either craft your own config or extend an existing one.

The " Getting started " section of the stylelint website has some suggestions on how to do this eg using the example config, crafting your own config or extending an existing config.

I believe the quickest way to hit-the-ground-running, so to speak, is to create a configuration object that extends either stylelint-config-standard or stylelint-config-recommended . Use the standard config if you want the linter to enforce stylistic conventions, and use the recommended config if you don't.

To use the recommended config:

1. install the config into your project using npm:

npm install --save-dev stylelint-config-recommended

2. Create a .stylelintrc file that extends the config in the root of your project:

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

Answer 2

A simple response to answer the simple question, the stylelint.config.js file is a nodejs module export and looks like so:

module.exports = {
  extends: [
    "stylelint-config-standard",
  ]
};

Answer 3

If you are using Yarn 2, you need to do an extra configuration, just run:

yarn dlx @yarnpkg/pnpify --sdk vscode

https://yarnpkg.com/getting-started/editor-sdks#vscode