[指南] Vue 結合 StyleLint 來統一你的 CSS 樣式

章節連結

當多人團隊協作時,除了套用 ESLint 的規範來讓大家的 JavaScript 程式碼風格趨於一致外,關於 CSS / SCSS 這類的排版,就交給 StyleLint 來自動處理吧。vue-integrated-eslint-to-format


步驟

1. 先運用 npm 安裝相關的套件

2. 在專案根目錄建立 .stylelintrc.json

若你不想要某個規則的規範,那就在 rules 內新增該名稱的 key,其 value 為 null 即可

3. npm script 規則設定

請注意,預設情況下,執行完 check-css, format-css 都不會在控制台看到任何錯誤訊息。若有的話,代表有無法自動修正的地方,需要人工處理 (像是顏色的色碼)

4. Setting.json (VS Code)


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 吧!

按讚加入粉絲團

延伸閱讀