MonkeyBinBin

被程式設計的猴子

July 1, 2020 Nuxt.js

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

無論是一人開發或是多人協作，寫出來的程式碼可能會有一些差異。為了讓程式碼比較好維護、閱讀，可以利用 ESLint 與 stylelint 這兩個工具來幫助我們保持良好的 Coding Style。本篇主旨是要說明在 Nuxt.js 專案中使用的方式、設定與筆者選用的規則。

安裝 Visual Studio Code 擴充套件

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

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

ESLint 安裝設定

目前專案選用規則

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 安裝設定

目前專案選用規則

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 的設定。

參考資料

Nuxt.js - ESLint and Prettier
ESLint
JavaScript Standard Style
eslint-plugin-vue
eslint-config-standard
stylelint
stylelint-config-standard
stylelint-config-prettier
stylelint-config-sass-guidelines
stylelint-order
stylelint-scss

Nuxt 系列 - #6 整合 CMS 服務 contentful