[指南] 版本大更新 Stylelint 14 – 檢測並修正專案的 CSS 格式

Stylelint 在 2021 年的 10 月底迎來了重大版本升級,與其搭配的 Visual Studio Extension 套件 – Stylelint 也需要同步升級成 1.0 的以後版本。原先以為僅是簡單的升級而已,結果內容改動實在不少。這邊筆記一下相關的處理。
code programming


重大改動既注意事項

1. Stylelint 13 時是將 css, parse CSS ( 如 SCSS, SASS ), html 樣板內的 css ( 如 *.vue 中的 style ) 等編譯工具都包含在內。在 Stylelint 14 時,你需要個別安裝。
2. VS Code 中的 Stylelint 套件,需要更新成 1.0 以上版本,預設編譯僅包含 CSS, Less, 和 PostCSS
3. 在預設編譯的項目外,需要在 VS Code 中指定,否則存檔時不會觸發
4. 各種的衍生檢查模組、套件…等,需要檢查是否有符合 Stylelint 14 的版本,不然會噴出如 unknown rule <規則名稱> 的錯誤
5. 若與 Nuxt 整合,建議安裝 nuxt/postcss8 ,這樣可避免跳出  You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. 的問題
6. 承上,由於 nuxt/postcss8 是採用 autoprefixer 解析的緣故,alpha-value-notation 這條規則一定要是 number,否則會出錯

程式碼


參考資料

1. postcss@8 support for nuxt@2
2. stylelint – Getting started
3. Visual Studio – Stylelint
4. stylelint-config-recommended-vue
5. Allow to disable “You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.” warning #1375
6. Migrating to 14.0.0

按讚加入粉絲團

延伸閱讀