All Projects → stylelint → Vscode Stylelint

stylelint / Vscode Stylelint

Licence: mit
Official Visual Studio Code extension to lint CSS/SCSS/Less with stylelint

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vscode Stylelint

Vscode Stylelint
A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint
Stars: ✭ 260 (+84.4%)
Mutual labels:  stylelint, vscode, vscode-extension
Vscode Emacs Mcx
Awesome Emacs Keymap - VSCode emacs keybinding with multi cursor support
Stars: ✭ 135 (-4.26%)
Mutual labels:  hacktoberfest, vscode, vscode-extension
Nim
Streamline Your Node.js Debugging Workflow with Chromium (Chrome, Edge, More) DevTools.
Stars: ✭ 168 (+19.15%)
Mutual labels:  hacktoberfest, vscode, vscode-extension
Css Flexbox Cheatsheet
VS Code extension that lets you open a CSS Flexbox cheatsheet directly in the editor.
Stars: ✭ 87 (-38.3%)
Mutual labels:  hacktoberfest, vscode, vscode-extension
Svn Scm
SVN support for VS Code
Stars: ✭ 172 (+21.99%)
Mutual labels:  hacktoberfest, vscode, vscode-extension
Doxdocgen
Generate doxygen documentation from source code in VS Code
Stars: ✭ 127 (-9.93%)
Mutual labels:  hacktoberfest, vscode, vscode-extension
Quicktype Vscode
VS Code extension to convert JSON to TypeScript, C#, Go, and many more
Stars: ✭ 131 (-7.09%)
Mutual labels:  vscode, vscode-extension
Coddx Alpha
Coddx - a collection of tools that help developers program efficiently. One of the features is generating multiple files from templates quickly.
Stars: ✭ 132 (-6.38%)
Mutual labels:  vscode, vscode-extension
Advpl Vscode
Suporte para Advpl no VsCode
Stars: ✭ 132 (-6.38%)
Mutual labels:  vscode, vscode-extension
Vscode Swift
An extension for VS Code which provides support for the Swift language.
Stars: ✭ 132 (-6.38%)
Mutual labels:  vscode, vscode-extension
Vscode Auto Close Tag
Auto Close Tag for Visual Studio Code
Stars: ✭ 132 (-6.38%)
Mutual labels:  vscode, vscode-extension
Vscode Browse Lite
🚀 An embedded browser in VS Code
Stars: ✭ 134 (-4.96%)
Mutual labels:  vscode, vscode-extension
Vscode Codeql Starter
Starter workspace to use with the CodeQL extension for Visual Studio Code.
Stars: ✭ 130 (-7.8%)
Mutual labels:  vscode, vscode-extension
Markdown Toc
MarkdownTOC(Table Of Contents) Plugin for Visual Studio Code.
Stars: ✭ 130 (-7.8%)
Mutual labels:  vscode, vscode-extension
Vscode Neovim
VSCode Neovim Integration
Stars: ✭ 2,474 (+1654.61%)
Mutual labels:  vscode, vscode-extension
Vscode Elastic
Elasticsearch for VSCode
Stars: ✭ 130 (-7.8%)
Mutual labels:  vscode, vscode-extension
Vscode Scss
🔌 IntelliSense for Variables, Mixins and Functions in all Sass (SCSS syntax only) files.
Stars: ✭ 128 (-9.22%)
Mutual labels:  vscode, vscode-extension
Helm Intellisense
Extension for Visual Studio Code - Intellisense in helm-templates from the values.yaml
Stars: ✭ 137 (-2.84%)
Mutual labels:  vscode, vscode-extension
Vscode Coding Tracker
🕙 A coding activities tracker(time, file, type)
Stars: ✭ 137 (-2.84%)
Mutual labels:  vscode, vscode-extension
Android Dev Ext
Android debugging support for VS Code
Stars: ✭ 141 (+0%)
Mutual labels:  vscode, vscode-extension

vscode-stylelint

Testing Linting

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.configFile

Type: string
Default: ""

Set stylelint configFile option. Path to a JSON, YAML, or JS file that contains your configuration object. Use this option if you don't want stylelint to search for a configuration file.

stylelint.configBasedir

Type: string
Default: ""

Set stylelint configBasedir option. The path to the directory that relative paths defining "extends" and "plugins" are relative to. Only necessary if these values are relative paths.

stylelint.syntax

Type: "css" | "css-in-js" | "html" | "less" | "markdown" | "sass" | "scss" | "sugarss"
Default: ""

Set stylelint syntax option. Specify a syntax. Only use this option if you want to force a specific syntax.

stylelint.customSyntax

Type: string
Default: ""

Set stylelint customSyntax option. An absolute path to a custom PostCSS-compatible syntax module.

e.g.

  "stylelint.customSyntax": "sugarss"

You can use ${workspaceFolder} to replace the the path of the folder opened in VS Code.

e.g.

  "stylelint.customSyntax": "${workspaceFolder}/custom-syntax.js"

stylelint.ignoreDisables

Type: boolean
Default: false

Set stylelint ignoreDisables option. If true, ignore styleline-disable (e.g. /* stylelint-disable block-no-empty */) comments.

stylelint.reportNeedlessDisables

Type: boolean
Default: false

Set stylelint reportNeedlessDisables option. If true, also report errors for stylelint-disable comments that are not blocking a lint warning.

stylelint.reportInvalidScopeDisables

Type: boolean
Default: false

Set stylelint reportInvalidScopeDisables option. If true, also report errors for stylelint-disable comments that used for rules that don't exist within the configuration object.

stylelint.validate

Type: string[]
Default: ["css","html","javascript","javascriptreact","less","markdown","postcss","sass","scss","source.css.styled","source.markdown.math","styled-css","sugarss","svelte","typescript","typescriptreact","vue","vue-html","vue-postcss","xml","xsl"]

An array of language identifiers specifying the files to be validated.

stylelint.stylelintPath

Type: string
Default: ""

Supply a custom path to the stylelint module.

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".

stylelint.snippet

Type: string[]
Default: ["css","less","postcss","scss"]

An array of language identifiers specifying the files to enable snippets.

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
    }
  }

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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].