stylelint-config-recommended-vue
The recommended shareable Vue config for Stylelint.
This config:
- extends the
stylelint-config-recommended
shared config and configures its rules for Vue - bundles the
postcss-html
custom syntax and configures it
RequirementsIt cannot be used with Stylelint v13 and below.
- Stylelint v14.0.0 and above
To see the rules that this config uses, please read the config itself.
:cd: Installation
npm install --save-dev postcss-html stylelint-config-recommended-vue
:book: Usage
Set yourstylelint
config to:{
"extends": "stylelint-config-recommended-vue"
}
Note: This config enables rules for only
.vue
files.If you don't want the rules to be overridden (If you want to enable only the parser.), please use stylelint-config-html.
{
"extends": "stylelint-config-html/vue"
}
Since this package configure
customSyntax
option to allow parsing Vue files, be sure it is the LAST item into the extends
array, in case more than one configuration is applied.
Not complying to this rule may result in broken Vue files parsing, generating confusing errors like Unknown word (CssSyntaxError)
.With SCSS
Installstylelint-config-recommended-scss
:npm install --save-dev stylelint-config-recommended-scss
Set your
stylelint
config to:{
"extends": "stylelint-config-recommended-vue/scss"
}
When used with
stylelint-config-standard-scss
:{
"extends": [
"stylelint-config-standard-scss",
"stylelint-config-recommended-vue/scss"
]
}
However, some stylistic rules may not work well with Vue. We recommend that you install stylelint-config-standard-vue instead.
Extending the config
Simply add a"rules"
key to your config, then add your overrides and additions there.For example, to add the
unit-allowed-list
rule:{
"extends": "stylelint-config-recommended-vue",
"overrides": [
{
"files": ["*.vue", "**/*.vue"],
"rules": {
"unit-allowed-list": ["em", "rem", "s"]
}
}
]
}
:computer: Editor integrations
Visual Studio Code
Use the stylelint.vscode-stylelint extension that Stylelint provides officially.You have to configure the
stylelint.validate
option of the extension to check .vue
files, because the extension does not check the *.vue
file by default.Example .vscode/settings.json:
{
"stylelint.validate": [
...,
// ↓ Add "vue" language.
"vue"
]