使用 ESLint + Prettier 美化程式碼

慢熱型急性子發表於2019-01-05
EsLint

還沒有來得及跟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 也很簡單：

1、安裝 Prettier

npm install --global prettier
複製程式碼

2、配置 Prettier

支援 .js|.json|.yaml|.yml 等字尾，具體配置資訊可查閱官網

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

複製程式碼

3、格式化程式碼

通過 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）來避免錯誤的出現，這點並不是我想要的。為了解決這個衝突問題，目前我的做法是：

1、先使用 Prettier 格式化整個專案

prettier --write [filename ...]
複製程式碼

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

eslint --fix *.js
複製程式碼

如果大家有更好的做法或是建議，歡迎留言告訴我。

相關文章