{"id":12095,"library":"stylelint-config-recommended-vue","title":"Stylelint Recommended Config for Vue","description":"This package provides the recommended shareable Stylelint configuration specifically tailored for Vue.js single-file components. It extends the `stylelint-config-recommended` base configuration and automatically integrates `postcss-html` to enable parsing of `<style>` blocks within `.vue` files. The current stable version is 1.6.1, with releases typically occurring to align with new Stylelint versions, address Vue-specific parsing edge cases, or incorporate updates from its base configurations. Its key differentiator is providing an opinionated, out-of-the-box setup that handles the complexities of linting CSS within Vue SFCs, including support for preprocessors like SCSS when combined with additional configurations.","status":"active","version":"1.6.1","language":"javascript","source_language":"en","source_url":"https://github.com/ota-meshi/stylelint-config-recommended-vue","tags":["javascript","stylelint","stylelint-config","recommended","vue"],"install":[{"cmd":"npm install stylelint-config-recommended-vue","lang":"bash","label":"npm"},{"cmd":"yarn add stylelint-config-recommended-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add stylelint-config-recommended-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core linter engine; required peer dependency.","package":"stylelint","optional":false},{"reason":"Custom syntax parser for HTML-like files, essential for linting CSS within Vue Single-File Components.","package":"postcss-html","optional":false},{"reason":"Required for linting SCSS syntax within Vue files when using the `/scss` configuration variant.","package":"postcss-scss","optional":true},{"reason":"Provides recommended rules for SCSS, often used alongside the `/scss` configuration variant.","package":"stylelint-config-recommended-scss","optional":true}],"imports":[{"note":"Apply this configuration in your `.stylelintrc.json` (or similar config file) to lint standard CSS in Vue Single-File Components. This automatically sets up `postcss-html` as the custom syntax.","symbol":"Default Vue Configuration","correct":"{\n    \"extends\": \"stylelint-config-recommended-vue\"\n}"},{"note":"Use this configuration for linting SCSS within Vue SFCs. This variant requires `postcss-scss` to be installed as a dev dependency.","symbol":"SCSS Configuration for Vue","correct":"{\n    \"extends\": \"stylelint-config-recommended-vue/scss\"\n}"},{"note":"When extending multiple configurations, `stylelint-config-recommended-vue` (or its `/scss` variant) **must be the last item** in the `extends` array. This ensures its `customSyntax` option for parsing Vue files is not overridden, preventing parsing errors.","wrong":"{\n    \"extends\": [\n        \"stylelint-config-recommended-vue/scss\",\n        \"stylelint-config-standard-scss\"\n    ]\n}","symbol":"Extending with multiple configs (correct order)","correct":"{\n    \"extends\": [\n        \"stylelint-config-standard-scss\",\n        \"stylelint-config-recommended-vue/scss\"\n    ]\n}"}],"quickstart":{"code":"{\n  \"name\": \"my-vue-project\",\n  \"version\": \"0.1.0\",\n  \"devDependencies\": {\n    \"postcss-html\": \"^1.0.0\",\n    \"stylelint\": \"^16.0.0\",\n    \"stylelint-config-recommended-vue\": \"^1.6.1\"\n  },\n  \"scripts\": {\n    \"lint:style\": \"stylelint \\\"**/*.{vue,css,scss}\\\"\n  }\n}\n// package.json\n\n// .stylelintrc.json\n{\n  \"extends\": \"stylelint-config-recommended-vue\"\n}\n\n// src/App.vue\n<template>\n  <div class=\"container\">\n    <p>Hello Vue Stylelint!</p>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App'\n};\n</script>\n\n<style scoped>\n.container {\n  color: #333;\n  font-size: 16px;\n  padding: 10px;\n  background-color: #f0f0f0;\n}\np {\n  margin-bottom: 0;\n}\n</style>\n\n# To run:\nnpm install\nnpm run lint:style","lang":"json","description":"This quickstart sets up Stylelint with `stylelint-config-recommended-vue` for basic Vue SFC linting, including installation and a runnable script."},"warnings":[{"fix":"Ensure your project's `stylelint` peer dependency is `^14.0.0` or higher. Update your `stylelint` package to the latest major version if it's below v14.","message":"This configuration requires Stylelint v14.0.0 or higher. It is incompatible with Stylelint v13 and below, which will lead to installation or runtime errors.","severity":"breaking","affected_versions":"<1.0.0 || >=1.0.0 <1.6.0"},{"fix":"Consider using `stylelint-config-standard-vue` instead of `stylelint-config-standard-scss` for a more harmonized stylistic configuration tailored for Vue.","message":"When combining `stylelint-config-recommended-vue/scss` with `stylelint-config-standard-scss`, some stylistic rules from `stylelint-config-standard-scss` might not behave as expected or conflict with Vue's context.","severity":"gotcha","affected_versions":">=1.1.0"},{"fix":"Add `\"vue\"` to the `stylelint.validate` array in your `.vscode/settings.json` file (e.g., `\"stylelint.validate\": [\"css\", \"scss\", \"vue\"]`).","message":"The Stylelint VS Code extension (`stylelint.vscode-stylelint`) does not lint `.vue` files by default. You need to explicitly configure it to validate Vue files.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `\"stylelint-config-recommended-vue\"` (or its SCSS variant) is the **LAST** item in your `.stylelintrc.json` `extends` array.","cause":"This error typically occurs when the `customSyntax` option is not correctly applied, often because `stylelint-config-recommended-vue` is not the last configuration in the `extends` array, causing it to be overridden.","error":"Unknown word (CssSyntaxError)"},{"fix":"Install the necessary peer dependencies: `npm install --save-dev stylelint postcss-html`.","cause":"Missing required peer dependencies. `stylelint-config-recommended-vue` relies on `stylelint` and `postcss-html` to function.","error":"Error: Cannot find module 'stylelint' or 'postcss-html'"}],"ecosystem":"npm"}