03.ElementUI原始碼學習:程式碼風格檢查和格式化配置（ESlint ＆ Prettier）

Anduril發表於2021-04-17
UI原始碼EsLint

書接上文。在團隊協作中，為避免低階Bug、以及團隊協作時不同程式碼風格對彼此造成的困擾與影響，會預先制定編碼規範。使用 Lint工具和程式碼風格檢測工具，則可以輔助編碼規範執行，格式化程式碼，使樣式與規則保持一致，有效控制程式碼質量，實現專案程式碼風格統一。

在程式碼格式化方面， Prettier 和 ESLint 有重疊，但兩者側重點不同：ESLint 所能提供的格式化功能很有限；而 Prettier 在格式化程式碼方面具有更大優勢。而 Prettier 被設計為易於與 ESLint 整合，所以在專案中使用兩者，無需擔心衝突。。

0x00.Prettier 概覽

配置檔案

Prettier 支援幾種格式的配置檔案,優先順序順序如下：

  1. 在 package.json 裡建立一個 prettier 屬性，在那裡定義你的配置.
  2. 使用 .prettierrc，可以使 JSON 也可以是 YAML。
  3. 使用 .prettierrc.json, .prettierrc.yml, .prettierrc.yaml,.prettierrc.json5 去定義配置的結構.
  4. 使用 .prettierrc.js, .prettierrc.cjs, prettier.config.js, prettier.config.cjs 去定義配置的結構--必須使用 module.exports 暴露物件.
  5. 使用 .prettierrc.toml 去定義配置的結構.

.prettierignore

在根目錄下加一個.prettierignore檔案實現檔案級別的忽略(語法同.gitignore)。

⭐ autocrlf解決跨系統diff問題

Windows 使用回車（CR）和換行（LF）兩個字元來結束一行，而 macOS 和 Linux 只使用換行（LF）一個字元,會極大地擾亂跨平臺協作。

Unix/Mac使用者

carbon (2).png

Windows 使用者

carbon (3).png

0x01.ESlint 概覽

配置檔案

ESLint 支援幾種格式的配置檔案：

  • JavaScript - 使用 .eslintrc.js 然後輸出一個配置物件。
  • YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定義配置的結構。
  • JSON - 使用 .eslintrc.json 去定義配置的結構，ESLint 的 JSON 檔案允許 JavaScript 風格的註釋。
  • (棄用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
  • package.json - 在 package.json 裡建立一個 eslintConfig 屬性，在那裡定義你的配置。

如果同一個目錄下有多個配置檔案，ESLint 只會使用一個。優先順序順序如下：

  1. .eslintrc.js
  2. .eslintrc.yaml
  3. .eslintrc.yml
  4. .eslintrc.json
  5. .eslintrc
  6. package.json

配置檔案常用屬性 root env parserOptions parser extends plugins rules 等功能配置如下：

root 屬性

ESLint 會在所有父級目錄裡尋找配置檔案，一直到根目錄。一旦發現配置檔案中有 "root": true，它就會停止在父級目錄中尋找。

env 屬性

使用 env 關鍵字指定想啟用的環境，並設定它們為 true。環境並不是互斥的，所以可以同時定義多個。
更多可用的環境列表

parserOptions 屬性

解析器選項使用 parserOptions 屬性設定。可用的選項有：

  • ecmaVersion - 預設設定為 3，5（預設）， 你可以使用 6、7、8、9 或 10 來指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本號指定為 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10)
  • sourceType - 設定為 "script" (預設) 或 "module"（如果你的程式碼是 ECMAScript 模組)。
  • ecmaFeatures - 這是個物件，表示你想使用的額外的語言特性:
    • globalReturn - 允許在全域性作用域下使用 return 語句
    • impliedStrict - 啟用全域性 strict mode (如果 ecmaVersion 是 5 或更高)
    • jsx - 啟用 JSX
    • experimentalObjectRestSpread - 啟用實驗性的 object rest/spread properties 支援。(重要：這是一個實驗性的功能,在未來可能會有明顯改變。 建議你寫的規則 不要 依賴該功能，除非當它發生改變時你願意承擔維護成本。)

parser 屬性

