eslint 與 prettier 實現代碼規範自動格式化

本文僅是技術驗證，記錄，交流，不針對任何人。有冒犯的地方，請諒解。 該文首發於https://vsnail.cn/static/doc/blog/eslintPrettier.html

其實很早以前就想在工程中使用 eslint 和 prettier 來規範代碼。但是 eslint 和 prettier 的相愛相殺，再加上框架（vue,react）的特有寫法（jsx，template）等等老是讓本身開發過程很痛苦，很懵逼，不知所措。因此每次都啓用 esint，而後又禁用，又啓用，又禁用，如此反覆，周而復始。 前段時間看前端工程化相關的資料，發現其實工程代碼格式規範是其中重要的環節之一。顧而，藉着週末好好捋一捋 eslint 和 prettier，來達到開發的高效和規範。

在代碼規範的道路上，咱們終極目標是：

團隊中的全部開發人員用一套代碼規範規則，而且無需咱們花太大的精力去爲了格式而格式。但願有一套自動化工具，幫咱們檢測代碼是否規範，若是不規範，則自動可以幫咱們按照既定規範格式化。

經過對 eslint 和 prettier 的大體瞭解，其實能夠發現，prettier 是用於格式化代碼的。而代碼規範規則的設置和代碼上的 warn，error 等提醒，則是 eslint 來實現的。故而，咱們的大目標應該是 eslint，而後把 prettier 集成進來。

ESLint

ESLint 是一個開源的 JavaScript 代碼檢查工具，由 Nicholas C. Zakas 於 2013 年 6 月建立。代碼檢查是一種靜態的分析，經常使用於尋找有問題的模式或者代碼，而且不依賴於具體的編碼風格。對大多數編程語言來講都會有代碼檢查，通常來講編譯程序會內置檢查工具。

ESLint 的全部規則都被設計成可插入的。ESLint 的默認規則與其餘的插件並無什麼區別，規則自己和測試能夠依賴於一樣的模式。 所以可配置、插件式是 ESLint 的最大特色，也是咱們熱衷使用它的緣由。

如何配置

配置 ESLint 有兩種方式：

• 使用 JavaScript 註釋把配置信息直接嵌入到一個代碼源文件中
• 配置文件式

這兩種方式中，「配置文件」是最多見的配置方式。使用 JavaScript、JSON或者 YAML 文件爲整個目錄（處理你的主目錄）和它的子目錄指定配置信息。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

因爲 js 裏面能夠很方便的書寫邏輯，而且它的優先級又比較高，故而建議使用 js 文件來看成配置文件。

這些配置啥意思

可配置是 ESLint 的特色之一。也就意味着咱們必須瞭解每一個配置項什麼意思，才能玩轉 ESLint。所以接下來咱們來看看經常使用配置項是什麼意思。

Parser

ESLint 默認使用 Espree 做爲其解析器，你能夠在配置文件中指定一個不一樣的解析器.

如下解析器與 ESLint 兼容：

• Esprima
• Babel-ESLint - 一個對 Babel 解析器的包裝，使其可以與 ESLint 兼容。
• typescript-eslint-parser(實驗) - 一個把 TypeScript 轉換爲 ESTree 兼容格式的解析器，這樣它就能夠在 ESLint 中使用了。這樣作的目的是經過 ESLint 來解析 TypeScript 文件（儘管不必定必須經過全部的 ESLint 規則）。 注意，在使用自定義解析器時，爲了讓 ESLint 在處理非 ECMAScript 5 特性時正常工做，配置屬性 parserOptions 仍然是必須的。解析器會被傳入 parserOptions，可是不必定會使用它們來決定功能特性的開關。

parserOptions

這個屬性經常使用於設置語法解析器的一些配置。可用的選項有：

• 1. ecmaVersion: 制定 ECMAScript 的版本。

默認設置爲 3，5（默認）， 你可使用 六、七、8 或 9 來指定你想要使用的 ECMAScript 版本。你也能夠用使用年份命名的版本號指定爲 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）

• 2. sourceType: 源碼類型

設置爲 "script" (默認) 或 "module"（若是你的代碼是 ECMAScript 模塊)。

• 3. ecmaFeatures： 這是個對象，表示你想使用的額外的語言特性:

• 3.1 globalReturn - 容許在全局做用域下使用 return 語句

• 3.2 impliedStrict - 啓用全局 strict mode (若是 ecmaVersion 是 5 或更高)

• 3.3 jsx - 啓用 JSX

