當多人團隊協作時，除了套用 ESLint 的規範來讓大家的 JavaScript 程式碼風格趨於一致外，關於 CSS / SCSS 這類的排版，就交給 StyleLint 來自動處理吧。
Stylelint 版本更動
由於 Stylelint 到第 14 版後，更動的幅度相當大，請詳閱此篇來修改。
如果你要執行下方的步驟，請確定你的版本是用 Stylelint 13 ，並搭配 VS Code 的 Stylelint 套件 0.X 的版本。
步驟
1. 先運用 npm 安裝相關的套件
|
1 2 3 4 5 |
// 基本套件 $ npm install --save-dev stylelint stylelint-config-standard // 若你要撰寫 SCSS，那要多安裝以下套件 npm install --save-dev stylelint-config-sass-guidelines |
2. 在專案根目錄建立 .stylelintrc.json
若你不想要某個規則的規範，那就在 rules 內新增該名稱的 key，其 value 為 null 即可
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
{ "extends": [ "stylelint-config-standard", "stylelint-config-sass-guidelines" ], "rules": { "selector-class-pattern":null, // class 名稱的規則，以 regex 來客製化 "max-nesting-depth":3, // 最大巢狀數，預設值為 1 "selector-max-id":2, // 一個選擇器中，最多能有幾個 ID "indentation":4, // 縮排 "order/properties-alphabetical-order": null, // 項目按照字母順序排序，跟 order/properties-order 的客製化規則須擇一 "order/properties-order": [ "position", "top", "right", "bottom", "left", "z-index", "display", "justify-content", "align-items", "float", "clear", "overflow", "overflow-x", "overflow-y", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "width", "min-width", "max-width", "height", "min-height", "max-height", "font-size", "font-family", "text-align", "text-justify", "text-indent", "text-overflow", "text-decoration", "white-space", "color", "background", "background-position", "background-repeat", "background-size", "background-color", "background-clip", "border", "border-style", "border-width", "border-color", "border-top-style", "border-top-width", "border-top-color", "border-right-style", "border-right-width", "border-right-color", "border-bottom-style", "border-bottom-width", "border-bottom-color", "border-left-style", "border-left-width", "border-left-color", "border-radius", "opacity", "filter", "list-style", "outline", "visibility", "box-shadow", "text-shadow", "resize", "transition" ] } } |
3. npm script 規則設定
|
1 2 3 4 5 6 |
{ "scripts": { "check-css": "stylelint **/*.{scss,css}", // 純顯示檢查結果，若沒問題則不會顯示任何訊息 "format-css":"stylelint **/*.{scss,css} --fix" // 除檢查外，還會視情況自動修正 }, } |
請注意，預設情況下，執行完 check-css, format-css 都不會在控制台看到任何錯誤訊息。若有的話，代表有無法自動修正的地方，需要人工處理 (像是顏色的色碼)
4. Setting.json (VS Code)
|
1 2 3 4 5 6 7 8 9 10 |
{ "css.validate": false, "less.validate": false, "scss.validate": false, "editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.stylelint": true }, "files.autoSaveDelay": 500, } |
Github 原始碼
https://github.com/andy922200/vue-vuetify-eslint-babel-stylelint-integration
相關文章
1. Support autofix on autoSave
2. How to lint SCSS with stylelint
3. Stylelint
4. Vue.js – 使用 StyleLint 來整理 CSS 吧！