在配置檔案中指定一個不同的解析器。在使用自定義解析器時，為了讓 ESLint 在處理非 ECMAScript 5 特性時正常工作，配置屬性 parserOptions 仍然是必須的。解析器會被傳入 parserOptions，但是不一定會使用它們來決定功能特性的開關。

extends 屬性

通過宣告擴充套件配置、啟用規則。

extends 的屬性值可以是：

  • 指定配置的字串(配置檔案的路徑、可共享配置的名稱、eslint:recommended 或 eslint:all)
  • 字串陣列：每個配置繼承它前面的配置

extends 屬性值可以使用短名稱，省略包名的字首 eslint-config- 。

carbon (5).png

值為 "eslint:recommended" 的 extends 屬性啟用一系列核心規則，在 規則頁面中被標記為✔️。
值為 "eslint:all" 的 extends 屬性啟用當前安裝的 ESLint 中所有的核心規則，不推薦在產品中使用。

plugins 屬性

外掛是一個 npm 包，通常輸出規則。一些外掛也可以輸出一個或多個命名的 配置(Configs) 。
plugins 屬性值可以使用短名稱，省略包名的字首 eslint-plugin- 。

carbon (6).png

外掛打包配置

外掛在 configs 鍵下指定打包的配置，且支援多配置。

carbon (4).png

示例外掛名為 eslint-plugin-myPlugin，那麼 myConfig 和 myOtherConfig 配置可以分別從 "plugin:myPlugin/myConfig" 和 "plugin:myPlugin/myOtherConfig" 擴充套件出來。

此時 extends 屬性值由以下組成：

plugin: + 包名 (省略了字首 myPlugin ) + / + 配置名稱 (myConfig)

carbon (7).png

⭐ 在預設情況下，配置不會啟用外掛中的任何規則。必須在 plugins 陣列中指定外掛名，extends 陣列中指定想使用的外掛中的規則。任何外掛中的規則必須帶有外掛名或其簡寫字首。

官方文件 Configs in Plugins

rules 屬性

rules 屬性啟用額外的規則、改變規則的級別和選項。
要改變一個規則設定，必須將規則 ID 設定為下列值之一：

  • "off" 或 0 - 關閉規則
  • "warn" 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程式退出)
  • "error" 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程式會退出)

.eslintignore

過在專案根目錄建立一個 .eslintignore 檔案告訴 ESLint 去忽略特定的檔案和目錄。.eslintignore 檔案是一個純文字檔案，其中的每一行都是一個 glob 模式表明哪些路徑應該忽略檢測。

0x02.專案配置

prettier 配置

在專案中安裝 prettier 。

carbon (8).png

在根目錄下建立 .prettierrc.js 配置檔案 。

carbon (11).png

在根目錄下建立 .prettierignore 檔案 。

carbon (12).png

執行指令，格式化整個專案。

carbon (13).png

成功執行後，輸出檔案列表，被格式化的檔名稱 白色高亮 。
微信截圖_20210416214937.png

eslint 配置

安裝 eslint和相關外掛 eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue，讓Prettier 和 ESLint更好的一起工作。

npm install --save-dev eslint

npm install --save-dev eslint-config-prettier eslint-plugin-prettier   

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

在根目錄下建立 .eslintrc.js 配置檔案 。

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', 'prettier'],
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'arrow-body-style': 'off',
    'prefer-arrow-callback': 'off',
  },
}

ℹ️ eslint-config-prettier 8.0.0 版本之後, 直接宣告 "prettier" 就可以使用所有的外掛。
8.0.0 更新日誌

https://github.com/prettier/eslint-config-prettier#special-rules
https://github.com/prettier/eslint-plugin-prettier#recommended-configuration

在根目錄下建立 .eslintignore 檔案 。

carbon (16).png

專案執行後，若檔案格式不符合規範，編輯器視窗有提示出現
微信截圖_20210417013312.png

游標移到問題行，會顯示問題型別，可以點選快速修復選項來修復問題。
微信截圖_20210417013429.png

最新目錄結構

carbon (18).png

0x03.示例程式碼

Github Repo

參考

ESLint配置：https://cn.eslint.org/docs/user-guide/configuring
Prettier配置：https://prettier.io/docs/en/configuration.html
Git自定義配置：https://git-scm.com/book/zh/v2/自定義-Git-配置-Git
Glob模式簡介: https://www.cnblogs.com/savorboard/p/glob.html

相關文章