• 3.4 experimentalObjectRestSpread - 啓用實驗性的 object rest/spread properties 支持。(重要：這是一個實驗性的功能,在將來可能會有明顯改變。 建議你寫的規則 不要 依賴該功能，除非當它發生改變時你願意承擔維護成本。)

設置解析器選項能幫助 ESLint 肯定什麼是解析錯誤，全部語言選項默認都是 false

Environments

該配置屬性定義來一組預約義的全局變量。可用的環境包括：

• browser - 瀏覽器環境中的全局變量。
• node - Node.js 全局變量和 Node.js 做用域。
• commonjs - CommonJS 全局變量和 CommonJS 做用域 (用於 Browserify/WebPack 打包的只在瀏覽器中運行的代碼)。
• shared-node-browser - Node.js 和 Browser 通用全局變量。
• es6 - 啓用除了 modules 之外的全部 ECMAScript 6 特性（該選項會自動設置 ecmaVersion 解析器選項爲 6）。
• worker - Web Workers 全局變量。
• amd - 將 require() 和 define() 定義爲像 amd 同樣的全局變量。
• mocha - 添加全部的 Mocha 測試全局變量。
• jasmine - 添加全部的 Jasmine 版本 1.3 和 2.0 的測試全局變量。
• jest - Jest 全局變量。
• phantomjs - PhantomJS 全局變量。
• protractor - Protractor 全局變量。
• qunit - QUnit 全局變量。
• jquery - jQuery 全局變量。
• prototypejs - Prototype.js 全局變量。
• shelljs - ShellJS 全局變量。
• meteor - Meteor 全局變量。
• mongo - MongoDB 全局變量。
• applescript - AppleScript 全局變量。
• nashorn - Java 8 Nashorn 全局變量。
• serviceworker - Service Worker 全局變量。
• atomtest - Atom 測試全局變量。
• embertest - Ember 測試全局變量。
• webextensions - WebExtensions 全局變量。
• greasemonkey - GreaseMonkey 全局變量。 這些環境並非互斥的，因此你能夠同時定義多個。

Globals

咱們使用第三方提供的全局變量的時候（例如：jQuery,AMap 等對象），ESLint 並不能識別他們，老是會報錯。這個時候，該配置的做用就出現了。使用 globals 指出你要使用的全局變量。將變量設置爲 true 將容許變量被重寫，或 false 將不容許被重寫。

Plugins

ESLint 支持使用第三方插件。在使用插件以前，你必須使用包管理工具安裝它。 在配置文件裏配置插件時，可使用 plugins 關鍵字來存放插件名字的列表。插件名稱能夠省略 eslint-plugin- 前綴。

Rules

ESLint 附帶有大量的規則。你可使用註釋或配置文件修改你項目中要使用的規則。要改變一個規則設置，你必須將規則 ID 設置爲off、warn、error三者之一。

繼承配置文件

基本要用的配置屬性在上面都已經涉及到了。可是咱們以前講過 ESLint 不只有可配性，還有插件的可插拔性。那麼插件又是如何工做的呢？插件無外乎是加強某些功能，而且對外提供接口。在 ESLint 中，插件通常都是經過繼承的方式，來實現對外提供特定功能。

extends

一個配置文件能夠從基礎配置中繼承已啓用的規則。

extends 屬性值能夠是：

(1)、在配置中指定的一個字符串

(2)、字符串數組：每一個配置繼承它前面的配置

ESLint 遞歸地進行擴展配置，因此一個基礎的配置也能夠有一個 extends 屬性。

extends 裏面能夠引入 共享配置包，能夠引入 插件

• 共享配置包

可共享的配置 是一個 npm 包，它輸出一個配置對象。

extends 屬性值能夠省略包名的前綴 eslint-config-。

• 插件

插件 是一個 npm 包，一般輸出規則。一些插件也能夠輸出一個或多個命名的 配置。

plugins 屬性值 能夠省略包名的前綴 eslint-plugin-。

extends 屬性值能夠由如下組成：

（1）、plugin: （2）、包名 (省略了前綴，好比，react) （3）、/ （4）、配置名稱 (好比 recommended)

Prettier

Prettier 是一個代碼格式化工具。可以按照咱們的規則，將咱們的代碼格式化。

爲何咱們用它，而不用其餘的代碼格式化工具呢？Prettier 主要有如下優勢：

• 可配置化
• 支持多種語言
• 集成多數的編輯器
• 簡潔的配置項

ESLint + Prettier

