本篇文章同步更新於個人部落格,歡迎交流指教~謝謝您的閱讀
前一天介紹了 Nuxt3 搭配 ESLint JavaScript 程式碼檢查工具:文章連結,本篇將說明在 Nuxt3 專案搭配 Stylelint 工具。
Stylelint 是一套用於規範 CSS 和 CSS 預處理器(SCSS、Less 等)程式碼的工具,幫助我們維持程式碼的品質和風格。Stylelint 進行檢查時,會根據指定的規則來發現潛在的錯誤、不一致的風格和不推薦的模式。
以 *.vue
檔為例,檔案內包含三種主要的程式碼:<template>
、<script>
和 <style>
:
<template>
:Vue.js 模板語法,用以定義 HTML,例如插槽 {{ }}
、條件判斷和迴圈等。雖然這不是嚴格的 JavaScript 語法,但 ESLint 也提供了相關規則對模板語法進行檢查<script>
:JavaScript 區塊,由 ESLint 進行程式碼檢查<style>
:CSS 區塊,用於定義元件樣式,由 Stylelint 進行程式碼檢查ESLint 搭配 Stylelint,讓專案保持良好的 Coding Style。接下來一起進行實作吧!
整合套件
@nuxtjs/stylelint-module
提供了在 Nuxt 使用 Stylelint 的整合模組,但並未包含 Stylelint、相關配置以及 PostCSS 相關套件,需手動安裝相依套件
相依套件
<style>
區塊的 CSSstylelint-config-standard
的擴充,用於檢查 SCSS 程式碼npm install -D @nuxtjs/stylelint-module \
stylelint \
stylelint-config-standard-vue \
stylelint-config-standard-scss \
stylelint-order \
postcss postcss-scss postcss-html
stylelint 配置選項參考 官方文件
// nuxt.config.js
export default defineNuxtConfig({
modules: [
// ...
'@nuxtjs/stylelint-module'
],
stylelint: {
lintOnStart: false, // 專案啟動時不自動檢查所有相關檔案
chokidar: true // 監聽文件異動進行檢核(文件未列出此選項)
}
})
目錄新增 .stylelintrc.js
,配置如下:
rules
定義的全域規則// .stylelintrc.js
module.exports = {
extends: [
'stylelint-config-standard-scss',
'stylelint-config-standard-vue/scss'
],
plugins: [
'stylelint-order'
],
overrides: [
{
files: [ '*.scss', '**/*.scss' ], // 指定 .scss 檔
rules: {
'scss/no-global-function-names': null // 關閉此規則
}
}
],
rules: {
// ...
'unit-allowed-list': [ 'em', 'rem', 'deg', 'px' ], // 可使用的單位
'order/properties-order': [ // 設定排序順序(plugins 必須先定義 stylelint-order)
'position',
'top',
'bottom',
'right',
'left',
'display',
'align-items',
'justify-content',
'float',
'clear',
'overflow',
'overflow-x',
'overflow-y',
'margin',
'margin-top',
'margin-right',
'margin-bogttom',
'margin-left',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'width',
'min-width',
'max-width',
'height',
'min-height',
'max-height',
'font-size',
'font-family',
'font-weight',
'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',
'z-index',
'box-shadow',
'text-shadow',
'resize',
'transition'
]
}
}
首先需在 VSCode 安裝擴充:Stylelint
在專案根目錄新增 .vscode/settings.json
|—— .vscode/
|—— settings.json
|—— my-app/
|—— .nuxt/
|—— .stylelintrc.js
|—— app.vue
|—— ...
接著配置如下:
{
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.stylelint": true
},
"stylelint.validate": [ "css", "scss", "vue" ]
}
設定完成後,需要重啟專案才能成功運作,接著在儲存檔案時,Stylelint 就會協助我們自動排版囉!
參考資源:
https://github.com/ota-meshi/stylelint-config-standard-vue
https://github.com/nuxt-modules/stylelint
https://ithelp.ithome.com.tw/articles/10297223?sc=pt#=
https://paper-hsiao.medium.com/stylelint-幫助你整理-css-的好幫手-b708adab430e