1.安裝依賴
npm install --save-dev stylelint stylelint-scss stylelint-config-standard stylelint-csstree-validator stylelint-config-prettier
2.安裝插件stylelint
3.在項目根目錄添加文件 .stylelintrc.js，並添加以下內容
{
"extends": ["stylelint-config-standard", "stylelint-config-prettier"],
"rules": {}
}
4.設置不需要檢測的文件，在項目根目錄添加文件.stylelintignore，並添加以下內容
# .stylelintignore
# 舊的不需打包的樣式庫
*.min.css
# 其他類型文件
*.js
*.jpg
*.woff
# 測試和打包目錄
/test/
/dist/
# 忽略的目錄
*element-variables.css
5.可能遇到的報錯
a.Unexpected unknown at-rule "@mixin" (at-rule-no-unknown)
添加rules規則
"rules": {
"at-rule-no-unknown":[true,{
"ignoreAtRules":["mixin"]
}]
}
b.Unexpected missing generic font family (font-family-no-missing-generic-family-keyword)
font-family后面添加sans-serif例如：
font-family: PingFangSC-Regular, PingFang SC, sans-serif;
c....no-descending-specificity
// 禁止低優先級的選擇器出現在高優先級的選擇器之后
"no-descending-specificity": null
d.Unexpected unknown pseudo-element selector "::v-deep" (selector-pseudo-element-no-unknown)
"selector-pseudo-element-no-unknown":null
具體配置：
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
rules: {
// 禁止使用未知規則
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['mixin', 'include']
}
],
// 禁止使用媒體功能名稱的供應商前綴
'media-feature-name-no-vendor-prefix': true,
// 禁止覆蓋較低特異性的選擇器，而不是覆蓋較高特異性的選擇器
'no-descending-specificity': null,
// 禁止使用未知的偽元素選擇器
'selector-pseudo-element-no-unknown': null,
// 禁止使用多余的分號
'no-extra-semicolons': true,
// 在功能的逗號后面需要一個空格
'function-comma-space-after': 'always',
// 在冒號聲明后必須有一個空格
'declaration-colon-space-after': 'always',
// 禁止重復的字體系列名稱
'font-family-no-duplicate-names': true,
// 禁止在calc函數內使用無效的表達式
'function-calc-no-invalid': true,
// 限制數字中允許的小數位數
'number-max-precision': 2,
// 指定時間值的最小毫秒數
'time-min-milliseconds': 1,
// 禁止在速記屬性中使用冗余值
'shorthand-property-no-redundant-values': true,
// 限制功能（自動修復）中相鄰空行的數量
'function-max-empty-lines': 0,
// 在字符串周圍指定單引號或雙引號
'string-quotes': 'single',
// 在冒號聲明后必須有一個空格
'declaration-colon-space-after': 'always',
// 在冒號聲明前不允許使用空格
'declaration-colon-space-before': 'never',
// 在聲明塊的分號后需要換行符或禁止空格
'declaration-block-semicolon-newline-after': 'always',
// 在聲明塊中要求或禁止尾部分號
'declaration-block-trailing-semicolon': 'always',
// 右大括號后需要換行符
'block-closing-brace-newline-after': 'always',
// 在規則前需要有空行
'rule-empty-line-before': 'always',
// 在規則之前要求有空行
'at-rule-empty-line-before': 'always',
// 指定縮進為兩個空格
indentation: 2
}
}
