Skip to content

Commit

Permalink
run stylelint for JS files when a CSS-in-JS processor is enabled
Browse files Browse the repository at this point in the history
Those languages IDs are safely supported by stylelint-vscode: shinnn/stylelint-vscode@5e3f455
  • Loading branch information
shinnn committed Mar 20, 2018
1 parent b41c73a commit 9a144b2
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 12 deletions.
31 changes: 21 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Read the [extension installation guide](https://code.visualstudio.com/docs/edito

<img align="right" width="430" alt="duplicate messages from both the built-in linter and vscode-stylelint" src="media/duplicate.png">

To prevent both [the VSCode built-in CSS linter](https://code.visualstudio.com/docs/languages/css#_syntax-verification-linting) `[css]` and this extension `[stylelint]` reporting the same CSS errors like in the screenshot, you can disable the built-in ones in User or Workspace [setting](https://code.visualstudio.com/docs/getstarted/settings):
To prevent both [the editor built-in linters](https://code.visualstudio.com/docs/languages/css#_syntax-verification-linting) `[css]` `[less]` `[scss]` and this extension `[stylelint]` from reporting essentially the same errors like in the screenshot, disable the built-in ones in User or Workspace [setting](https://code.visualstudio.com/docs/getstarted/settings):

```json
"css.validate": false,
Expand All @@ -27,7 +27,9 @@ To prevent both [the VSCode built-in CSS linter](https://code.visualstudio.com/d

## Usage

Once you follow [the stylelint startup guide](https://github.com/stylelint/stylelint#getting-started) by creating a [configuration](https://stylelint.io/user-guide/configuration/) file or edit [`stylelint.*` VSCode settings](#extension-settings), stylelint automatically validates documents with these [language identifiers](https://code.visualstudio.com/docs/languages/overview#_language-id):
Once a user follows [the stylelint startup guide](https://github.com/stylelint/stylelint#getting-started) by creating a [configuration](https://stylelint.io/user-guide/configuration/) file or by editting [`stylelint.*` VSCode settings](#extension-settings), stylelint automatically validates documents with these [language identifiers](https://code.visualstudio.com/docs/languages/overview#_language-id):

<img align="right" width="430" alt="UI to select a language identifier" src="media/language.png">

* CSS (`css`)
* HTML (`html`)
Expand All @@ -38,42 +40,51 @@ Once you follow [the stylelint startup guide](https://github.com/stylelint/style
* [Sass (`sass`)](https://marketplace.visualstudio.com/items?itemName=robinbentley.sass-indented)
* SCSS (`scss`)
* [Sugarss (`sugarss`)](https://marketplace.visualstudio.com/items?itemName=mhmadhamster.postcss-language)
* [Vue (`vue`)](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
* [Vue-HTML (`vue-html`)](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
* [Vue (`vue`, `vue-html`)](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
* XML (`xml`)

If either [stylelint-processor-glamorous](https://github.com/zabute/stylelint-processor-glamorous) or [stylelint-processor-styled-components](https://github.com/styled-components/stylelint-processor-styled-components) is installed and [enabled](https://github.com/stylelint/stylelint/blob/master/docs/user-guide/configuration.md#processors), stylelint also validates the followings:

* JavaScript (`javascript`)
* JavaScript React (`javascriptreact`)
* styled-components
* [Official (`source.css.styled`)](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components)
* [Userland (`styled-css`)](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel)
* TypeScript (`typescript`)
* TypeScript React (`typescriptreact`)

### Extension settings

Though it's highly recommended to add a [stylelint configuration file](https://stylelint.io/user-guide/example-config/) to your workspace folder instead, you can also use the following extension [settings](https://code.visualstudio.com/docs/getstarted/settings).
Though it's highly recommended to add a [stylelint configuration file](https://stylelint.io/user-guide/example-config/) to the current workspace folder instead, the following extension [settings](https://code.visualstudio.com/docs/getstarted/settings) are also available.

#### stylelint.enable

Type: `boolean`
Default: `true`

Control whether [stylelint](https://github.com/stylelint/stylelint/) is enabled or not.
Control whether this extension is enabled or not.

#### stylelint.configOverrides

Type: `Object`
Default: `null`

Will be directly passed to [`configOverrides`](https://github.com/stylelint/stylelint/blob/master/docs/user-guide/node-api.md#configoverrides) option.
Set stylelint [`configOverrides`](https://github.com/stylelint/stylelint/blob/master/docs/user-guide/node-api.md#configoverrides) option.

#### stylelint.config

Type: `Object`
Default: `null`

Will be directly passed to [`config`](https://github.com/stylelint/stylelint/blob/master/docs/user-guide/node-api.md#config) option. Note that if you set `config` option, this plugin ignores all the stylelint configuration files.
Set stylelint [`config`](https://github.com/stylelint/stylelint/blob/master/docs/user-guide/node-api.md#config) option. Note that when this option is enabled, stylelint doesn't load configuration files.

#### stylelint.additionalDocumentSelectors

Type: `Array<string>`
Default: `[]`

Document types that you can use to run stylelint against if you are using CSS inside document types like: `javascriptreact`, `typescriptreact`.
Document types that you can use to run stylelint against if you are using CSS inside document types.

## License

[ISC License](./LICENSE) © 2018 Shinnosuke Watanabe
[ISC License](./LICENSE.txt) © 2018 Shinnosuke Watanabe
Binary file added media/language.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 7 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,17 +30,22 @@
"activationEvents": [
"onLanguage:css",
"onLanguage:html",
"onLanguage:javascript",
"onLanguage:javascriptreact",
"onLanguage:less",
"onLanguage:markdown",
"onLanguage:postcss",
"onLanguage:sass",
"onLanguage:scss",
"onLanguage:source.css.styled",
"onLanguage:source.markdown.math",
"onLanguage:styled-css",
"onLanguage:sugarss",
"onLanguage:typescript",
"onLanguage:typescriptreact",
"onLanguage:vue",
"onLanguage:vue-html",
"onLanguage:xml",
"workspaceContains:**/node_modules/stylelint-processor-styled-components/package.json"
"onLanguage:xml"
],
"main": "index.js",
"contributes": {
Expand Down

0 comments on commit 9a144b2

Please sign in to comment.