團隊中的全部開發人員用一套代碼規範規則，而且無需咱們花太大的精力去爲了格式而格式。但願有一套自動化工具，幫咱們檢測代碼是否規範，若是不規範，則自動可以幫咱們按照既定規範格式化。------咱們的終極目標

經過上面的瞭解，要想達到咱們的終極目標彷佛就是將這兩個一塊兒使用便可。那麼如何整合他們呢？

以vue工程爲例：

第一步： 下載相關包

最基本的，咱們確定要下載eslint，prettier這兩個包的。

其次，爲了將其整合起來那麼咱們須要已寫好的「共享配置包」和插件。所以咱們須要下載eslint-plugin-prettier,eslint-config-prettier。

再次，咱們須要站在巨人的肩膀上看世界。也就是咱們須要業界一些比較成熟的規範，來規範咱們的代碼。所以咱們可使用大團隊提供的代碼規範插件。比較有名的就是airbnb。這裏咱們選用的是airbnb-base。故而咱們須要下載eslint-config-airbnb-base。

最後，爲了完美使用咱們 ES6 的一些新特性。咱們須要將「詞法解析器」設置爲babel-eslint。所以咱們還須要下載babel-eslint.

對了，咱們是vue工程，那麼確定要有對 vue 配置的插件，所以咱們須要下載eslint-plugin-vue

總結可得，咱們須要下載如下包

npm install esint prettier eslint-plugin-prettier eslint-config-prettier eslint-config-airbnb-base babel-eslint eslint-plugin-vue

複製代碼

第二步 創建配置文件

若是仔細閱讀了以前eslint的配置項，那麼這一步是比較機械化的。所以我直接將工程中的配置文件拷貝過來，加以註釋吧。

在工程的根目錄，建立一個.eslintrc.js文件，文件內容以下：

module.exports = {
  env: {
    browser: true,
    jquery: true, //因爲項目中使用來jquery。。。其實不用引入jquery的，之後有機會去掉jquery後，請移除該配置。
  },
  parserOptions: {
    parser: 'babel-eslint', //詞法解析器使用babel-eslint，以更好的適配es6的新api
    ecmaVersion: 6, //啓用 ES6 語法支持;默認設置爲3，5（默認）， 你可使用 六、七、8 或 9 來指定你想要使用的 ECMAScript 版本。你也能夠用使用年份命名的版本號指定爲 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）
    sourceType: 'module', //設置爲 "script" (默認) 或 "module"（若是你的代碼是 ECMAScript 模塊)。
  },
  extends: [
    'airbnb-base',
    'eslint:recommended',
    'plugin:vue/essential',
    'plugin:prettier/recommended',
  ],
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'generator-star-spacing': 'off',
    'import/no-named-as-default': 'off',
    'import/no-named-as-default-member': 'off',
    'no-unused-vars': [
      'error',
      { vars: 'all', args: 'none', ignoreRestSiblings: false },
    ], //沒有使用的參數，不會報錯。由於我的覺的把可用的參數寫上去 有利於之後的維護。
  },
};


複製代碼

開發工具

其實到上一步的話，已經將ESlint和Prettier配置完了。可是要可以自動格式化，那麼咱們還須要作一些集成。

實現自動格式化這一目標，能夠在開發工具上作文章，也能夠在webpack上作文章。其實我比較傾向在開發工具上實現自動格式化，由於這樣子彷佛比較快。

在開發工具中，咱們但願在修改代碼保存後，可以自動格式化代碼。如何實現這一目標呢？咱們以VScode爲例

• 1. 打開VScode的配置文件

• 2. 增長如下配置.

...

"prettier.eslintIntegration": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true,
  //配置 ESLint 檢查的文件類型
  "eslint.validate": ["javascript", "javascriptreact", "vue", "html"],
  "eslint.options": {
    "configFile": "./`.eslintrc`.js"
  },

...


複製代碼

webpack

除了能夠在開發工具上作文章，也能夠在打包編譯工具上作文章，以實現自動格式化的目標。咱們以webpack爲例：

由於vue工程一般會用官方提供的腳手架，因此這裏我直接上圖了，就不BB了。（實際上是時間太晚了，明天還要上班，老婆已經再催了）

後記

其實咱們在代碼規範方面，利用eslint還能夠作不少不少事情。

好比，咱們能夠增長一個腳本，來檢測代碼是否規範。

咱們也能夠在git提交前，作一次自動檢測，避免團隊中提交不規範的代碼。能夠借閱code review的一部分精力，能夠把code review的重點放在代碼邏輯自己的合理性上。

好吧，晚安～