使用 ESLint + Prettier 美化代碼

尚未來得及跟2018年說聲再見，2019年的第一個工做周也結束了。本來打算在18年底就應該完成的React項目升級，由於種種緣由，致使如今纔開始。將React從15.4升級到16.7的過程掉進了很多坑，可是最頭痛仍是雜亂無章的代碼。因爲項目前期並無使用 ESLint 等約束，所以致使代碼風格是千姿百態，分號忽隱忽現、tab和空格、2個空格和4空格等。

爲了快速解決這些代碼風格差別，我選擇使用 ESLint 和 Prettier。搭配 VS Code 編輯器的「保存自動修復」功能，可謂是美化代碼的神器。

ESLint

ESLint 是一個開源的 JavaScript 代碼檢查工具，能讓咱們在開發的過程當中及時發現問題，同時也提供了根據 ESLint 規則來格式化代碼的CLI命令。所以咱們在配置好規則後能夠經過 --fix 命令自動修復代碼風格。

eslint --fix *.js
複製代碼

Prettier

Prettier 與 ESLint 不一樣，ESLint 主要的目的是代碼檢查。而 Prettier 是爲了讓代碼風格「更漂亮」。Prettier 並不侷限於 JavaScript 代碼的格式化。還支持 TypeScript 、 Flow 、 CSS 、JSX 、 HTML 、 GraphQL 、 JSON等。

使用 Prettier 也很簡單：

一、安裝 Prettier

npm install --global prettier
複製代碼

二、配置 Prettier

支持 .js|.json|.yaml|.yml 等後綴，具體配置信息可查閱官網

// prettier.config.js or .prettierrc.js
module.exports = {
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 200,
};

複製代碼

三、格式化代碼

經過 CLI 命令 prettier [opts] [filename ...] 來指定須要格式化的文件夾或是文件。具體參數請查閱官網

prettier --write [filename ...]
複製代碼

若是須要與 ESLint 一塊兒使用，只需使用 eslint-plugin-prettier 將 Prettier 添加爲 ESLint 規則。

npm install --save-dev eslint-plugin-prettier
複製代碼

.eslintrc.json：

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
複製代碼

VS Code 配置

首先安裝 ESLint 擴展，而後修改用戶設置 首選項 -> 設置

關鍵配置以下：

"eslint.autoFixOnSave": true
複製代碼

總結

雖然能夠將 Prettier 添加爲 ESLint 規則。可是二者搭配一塊兒使用可能會存在衝突。因爲 Prettier 的可配置項比 ESlint 少太多了，因此衝突發生時，每每是經過修改 ESLint 規則（eslint-config-prettier）來避免錯誤的出現，這點並非我想要的。爲了解決這個衝突問題，目前個人作法是：

一、先使用 Prettier 格式化整個項目

prettier --write [filename ...]
複製代碼

二、使用 ESLint 的 --fix 命令來修復 Prettier 帶來的衝突。

eslint --fix *.js
複製代碼

若是你們有更好的作法或是建議，歡迎留言告訴我。