Nuxt.js

Nuxt 系列 - #7 啟用 ESLint 跟 stylelint 保持良好的 Coding Style

廖汶彬 2020/07/03 18:55:35

1 3483

安裝 Visual Studio Code 擴充套件

ESLint - 整合 ESLint 到 VS Code，在開發過程中會馬上顯示不符合規範的 javascript 程式碼，並且提供自動修正程式碼功能。
stylelint - 整合 stylelint 到 VS Code，在開發過程中會馬上顯示不符合規範的 CSS/SCSS/Less 程式碼，並且提供自動修正程式碼功能。

以上兩個擴充套件在前端專案都是必備的工具，工具非常有彈性可視需要自行調整規範。前端專案都應該要使用這兩個工具來規範程式碼風格，並依照自已團隊的需要調整制定自已的規範。

ESLint 安裝設定

目前專案選用規則

ESLint 推薦規則 - https://eslint.org/docs/rules/ ，網頁內清單前方有打勾的項目
Vue.js 官方推薦規則 - https://eslint.vuejs.org/rules/ ，網頁內 Priority C: Recommended for Vue.js 2.x 還有 Uncategorized 的項目
JavaScript Standard Style 規則 - https://standardjs.com/rules.html

Step 1：安裝 ESLint 與 webpack loader 套件

npm install --save-dev babel-eslint eslint eslint-loader

Step 2：安裝 Vue.js 官方制定的檢查規則套件

npm install --save-dev eslint-plugin-vue

Step 3：安裝 Javascript Standard Style 檢查規則套件

npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

步驟1~3可以一次安裝，分開寫是為了更清楚了解安裝套件的用途為何

Step 4：於專案根目錄建立 ESLint 設定檔 .eslintrc.js，設定內容如下

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
    'standard'
  ],
  plugins: [
    'vue'
  ],
  rules: {},
  globals: {
    $: 'readonly',
    moment: 'readonly'
  }
}

extends 設定啟用檢查的規則，可使用共享配置的套件或 plugins 的設定。共享配置的套件名稱的前綴會是 eslint-config-，設定時可以省略前綴。plugins 設定則為 plugin:套件名稱去掉前綴/規則組合(例如：plugin:vue/recommended)。

plugins 設定要使用的 plugins 套件，一般套件名稱的前綴會是 eslint-plugins-，設定時可以省略前綴進行設定，此處的 vue 指的就是第二步驟安裝的 eslint-plugins-vue

rules 已啟用的規則需要調整的話可以在這邊增加設定，這裡的設定會覆蓋原設定

globals 用來設定全域載入的套件。由於在 nuxt.config.js 有設定 webpack.ProvidePlugin 載入 jquery 跟 moment 因此在所有程式碼都可直接使用 $ 與 moment 不需另外 import

stylelint 安裝設定

目前專案選用規則

stylelint 預設規則 - https://stylelint.io/user-guide/rules/about
搭配 stylelint 規則使用的 scss 規則 - https://github.com/kristerkari/stylelint-scss#readme
stylelint-config-standard 規則 - https://github.com/stylelint/stylelint-config-standard
stylelint-config-prettier - https://github.com/prettier/stylelint-config-prettier#readme ，排除與 prettier 衝突的規則(prettier 為用來排版的 vs code 擴充套件)
Sass Guidelines - https://sass-guidelin.es/
樣式屬性依首字字母排序(a 到 z) - https://github.com/hudochenkov/stylelint-order#readme

Step 1：安裝 stylelint 與 scss 規則套件

npm install --save-dev stylelint stylelint-scss

Step 2：安裝 stylelint-config-standard 規則套件

npm install --save-dev stylelint-config-standard

Step 3：安裝排除與 prettier 衝突的規則套件

npm install --save-dev stylelint-config-prettier

Step 4：安裝樣式屬性依首字字母排序(a 到 z)套件

npm install --save-dev stylelint-order

Step 5：於專案根目錄建立 stylelint 設定檔 .stylelintrc.json，設定內容如下

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier",
    "stylelint-config-sass-guidelines"
  ],
  "plugins": ["stylelint-scss", "stylelint-order"],
  "rules": {
    "max-nesting-depth": 3
  },
  "ignoreFiles": [
    "./node_modules/**/*.{css,scss,sass}",
    "./dist/**/*.{css,scss,sass}"
  ]
}

extends 設定啟用檢查的規則，可使用共享配置的套件

plugins 增加 stylelint 規則的套件

rules 已啟用的規則需要調整的話可以在這邊增加設定，這裡的設定會覆蓋原設定

ignoreFiles 排除要檢查的檔案，目前排除的是 npm 安裝的套件與 webpack 打包後產出的資料夾

Visual Studio Code 設定

工作區設定(/.vscode/settings.json) - 啟用儲存檔案時，自動修正 eslint 與 stylelint 問題

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}

增加 lint 指令

開啟 package.json 檔案，在 scripts 內增加以下設定

{
  "scripts": {
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lintfix:js": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
    "lint:css": "npx stylelint '**/*.{css,scss,sass,vue}'",
    "lintfix:css": "npx stylelint '**/*.{css,scss,sass,vue}' --fix"
  }
}

使用指令執行 eslint 檢查

npm run lint:js

使用指令執行 eslint 檢查，並修復可自動修復問題

npm run lintfix:js

使用指令執行 stylelint 檢查

npm run lint:css

使用指令執行 stylelint 檢查，並修復可自動修復問題

npm run lintfix:css

注意事項：要使用 stylelint 指令需要將 nodejs 版本必需為 10.13 以上(含10.13)版本，因為目前的 stylelint 版本只支援 nodejs 10.13 以上，但這不影響 vs code 擴充套件 stylelint 檢查的結果。在較低版本的 nodejs 還是可以使用 vs code 擴充套件 stylelint 來檢查，只是規則的來源是 .stylelintrc.json 的設定。