Disable VS Code Stylelint errors in React JavaScript files [duplicate]

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.

Mellophone

Answer 1

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.

Compression

same here with VS Code – Acosta

More emphasis on restarting VS code – Lovmilla

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. – Eunaeunice

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? – Gandhiism

Answer 2

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!

Query

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. – Mellophone

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. – Query