1

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?

Daniel
  • 3,383
  • 4
  • 30
  • 61
  • It usually resides in the root folder of your project. Afaik you may have several config files, and each indidual one will overwrite usage from the root folder config for the folder/subfolders youve placed it in. – connexo Mar 04 '18 at 11:24
  • @connexo Thanks. I have not placed anything anywhere except for adding the settings via File > Preferences > Settings. So, do I need to add something else as well? – Daniel Mar 04 '18 at 11:28

3 Answers3

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 e.g. 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

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

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

jeddy3
  • 3,451
  • 1
  • 12
  • 21
0

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

module.exports = {
  extends: [
    "stylelint-config-standard",
  ]
};
Maximilian Burszley
  • 18,243
  • 4
  • 34
  • 63
0

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

Maurici Abad
  • 1,012
  • 9
  • 20