Registry /
testing / stylelint-config-recommended-vue
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Default Vue Configuration
✓ {
"extends": "stylelint-config-recommended-vue"
}
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.
SCSS Configuration for Vue
✓ {
"extends": "stylelint-config-recommended-vue/scss"
}
Use this configuration for linting SCSS within Vue SFCs. This variant requires `postcss-scss` to be installed as a dev dependency.
Extending with multiple configs (correct order)
✓ {
"extends": [
"stylelint-config-standard-scss",
"stylelint-config-recommended-vue/scss"
]
}
✗ {
"extends": [
"stylelint-config-recommended-vue/scss",
"stylelint-config-standard-scss"
]
}
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.
This quickstart sets up Stylelint with `stylelint-config-recommended-vue` for basic Vue SFC linting, including installation and a runnable script.
{
"name": "my-vue-project",
"version": "0.1.0",
"devDependencies": {
"postcss-html": "^1.0.0",
"stylelint": "^16.0.0",
"stylelint-config-recommended-vue": "^1.6.1"
},
"scripts": {
"lint:style": "stylelint \"**/*.{vue,css,scss}\"
}
}
// package.json
// .stylelintrc.json
{
"extends": "stylelint-config-recommended-vue"
}
// src/App.vue
<template>
<div class="container">
<p>Hello Vue Stylelint!</p>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
<style scoped>
.container {
color: #333;
font-size: 16px;
padding: 10px;
background-color: #f0f0f0;
}
p {
margin-bottom: 0;
}
</style>
# To run:
npm install
npm run lint:style
Debug
Known issues
breakingThis configuration requires Stylelint v14.0.0 or higher. It is incompatible with Stylelint v13 and below, which will lead to installation or runtime errors.fixEnsure 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.
affects: <1.0.0 || >=1.0.0 <1.6.0
gotchaWhen 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.fixConsider using `stylelint-config-standard-vue` instead of `stylelint-config-standard-scss` for a more harmonized stylistic configuration tailored for Vue.
affects: >=1.1.0
gotchaThe Stylelint VS Code extension (`stylelint.vscode-stylelint`) does not lint `.vue` files by default. You need to explicitly configure it to validate Vue files.fixAdd `"vue"` to the `stylelint.validate` array in your `.vscode/settings.json` file (e.g., `"stylelint.validate": ["css", "scss", "vue"]`).
affects: >=1.0.0
Errors
Common errors & fixes
Unknown word (CssSyntaxError)
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.
fixEnsure `"stylelint-config-recommended-vue"` (or its SCSS variant) is the **LAST** item in your `.stylelintrc.json` `extends` array.
Error: Cannot find module 'stylelint' or 'postcss-html'
Missing required peer dependencies. `stylelint-config-recommended-vue` relies on `stylelint` and `postcss-html` to function.
fixInstall the necessary peer dependencies: `npm install --save-dev stylelint postcss-html`.
Audit
Dependencies
stylelintrequiredCore linter engine; required peer dependency.
postcss-htmlrequiredCustom syntax parser for HTML-like files, essential for linting CSS within Vue Single-File Components.
postcss-scssoptionalRequired for linting SCSS syntax within Vue files when using the `/scss` configuration variant.
stylelint-config-recommended-scssoptionalProvides recommended rules for SCSS, often used alongside the `/scss` configuration variant.