03.ElementUI原始碼學習:程式碼風格檢查和格式化配置(ESlint & Prettier)

Anduril發表於2021-04-17

書接上文。在團隊協作中,為避免低階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:recommendedeslint: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,那麼 myConfigmyOtherConfig 配置可以分別從 "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

相關文章