VSCode 使用 ESLint + Prettier 來統一 JS 代碼

環境：

VSCode 1.33.1

Node.js 8.9.1

1、ESLint

---

一、介紹

ESLint是最流行的JavaScript Linter。

Linter 是檢查代碼風格/錯誤的小工具。其餘相似的 Linter 工具還有：TSLint、stylelint。

它包含三個功能：

（1）check syntax

（2）find problems

前兩個能夠統稱爲 Code-quality rules，例如 no-unused-vars 規則。

（3）enforce code style

最後一個能夠稱爲 Formatting rules ，例如 keyword-spacing 規則。

下面介紹的 Prettier 就只有這一個 Formatting rules 功能。

二、安裝

npm install -g eslint

建議全局安裝。

三、使用

(1) 生成配置文件

下面的命令，能夠在項目的根目錄建立.eslintrc.js配置文件。

eslint --init

按照交互提示，依次選擇進行：

(2) 校驗文件

eslint yourfile.js
# 命令行會返回出現 problems 的數量和相應行數。


eslint --fix yourfile.js
# 直接修改文件

(3) 修改配置文件

一個簡單的.eslintrc.js文件：

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",    
    // extends: 'airbnb-base', 上一行爲不要代碼格式化功能，這一行爲代碼格式化選擇 airbnb 的格式規範。
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018
    },
    "rules": {
        "no-console": "off",
        // 這裏能夠設置規則：
        //"off" or 0 - 關閉規則
    //"warn" or 1 - 將規則做爲警告打開（不影響退出代碼）
    //"error" or 2 - 將規則做爲錯誤打開（退出代碼爲1）
    }
};

四、跟 vscode 集成

（1）vscode 安裝 ESLint 擴展

（2）確保有 .eslintrc.js

（3）生成 .eslintrc.js 時候（eslint —init）的第一步選擇，即"How would you like to use ESlint"，不要選擇"enforce code style"，由於咱們要交給Prettier去負責格式化代碼，不然會有衝突！

但若是咱們選擇了"enforce code style"，那麼會多出一步"Which style guide do you want to follow? (Use arrow keys)"讓你選，此時能夠選擇三種代碼風格：即 Airbnb、Standard、Google。

2、Prettier

---

一、介紹

Prettier於2017年由James Long發佈，其靈感來自refmt工具，該工具與Facebook的Reason項目一塊兒使用，該項目利用OCaml的語法與JavaScript協調工做。

Prettier 只是一個Formatting rules ，負責 enforce code style！

二、爲何要把 ESLint 的 Formatting rules 部分用 Prettier 取代？

(1) 代碼規範比 ESLint 的 Airbnb、Standard 更好更先進。

例如：

// Original implementation from "A prettier printer"
hello().then(() => {
  something()
}).catch(console.error)


// Prettier uses the more common way of formatting:
hello()
  .then(() => {
    something()
  })
  .catch(console.error)

(2) 比 ESLint 提供更少的代碼風格規則配置項，終極目的是結束關於代碼風格的爭論。

代碼格式化的原理是將代碼解析爲抽象語法樹（AST）來處理。

其實 ESLint 也是基於 AST 的。

(3) 比 ESLint 支持更多的語言

因此我順便把我平時經常使用的其餘語言也切換成了prettier：

https://github.com/prettier/plugin-php （不能在vscode的「擴展」中找到，需用命令行安裝）

https://github.com/prettier/plugin-python （還在開發中）

三、安裝

npm install -g prettier

建議全局安裝。

四、使用

prettier yourfile.js
# 返回格式化後的文件內容


prettier --write yourfile.js
# 直接修改文件

五、跟 vscode 集成

（1）vscode 安裝 Prettier 擴展

（2）設置 Prettier 爲默認 代碼格式化 工具

當 vscode 同時裝了 ESLint 和 Prettier 擴展後，按 shift+alt+f，會彈出提示，讓你選擇默認的 code formatter 項。


這個時候，咱們就完成了 vscode 使用 ESLint + Prettier 的全部步驟：即 ESLint 負責檢查代碼錯誤，而Prettier只負責格式化代碼！

---

參考資料：

Prettier超越Standard，成爲最受歡迎JS代碼格式化工具

我爲何推薦Prettier來統一代碼風格

使用ESLint+Prettier來統一前端代碼風格

ESLint和Prettier有什麼區別？