{"id":13683726,"url":"https://github.com/stylelint/vscode-stylelint","last_synced_at":"2026-04-02T14:54:35.935Z","repository":{"id":37706588,"uuid":"224931738","full_name":"stylelint/vscode-stylelint","owner":"stylelint","description":"The official Visual Studio Code extension for Stylelint","archived":false,"fork":false,"pushed_at":"2025-03-28T01:49:45.000Z","size":5291,"stargazers_count":324,"open_issues_count":65,"forks_count":33,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-04-01T11:02:33.815Z","etag":null,"topics":["hacktoberfest","stylelint","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stylelint.png","metadata":{"funding":{"github":"stylelint","open_collective":"stylelint"},"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-29T22:51:07.000Z","updated_at":"2025-03-30T00:46:16.000Z","dependencies_parsed_at":"2022-09-15T22:43:19.032Z","dependency_job_id":"8a45859d-d005-4593-8162-21ace0dd2b47","html_url":"https://github.com/stylelint/vscode-stylelint","commit_stats":{"total_commits":881,"total_committers":39,"mean_commits":22.58974358974359,"dds":0.4733257661748014,"last_synced_commit":"f2d2ac30237cb79b148aaa4076120d79475d47cc"},"previous_names":[],"tags_count":208,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stylelint%2Fvscode-stylelint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stylelint%2Fvscode-stylelint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stylelint%2Fvscode-stylelint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stylelint%2Fvscode-stylelint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stylelint","download_url":"https://codeload.github.com/stylelint/vscode-stylelint/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247838444,"owners_count":21004580,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","stylelint","vscode","vscode-extension"],"created_at":"2024-08-02T13:02:26.925Z","updated_at":"2026-04-02T14:54:35.929Z","avatar_url":"https://github.com/stylelint.png","language":"TypeScript","funding_links":["https://github.com/sponsors/stylelint","https://opencollective.com/stylelint"],"categories":["TypeScript"],"sub_categories":[],"readme":"# vscode-stylelint\n\n[![Testing](https://github.com/stylelint/vscode-stylelint/actions/workflows/testing.yml/badge.svg)](https://github.com/stylelint/vscode-stylelint/actions/workflows/testing.yml)\n\nThe official [Visual Studio Code](https://code.visualstudio.com/) extension for [Stylelint](https://stylelint.io/).\n\n\u003cimg width=\"449\" alt=\"Screenshot of Stylelint errors displayed in VS Code\" src=\"https://raw.githubusercontent.com/stylelint/vscode-stylelint/main/media/screenshot.png\"\u003e\n\n_Currently tested against Stylelint 14-17. Untested versions may still work, but are not guaranteed to do so. See [Stylelint Version Support](#stylelint-version-support) for details._\n\n\u003c!-- cspell:disable-next-line --\u003e\n\n**Table of Contents**\n\n- [Installation](#installation)\n  - [Disable VS Code's Built-In Linters (optional)](#disable-vs-codes-built-in-linters-optional)\n- [Usage](#usage)\n  - [Commands](#commands)\n  - [Actions](#actions)\n  - [Problem Matchers](#problem-matchers)\n  - [Extension Settings](#extension-settings)\n- [Stylelint Version Support](#stylelint-version-support)\n- [Migrating](#migrating)\n- [Troubleshooting](#troubleshooting)\n- [Contributing](#contributing)\n- [Licence](#licence)\n\n## Installation\n\nYou can install the extension from the [Command Palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette):\n\n1. Execute the `Extensions: Install Extensions` command\n2. Type `@id:stylelint.vscode-stylelint` into the search form\n3. Install the topmost one with the verified publisher mark.\n\nFor more details, you can read the [VS Code's extension installation guide](https://code.visualstudio.com/docs/editor/extension-gallery).\n\n### Disable VS Code's Built-In Linters (optional)\n\nYou can disable VS Code's [built-in linters](https://code.visualstudio.com/docs/languages/css#_syntax-verification-linting) either in the [user or workspace settings](https://code.visualstudio.com/docs/getstarted/settings).\n\nFor example, to disable the built-in CSS, Less, and SCSS linters:\n\n```json\n  \"css.validate\": false,\n  \"less.validate\": false,\n  \"scss.validate\": false\n```\n\n\u003cimg width=\"430\" alt=\"Screenshot of duplicate error messages\" src=\"https://raw.githubusercontent.com/stylelint/vscode-stylelint/main/media/duplicate.png\"\u003e\n\n_An example of duplicate error messages emitted by both the built-in linter and vscode-stylelint._\n\n## Usage\n\n\u003e See the [Stylelint getting started guide](https://stylelint.io/user-guide/get-started) for more information.\n\nThe extension will automatically lint CSS and [PostCSS](https://marketplace.visualstudio.com/items?itemName=mhmadhamster.postcss-language) documents (those with [language identifiers](https://code.visualstudio.com/docs/languages/overview#_language-identifier) `css` and `postcss`, respectively) once you create a [Stylelint configuration file](https://stylelint.io/user-guide/configure) (or configure [the Stylelint extension's settings](#extension-settings)) and install Stylelint.\n\n\u003cimg width=\"430\" alt=\"Screenshot of UI to select a language identifier\" src=\"https://raw.githubusercontent.com/stylelint/vscode-stylelint/main/media/language.png\"\u003e\n\n_You can see or change the current document's language in the bottom-right corner of the editor window._\n\nYou can use the [`stylelint.validate`](#stylelintvalidate) extension setting to lint additional languages.\n\nFor example, to additionally lint SCSS:\n\n```json\n  \"stylelint.validate\": [\"css\", \"postcss\", \"scss\"],\n```\n\nOr to additionally lint CSS-in-JS in JSX and TSX:\n\n```json\n  \"stylelint.validate\": [\"css\", \"postcss\", \"javascriptreact\", \"typescriptreact\"],\n```\n\nThe extension first looks for a copy of Stylelint installed in the open workspace folder, then for a globally installed version if it can't find one. If neither can be found, it will not lint any documents.\n\n### Commands\n\nThe extension adds the following commands to the command palette:\n\n- `Fix all auto-fixable Problems` - apply fixes to all automatically fixable problems\n- `Lint All Files` - lint all files matching the [`stylelint.lintFiles.glob`](#stylelintlintfilesglob) pattern in every workspace folder\n- `Lint Workspace Folder` - lint all matching files in a single workspace folder\n- `Clear All Problems` - clear all Stylelint diagnostics\n- `Restart Stylelint Server` - restart the Stylelint LSP and runtime server\n- `Show Output Channel` - open the Stylelint output panel\n\n### Actions\n\nThe extension provides an action that you can use with VS Code's [`editor.codeActionsOnSave`](https://code.visualstudio.com/docs/getstarted/settings) setting.\n\n#### `editor.codeActionsOnSave`\n\nYou can automatically fix all auto-fixable problems on save by setting the `source.fixAll.stylelint` property to `explicit`:\n\n```json\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.stylelint\": \"explicit\"\n  }\n```\n\nOr turn on auto fix for all providers, not just Stylelint:\n\n```json\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll\": \"explicit\"\n  }\n```\n\nYou can also selectively disable Stylelint:\n\n```json\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll\": \"explicit\",\n    \"source.fixAll.stylelint\": \"never\"\n  }\n```\n\nYou can also selectively enable and disable specific languages using VS Code's language-scoped settings. For example, to disable `codeActionsOnSave` for HTML files, use the following:\n\n```json\n  \"[html]\": {\n    \"editor.codeActionsOnSave\": {\n      \"source.fixAll.stylelint\": \"never\"\n    }\n  }\n```\n\n### Problem Matchers\n\nThe extension contributes [problem matchers](https://code.visualstudio.com/docs/debugtest/tasks#_defining-a-problem-matcher) that can be used to parse Stylelint CLI output from [VS Code tasks](https://code.visualstudio.com/docs/debugtest/tasks) into the Problems panel.\n\nTwo problem matchers are available, corresponding to a selection of [Stylelint's formatters](https://stylelint.io/user-guide/options/#formatter):\n\n- **`$stylelint-compact`** for the `compact` formatter\n- **`$stylelint-unix`** for the `unix` formatter\n\nFor example, to lint all CSS files using a task with the compact formatter, set up a task like so:\n\n```json\n// .vscode/tasks.json\n{\n  \"version\": \"2.0.0\",\n  \"tasks\": [\n    {\n      \"type\": \"npm\",\n      \"script\": \"lint:stylelint\",\n      \"problemMatcher\": \"$stylelint-compact\"\n    }\n  ]\n}\n```\n\nwhere `lint:stylelint` is a script running Stylelint with the compact formatter:\n\n```json\n// package.json\n{\n  \"scripts\": {\n    \"lint:stylelint\": \"stylelint --formatter=compact \\\"**/*.css\\\"\"\n  }\n}\n```\n\n\u003e [!NOTE]\n\u003e Stylelint's default formatter uses multiline output, which VS Code's problem matcher system [does not fully support](https://github.com/stylelint/vscode-stylelint/issues/150#issuecomment-975191285). This is why you must use either the `compact` or `unix` formatter to use the problem matchers.\n\n### Extension Settings\n\nThough relying on a [Stylelint configuration file](https://stylelint.io/user-guide/configure) in your project is highly recommended, you can instead use the following [extension settings](https://code.visualstudio.com/docs/getstarted/settings):\n\n#### `stylelint.enable`\n\n\u003e Type: `boolean`  \n\u003e Default: `true`\n\nControls whether this extension is enabled or not.\n\n#### `stylelint.run`\n\n\u003e Type: `\"onSave\" | \"onType\"`  \n\u003e Default: `\"onType\"`\n\nControls when the linter runs.\n\n- `onType`: Runs on each change as you type.\n- `onSave`: Only runs after you save a document.\n\n#### `stylelint.logLevel`\n\n\u003e Type: `\"error\" | \"warn\" | \"info\" | \"debug\"`  \n\u003e Default: `\"info\"`\n\nControls the log level used by the Stylelint extension and language server. Restart the extension host or the window after changing the setting, since it's picked up at initialization.\n\n#### `stylelint.runtime`\n\n\u003e Type: `string | null`  \n\u003e Default: `null`\n\nThe location of the node binary to run Stylelint under. By default, the extension uses the Node.js runtime bundled with VS Code. Set this to use a different Node.js version on your system.\n\nFor example:\n\n```json\n  \"stylelint.runtime\": \"/usr/local/bin/node\"\n```\n\nChanging this setting requires a server restart to take effect.\n\n#### `stylelint.execArgv`\n\n\u003e Type: `string[] | null`  \n\u003e Default: `null`\n\nAdditional exec argv arguments passed to the Node.js runtime.\n\nFor example:\n\n```json\n  \"stylelint.execArgv\": [\"--max_old_space_size=8192\"]\n```\n\nChanging this setting requires a server restart to take effect.\n\n#### `stylelint.validate`\n\n\u003e Type: `string[]`  \n\u003e Default: `[\"css\", \"postcss\"]`\n\nAn array of [language identifiers](https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers) specifying which files to validate.\n\n#### `stylelint.snippet`\n\n\u003e Type: `string[]`  \n\u003e Default: `[\"css\", \"postcss\"]`\n\nAn array of language identifiers specifying which files to enable snippets for.\n\n#### `stylelint.stylelintPath`\n\n\u003e Type: `string`  \n\u003e Default: `\"\"`\n\nUsed to supply a custom path to the Stylelint module.\n\n#### `stylelint.packageManager`\n\n\u003e Type: `\"npm\" | \"yarn\" | \"pnpm\"`  \n\u003e Default: `\"npm\"`\n\nControls the package manager to be used to resolve the Stylelint library. This setting only has an effect if the Stylelint library is resolved globally. Valid values are `\"npm\"` or `\"yarn\"` or `\"pnpm\"`.\n\n#### `stylelint.rules.customizations`\n\n\u003e Type: `object[]`  \n\u003e Default: `[]`\n\nAn array of rule customizations that let you override the severity level of Stylelint rules. This is useful for downgrading errors to warnings, upgrading warnings to errors, or completely suppressing specific rules in the editor.\n\nEach customization object has the following properties:\n\n- `rule`: A string pattern matching the rule name. Supports wildcards and negation patterns:\n  - Exact match: `\"color-named\"` matches only the `color-named` rule.\n  - Wildcard: `\"color-*\"` matches all rules starting with `color-`.\n  - Negation: `\"!color-*\"` matches all rules except those starting with `color-`.\n- `severity`: The severity level to apply.\n  - `\"error\"`: Show as error (red underline).\n  - `\"warn\"`: Show as warning (yellow underline).\n  - `\"info\"`: Show as information (blue underline).\n  - `\"off\"`: Don't show the diagnostic.\n  - `\"default\"`: Use the original severity from Stylelint.\n  - `\"downgrade\"`: Convert errors to warnings, warnings to info messages.\n  - `\"upgrade\"`: Convert info to warnings, warnings to errors.\n\nCustomizations are applied in order, with later rules taking priority over earlier ones. This means that more general patterns should come before more specific ones for the specific rules to override the general ones.\n\nExample:\n\n```json\n{\n  \"stylelint.rules.customizations\": [\n    {\n      \"rule\": \"font-*\",\n      \"severity\": \"info\"\n    },\n    {\n      \"rule\": \"!color-*\",\n      \"severity\": \"info\"\n    },\n    {\n      \"rule\": \"declaration-block-*\",\n      \"severity\": \"default\"\n    },\n    {\n      \"rule\": \"comment-word-disallowed-list\",\n      \"severity\": \"off\"\n    },\n    {\n      \"rule\": \"color-named\",\n      \"severity\": \"warn\"\n    }\n  ]\n}\n```\n\n#### `stylelint.config`\n\n\u003e Type: `Object`  \n\u003e Default: `null`\n\nSets the Stylelint [`config`](https://stylelint.io/user-guide/usage/node-api#config) option. Note that when this option is enabled, Stylelint doesn't load configuration files.\n\n#### `stylelint.configFile`\n\n\u003e Type: `string`  \n\u003e Default: `\"\"`\n\nSets the Stylelint [`configFile`](https://stylelint.io/user-guide/usage/options#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.\n\n#### `stylelint.configBasedir`\n\n\u003e Type: `string`  \n\u003e Default: `\"\"`\n\nSets the Stylelint [`configBasedir`](https://stylelint.io/user-guide/usage/options#configbasedir) option. The path to the directory to which relative paths defining \"extends\" and \"plugins\" are relative. Only necessary if these values are relative paths.\n\n#### `stylelint.customSyntax`\n\n\u003e Type: `string`  \n\u003e Default: `\"\"`\n\nSets the Stylelint [`customSyntax`](https://stylelint.io/user-guide/usage/options/#customsyntax) option, which points to a [PostCSS syntax](https://github.com/postcss/postcss#syntaxes) module. Must be either the package name or an absolute path to the module.\n\ne.g.\n\n```json\n  \"stylelint.customSyntax\": \"sugarss\"\n```\n\nYou can use `${workspaceFolder}` to refer to the folder opened in VS Code.\n\ne.g.\n\n```json\n  \"stylelint.customSyntax\": \"${workspaceFolder}/custom-syntax.js\"\n```\n\n#### `stylelint.ignoreDisables`\n\n\u003e Type: `boolean`  \n\u003e Default: `false`\n\nSets the Stylelint [`ignoreDisables`](https://stylelint.io/user-guide/usage/options/#ignoredDisables) option. If `true`, Stylelint ignores `stylelint-disable` (e.g. `/* stylelint-disable block-no-empty */`) comments.\n\n#### `stylelint.ignorePath`\n\n\u003e Type: `string`  \n\u003e Default: `\"\"`\n\nSets the Stylelint [`ignorePath`](https://stylelint.io/user-guide/options/#ignorepath) option. Path to a file containing patterns describing files to ignore. Use to override automatic `.stylelintignore` detection.\n\nYou can use `${workspaceFolder}` to refer to the folder opened in VS Code.\n\ne.g.\n\n```json\n  \"stylelint.ignorePath\": \"${workspaceFolder}/.gitignore\"\n```\n\n#### `stylelint.lintFiles.glob`\n\n\u003e Type: `string`  \n\u003e Default: `\"**/*.css\"`\n\nThe glob pattern used by the \"Lint All Files\" and \"Lint Workspace Folder\" commands to discover files. Adjust this if you lint SCSS, Less, or other file types.\n\ne.g.\n\n```json\n  \"stylelint.lintFiles.glob\": \"**/*.{css,scss}\"\n```\n\n#### `stylelint.reportDescriptionlessDisables`\n\n\u003e Type: `boolean`  \n\u003e Default: `false`\n\nSets the Stylelint [`reportDescriptionlessDisables`](https://stylelint.io/user-guide/options/#reportdescriptionlessdisables) option. If `true`, Stylelint reports `stylelint-disable` comments without a description.\n\n#### `stylelint.reportNeedlessDisables`\n\n\u003e Type: `boolean`  \n\u003e Default: `false`\n\nSets the Stylelint [`reportNeedlessDisables`](https://stylelint.io/user-guide/options/#reportneedlessdisables) option. If `true`, Stylelint reports errors for `stylelint-disable` comments that are not blocking a lint warning.\n\n#### `stylelint.reportInvalidScopeDisables`\n\n\u003e Type: `boolean`  \n\u003e Default: `false`\n\nSets the Stylelint [`reportInvalidScopeDisables`](https://stylelint.io/user-guide/options/#reportinvalidscopedisables) option. If `true`, Stylelint reports errors for `stylelint-disable` comments referring to rules that don't exist within the configuration object.\n\n## Stylelint Version Support\n\nWe support all Stylelint versions that work without active maintenance burden. We drop support when maintaining compatibility causes bugs, blocks features, or adds meaningful complexity. Versions not listed above as tested may still work but are not officially supported.\n\nWhen we do decide to drop support for a version, we will provide at least 3 months' notice with a deprecation warning before removal, giving users a predictable window to migrate.\n\n## Migrating\n\nSee the [migration guide](https://github.com/stylelint/vscode-stylelint/blob/main/MIGRATE.md) for instructions on how to migrate from older versions of the extension.\n\n## Troubleshooting\n\nvscode-stylelint writes logs to the VS Code output panel:\n\n![Screenshot of the Output window](https://user-images.githubusercontent.com/9868643/139115502-ff3daa37-1793-47da-9ef9-70c5706f018a.png)\n\nYou can enable more verbose log output by setting the [`logLevel`](#stylelintloglevel) extension setting or by running VS Code with the `NODE_ENV` environment variable set to `development`. You can do this on macOS and \\*nix by running:\n\n```sh\nNODE_ENV=development code\n```\n\nAnd on Windows by running:\n\n```batch\ncmd /C \"set NODE_ENV=development\u0026\u0026code\"\n```\n\n## Contributing\n\nContributions are welcome! Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file for details.\n\n## Licence\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstylelint%2Fvscode-stylelint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstylelint%2Fvscode-stylelint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstylelint%2Fvscode-stylelint/lists"}