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

2021 年 4 月 17 日
筆記
element

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

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

0x00.Prettier 概覽

配置文件

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

在 package.json 里創建一個 prettier 屬性，在那裡定義你的配置.
使用 .prettierrc，可以使 JSON 也可以是 YAML。
使用 .prettierrc.json, .prettierrc.yml, .prettierrc.yaml,.prettierrc.json5 去定義配置的結構.
使用 .prettierrc.js, .prettierrc.cjs, prettier.config.js, prettier.config.cjs 去定義配置的結構–必須使用 module.exports 暴露對象.
使用 .prettierrc.toml 去定義配置的結構.

.prettierignore

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

autocrlf解決跨系統diff問題

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

Unix/Mac用戶

Windows 用戶

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 只會使用一個。優先順序順序如下：

.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
~~.eslintrc~~
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- 。

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

plugins 屬性

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

插件打包配置

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

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

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

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

在默認情況下，配置不會啟用插件中的任何規則。必須在 plugins 數組中指定插件名，extends 數組中指定想使用的插件中的規則。任何插件中的規則必須帶有插件名或其簡寫前綴。

官方文檔 Configs in Plugins

rules 屬性

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

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

.eslintignore

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

0x02.項目配置

prettier 配置

在項目中安裝 prettier 。

在根目錄下創建 .prettierrc.js 配置文件。

在根目錄下創建 .prettierignore 文件。

執行指令，格式化整個項目。

成功執行後，輸出文件列表，被格式化的文件名稱 白色高亮 。

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 更新日誌

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

在根目錄下創建 .eslintignore 文件。

項目運行後，若文件格式不符合規範，編輯器窗口有提示出現

游標移到問題行，會顯示問題類型，可以點擊快速修復選項來修復問題。

0x03.示例程式碼

Github Repo

參考

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

Tags: element

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

0x00.Prettier 概覽

配置文件

.prettierignore

autocrlf解決跨系統diff問題

0x01.ESlint 概覽