Skip to content
A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint
JavaScript
Branch: master
Clone or download
Latest commit efc4062 Jan 6, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Add autoFixOnSave Dec 10, 2019
lib
media Update stylelint logo Jan 4, 2020
snippets test: Prettier fix snippets test Jan 5, 2020
test Fixed test Dec 23, 2019
.editorconfig Update project tooling configuration to match that of stylelint Nov 29, 2019
.eslintignore Changed to load stylelint from local node modules Dec 27, 2019
.eslintrc.js Clean up inlined stylelint-warning-to-vscode-diagnostic implementation Dec 8, 2019
.gitattributes Update project tooling configuration to match that of stylelint Nov 29, 2019
.gitignore
.nvmrc Update project tooling configuration to match that of stylelint Nov 29, 2019
.prettierignore Changed to load stylelint from local node modules Dec 27, 2019
.prettierrc.js Add `package-lock.json` to Prettier overide tabs indentation Dec 20, 2019
.travis.yml Clean up inlined stylelint-vscode implementation Dec 8, 2019
.vscodeignore Don't exclude the `/lib` folder in `.vscodeignore` Dec 22, 2019
CHANGELOG.md Update CHANGELOG.md Jan 6, 2020
LICENSE Update LICENSE Dec 22, 2019
README.md Merge commit '28a6d848cdd65bac4be0587ea56ed95e988808e2' into load_loc… Dec 29, 2019
fixture.css init Nov 24, 2015
index.js Add autofix command Dec 13, 2019
package-lock.json 0.80.0 Jan 5, 2020
package.json feat: Add `stylelint-disable` snippets Jan 5, 2020
screenshot.png init Nov 24, 2015
server.js Changed to load stylelint from local node modules Dec 27, 2019

README.md

vscode-stylelint

Build Status

A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint

screenshot

The extension uses the stylelint library installed in the opened workspace folder. If the workspace folder does not provide the stylelint, the extension looks for a global installed stylelint.
If not in the global installed stylelint, the extension uses the stylelint embedded in the extension. (However, using stylelint embedded in the extension is not recommended.)

Installation

  1. Execute Extensions: Install Extensions command from Command Palette.
  2. Type @id:stylelint.vscode-stylelint into the search form and install the topmost one.

Read the extension installation guide for more details.

Optional (but recommended) setup

duplicate messages from both the built-in linter and vscode-stylelint

To prevent both the editor built-in linters [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:

"css.validate": false,
"less.validate": false,
"scss.validate": false

Usage

Once a user follows the stylelint startup guide by creating a configuration file or by editing stylelint.* VSCode settings, stylelint automatically validates documents with these language identifiers:

UI to select a language identifier

Extension settings

Though it's highly recommended to add a stylelint configuration file to the current workspace folder instead, the following extension settings are also available.

stylelint.enable

Type: boolean
Default: true

Control whether this extension is enabled or not.

stylelint.configOverrides

Type: Object
Default: null

Set stylelint configOverrides option.

stylelint.config

Type: Object
Default: null

Set stylelint config option. Note that when this option is enabled, stylelint doesn't load configuration files.

stylelint.packageManager

Type: "npm" | "yarn" | "pnpm"
Default: "npm"

Controls the package manager to be used to resolve the stylelint library. This has only an influence if the stylelint library is resolved globally. Valid values are "npm" or "yarn" or "pnpm".

editor.codeActionsOnSave

This setting supports the entry source.fixAll.stylelint. If set to true all auto-fixable stylelint errors will be fixed on save.

  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }

The setting below turns on Auto Fix for all providers including stylelint:

  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }

You can also selectively disable stylelint via:

  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.stylelint": false
  }

You can also selectively enable and disable specific languages using VS Code's language scoped settings. To disable codeActionsOnSave for HTML files, use the following setting:

  "[html]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": false
    }
  }

Also note that there is a time budget of 750ms to run code actions on save which might not be enough for large files. You can increase the time budget using the editor.codeActionsOnSaveTimeout setting.

Commands

This extension contributes the following commands to the Command palette.

  • Fix all auto-fixable problems: applies stylelint auto-fix resolutions to all fixable problems.
You can’t perform that action at this time.