Disable VS Code Stylelint errors in React JavaScript files

Question

[stylelint] Unexpected missing end-of-source newline (no-missing-end-of-source-newline)
[stylelint] Expected "backgroundColor" to be "backgroundcolor" (value-keyword-case)
[stylelint] Expected a trailing semicolon (declaration-block-trailing-semicolon)

How do I stop the VS Code Styleint extension from reporting things like this? It's not particularly useful as you can see :P

UPDATE:

To clarify, I have a .stylelintrc configuration file and my rules are as I want them but I want it to lint my styles and not my JavaScript. The extension description says:

stylelint automatically validates documents with these language identifiers:

...and javascriptreact is one of those language identifiers. I would like to know how to stop the extension from validating javascriptreact documents.

Desko27 · Accepted Answer · 2019-03-13T10:42:55.653

17

TL;DR

Here's a working example of .stylelintrc file which makes VS Code ignore JS/JSX files:

{
  "ignoreFiles": [
    "**/*.js",
    "**/*.jsx"
  ]
}

Don't forget to restart VS Code after changes!

Explanation

Stylelint extension for VS Code reads .stylelintrc, so you can use ignoreFiles key in order to stop VS Code from linting styles on certain file types.

As documentation stands, you could also use .stylelintignore file, but it's not working for me as VS Code seems to ignore that file.

edited Mar 13 '19 at 10:42

answered Jul 02 '18 at 09:48

Desko27

1,498
10
10

same here with VS Code – pczern Aug 10 '18 at 17:07
2

More emphasis on restarting VS code – iamcastelli Mar 12 '19 at 09:10
Nothing like the tried and true troubleshooting step of turning something off and back on. I didn't realize VS Code must be restarted in order for this to take effect. This should be in the documentation. – Josiah Aug 07 '19 at 21:01
In the case of JSX, is it possible to get StyleLint to understand this syntax and lint any CSS within it rather than turning it off? – Steve Chambers Jan 29 '21 at 15:07

score 0 · Answer 2 · answered Jun 21 '18 at 13:09

0

what you're looking for is the configuration file for stylelint. Most linters ESLint, JSLint, stylelint... come with the ability to add customization's to the lint. For example a popular ESlint config would be the AirBnB ESlint config. You basically copy the configuration from AirBnB and put it in a .eslintrc.* file. This will override the default settings of the ESlint config. You want to do something similar for stylelint, considering this is an extension the settings to override are probably right in the VS Code settings, (Ctrl + , or Cmd + ,), look for the stylelint settings.

https://stylelint.io/user-guide/example-config/ this is an example configuration. https://stylelint.io/user-guide/rules/ These are the rules you can configure.

Good Luck!

answered Jun 21 '18 at 13:09

Dylan Wright

1,118
12
19

I have a configuration file and it is as I want it, but I want it to report these things in my styles and not in my JavaScript. The extension description says "stylelint automatically validates documents with these language identifiers:" and `javascriptreact` is one of them. I would like to know how to stop the extension from validating `javascriptreact` documents. – jjenzz Jun 21 '18 at 14:23
I see your dilemma here, unfortunately I don't know enough about the styelint extension. It could be possible that it has some kind of decorator and/or line parsing capability to stop from reading the file. Think like Eslint, in a JS file you can just put at the top /* eslint-disable */ and Eslint ignores that file. – Dylan Wright Jun 22 '18 at 13:12

Disable VS Code Stylelint errors in React JavaScript files

2 Answers2

TL;DR

Explanation