更新了關(guān)于vue-cli3的相關(guān)配置
Stylelint簡(jiǎn)介
stylelint是一個(gè)基于 Javascript 的代碼審查工具参萄，它易于擴(kuò)展匿刮，支持最新的 CSS 語法焦履，也理解類似 CSS 的語法到推。此外床三，因?yàn)樗腔?JavaScript，所以比起 Ruby 開發(fā)的 scss-lint 速度更快月趟。
stylelint 是一個(gè)強(qiáng)大和現(xiàn)代的 CSS 審查工具灯蝴，有助于開發(fā)者推行統(tǒng)一的代碼規(guī)范，避免樣式錯(cuò)誤孝宗。
stylelint 由 PostCSS 提供技術(shù)支持穷躁，所以它也可以理解 PostCSS 解析的語法，比如 SCSS因妇。
PostCSS 是一個(gè)使用 JS 解析樣式的插件集合问潭，它可以用來審查 CSS 代碼，也可以增強(qiáng) CSS 的語法（比如變量和混合宏）婚被，還支持未來的 CSS 語法狡忙、行內(nèi)圖片等等。
PostCSS 的哲學(xué)是專注于處理一件事址芯，并做到極致灾茁，目前它已經(jīng)有了 200 多個(gè)插件，由于它們都是基于 JavaScript 編寫的谷炸，所以運(yùn)行速度非潮弊ǎ快。
Stylelint使用
1.安裝
npm install -g stylelint --save-dev
2.配置
1.本地安裝：
npm install stylelint-config-standard --save-dev
2.在項(xiàng)目中添加配置文件"stylelint.config.js"
module.exports = {
extends: ["stylelint-config-standard"]
}
3.添加或修改標(biāo)準(zhǔn)配置中的內(nèi)容
module.exports = {
extends: ["stylelint-config-standard"],
rules: {
"max-nesting-depth": 2 // 允許嵌套的深度為2
}
}
在Vue+Webpack下配置Stylelint
1.Webpack下配置
1.本地安裝stylelint-webpack-plugin：
npm install stylelint-webpack-plugin --save-dev
2.打開文件 build/webpack.base.conf.js旬陡，并在頂部添加加載插件代碼
var StyleLintPlugin = require('stylelint-webpack-plugin')
在plugins數(shù)組下添加以下代碼：
plugins: [
//...
new StyleLintPlugin({
// 正則匹配想要lint監(jiān)測(cè)的文件
files: ['src/**/*.vue', 'src/assets/styles/*.l?(e|c)ss']
}),
//...
],
更新：vue-cli3下配置
1.本地安裝@ascendancyy/vue-cli-plugin-stylelint：
#需添加新插件
npm install @ascendancyy/vue-cli-plugin-stylelint --save-dev
2.vue-cli3的vue.config.js需添加以下配置
pluginOptions: {
lintStyleOnBuild: true, // 添加了插件(@ascendancyy/vue-cli-plugin-stylelint), 所以需要配置
stylelint: {
fix: true, // boolean (default: true)
files: ['src/**/*.vue', 'src/assets/styles/*.l?(e|c)ss'] // string | [string] (default: ['src/**/*.{vue,htm,html,css,sss,less,scss}'])
// formatter: () => { } // function (default: require('stylelint-codeframe-formatter'))
// etc...
}
}
2.若在Vue文件下進(jìn)行stylelint校驗(yàn)拓颓，則需要：
1.本地安裝 stylelint-processor-html（若需要第3步校驗(yàn)css屬性順序，可忽略此插件）：
npm install stylelint-processor-html --save-dev
2.修改配置文件"stylelint.config.js"
module.exports = {
processors: ["stylelint-processor-html"],
extends: ["stylelint-config-standard"],
rules: {
}
}
這樣描孟，當(dāng)項(xiàng)目啟動(dòng)時(shí)驶睦，就會(huì)對(duì)vue文件下的css，或者目錄下的css文件進(jìn)行stylelint校驗(yàn)了
3.stylelint 搭配 stylelint-order画拾，可以校驗(yàn) CSS的屬性順序
1.安裝stylelint-order（校驗(yàn)排序） 啥繁、css-properties-sorting（自動(dòng)修復(fù)排序，若安裝此插件青抛，需刪除processors: ["stylelint-processor-html"]）
npm i --save-dev stylelint-order css-properties-sorting
2.在"stylelint.config.js"配置文件新增stylelint-order插件，通過"order/properties-order"定義順序
module.exports = {
extends: ["stylelint-config-standard", "css-properties-sorting"],
plugins: ["stylelint-order"], // stylelint-order是CSS屬性排序插件
rules: {
"order/properties-order"：[]
}
}
3.在項(xiàng)目下創(chuàng)建.stylelintignore文件酬核，指明忽略stylelint的文件或目錄
*.js
*.png
*.eot
*.ttf
*.woff
Stylelint 規(guī)則
根據(jù)自己項(xiàng)目規(guī)范蜜另，配置需要的規(guī)則。以下是在stylelint-config-standard基礎(chǔ)上嫡意，根據(jù)自身項(xiàng)目需求修改出的一些規(guī)則：
module.exports = {
extends: ["stylelint-config-standard", "css-properties-sorting"],
plugins: ["stylelint-order"], // stylelint-order是CSS屬性排序插件
rules: {
// "color-hex-case": "lower", // 顏色值為小寫字母(stylelint-config-standard)
// "color-no-invalid-hex": true, // 顏色值不能為無效值(stylelint-config-standard)
"font-family-name-quotes": "always-where-recommended", // 字體系列中命名時(shí)帶引號(hào)
"function-url-quotes": "always", // 地址一定要寫引號(hào)
"number-leading-zero": "never", // 要求或分?jǐn)?shù)低于1的數(shù)字禁止前導(dǎo)零
"number-no-trailing-zeros": true, // 禁止在數(shù)量尾隨零
"string-quotes": "double", // 指定字串举瑰，雙引號(hào)
"length-zero-no-unit": true, // 禁止單位零長(zhǎng)度。
"value-keyword-case": "lower", // 指定小寫關(guān)鍵字的值
"value-list-comma-newline-after": "always-multi-line",// 在值列表的逗號(hào)后指定一個(gè)換行符或禁止留有空格
"shorthand-property-no-redundant-values": true, // 不允許在簡(jiǎn)寫屬性冗余值
// "property-case": "lower", // 為屬性指定小寫(stylelint-config-standard)
"keyframe-declaration-no-important": true, // 不允許!important在關(guān)鍵幀聲明
// "block-closing-brace-empty-line-before": "never", // 不允許關(guān)閉括號(hào)前空一行(stylelint-config-standard)
// "block-closing-brace-newline-after": "always", // 需要一個(gè)換行符關(guān)閉括號(hào)后的空白(stylelint-config-standard)
// "block-opening-brace-newline-after": "always-multi-line", // 開括號(hào)的塊之后需要新的一行(stylelint-config-standard)
"selector-class-pattern": "^[a-z]+([a-z0-9]?|[a-z0-9\\-\\_]*[a-z0-9])$", // 指定一個(gè)模式類選擇符蔬螟，限制選擇器名稱寫法
"selector-id-pattern": "^[a-z]+([a-z0-9]?|[a-z0-9\\-\\_]*[a-z0-9])$", // 指定一個(gè)模式此迅，id選擇器，限制選擇器名稱寫法
"value-keyword-case": "lower", // 屬性值小寫
"no-empty-source": null, // 不允許空的來源
"at-rule-no-unknown": null, // 不允許at-rules不明
// "indentation": 2, // 指定縮進(jìn)(stylelint-config-standard)
"max-nesting-depth": 3, // 允許嵌套的深度為3
"no-duplicate-selectors": true, // 不允許重復(fù)的選擇器
// "no-eol-whitespace": true, // 不允許行尾空白(stylelint-config-standard)
// "no-invalid-double-slash-comments": true // 不允許雙斜杠注釋(/ /…)不支持CSS(stylelint-config-standard)
"order/order": [ // 指定聲明塊內(nèi)的內(nèi)容順序
["custom-properties", "declarations"], {
"disableFix": true
}
],
"order/properties-order": [ // 指定聲明塊內(nèi)屬性的字母順序
'position',
'top',
'right',
'bottom',
'left',
'z-index',
'display',
'float',
'width',
'height',
'max-width',
'max-height',
'min-width',
'min-height',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'margin-collapse',
'margin-top-collapse',
'margin-right-collapse',
'margin-bottom-collapse',
'margin-left-collapse',
'overflow',
'overflow-x',
'overflow-y',
'clip',
'clear',
'font',
'font-family',
'font-size',
'font-smoothing',
'osx-font-smoothing',
'font-style',
'font-weight',
'hyphens',
'src',
'line-height',
'letter-spacing',
'word-spacing',
'color',
'text-align',
'text-decoration',
'text-indent',
'text-overflow',
'text-rendering',
'text-size-adjust',
'text-shadow',
'text-transform',
'word-break',
'word-wrap',
'white-space',
'vertical-align',
'list-style',
'list-style-type',
'list-style-position',
'list-style-image',
'pointer-events',
'cursor',
'background',
'background-attachment',
'background-color',
'background-image',
'background-position',
'background-repeat',
'background-size',
'border',
'border-collapse',
'border-top',
'border-right',
'border-bottom',
'border-left',
'border-color',
'border-image',
'border-top-color',
'border-right-color',
'border-bottom-color',
'border-left-color',
'border-spacing',
'border-style',
'border-top-style',
'border-right-style',
'border-bottom-style',
'border-left-style',
'border-width',
'border-top-width',
'border-right-width',
'border-bottom-width',
'border-left-width',
'border-radius',
'border-top-right-radius',
'border-bottom-right-radius',
'border-bottom-left-radius',
'border-top-left-radius',
'border-radius-topright',
'border-radius-bottomright',
'border-radius-bottomleft',
'border-radius-topleft',
'content',
'quotes',
'outline',
'outline-offset',
'opacity',
'filter',
'visibility',
'size',
'zoom',
'transform',
'box-align',
'box-flex',
'box-orient',
'box-pack',
'box-shadow',
'box-sizing',
'table-layout',
'animation',
'animation-delay',
'animation-duration',
'animation-iteration-count',
'animation-name',
'animation-play-state',
'animation-timing-function',
'animation-fill-mode',
'transition',
'transition-delay',
'transition-duration',
'transition-property',
'transition-timing-function',
'background-clip',
'backface-visibility',
'resize',
'appearance',
'user-select',
'interpolation-mode',
'direction',
'marks',
'page',
'set-link-source',
'unicode-bidi',
'speak'
]
}
};
具體的規(guī)則以及例子可以查看以下文檔：
stylelint 的官方配置文檔 、Example config
CSS屬性順序
參考：
使用stylelint對(duì)CSS/Sass做代碼審查
A nice way to lint .vue files with Stylelint?
Linting CSS in Vue files
"declaration-block-properties-order" rule is not the same rule that stylelint uses.
更新補(bǔ)充vue-cli3：
vue-cli-plugin-stylelint插件 git地址
Support of style lint
vue單文件組件lint error自動(dòng)fix及styleLint報(bào)錯(cuò)自動(dòng)fix
