用 eslint 和 prettier 讓跨 IDE 協作更舒服

ssshooter發表於2021-11-09
EsLintIDE

TL; DR

  • 搭配 eslint 和 prettier 可以進行程式碼質量優化和跨 IDE 協作
  • 安裝外掛和 npm 包以順利使用 eslint 和 prettier
  • 準備配置檔案 .eslintrc.js 和 .prettierrc.js（可以藉助工具生成也可手寫）
  • 提高效率，開啟 IDE 的儲存自動格式化功能
  • 用 npm 可以更方便地管理 eslint 和 prettier 配置

場景

之前說明了一下 eslint 和 prettier 的區別，這次是要實踐解決 VScode 和 jetbrains 系 IDE 的協作問題。

jetbrains 系在輸入 html 標籤名後如果在後面接一個屬性的話，再換行就會自動對齊到標籤名的長度，但是如果後面不接屬性直接換行的話就定位到正常縮排位置。第一種情況如下圖的 el-select 第二種情況如 el-option，即使再使用 IDE 的格式化也是按照這個“設定”格式化。

但是 vscode 中找不到配置這種縮排的方法，要做到兼顧兩款 IDE 和所有開發者的格式統一，便很自然地想到 eslint 和 prettier 了，這也是前端專案中十分常用的程式碼管理工具。

這裡就有一個小問題，eslint 不夠嗎？某些情況下確實不夠，雖說 eslint 也能管程式碼格式，但他畢竟是個 ES lint……Vue 檔案裡模板部分的縮排他不管，所以如果需求是 vsc 和 jb 協作的話，只用 eslint 不夠，模板部分得靠 prettier 統一。都用 vsc 的話短時間沒大問題，但是隨著 vsc 版本升級指不定格式化演算法會修改，所以還是多加一個 prettier 靠譜。

安裝外掛

vscode

外掛頁找這兩個即可：

webstorm

webstorm eslint

webstorm prettier

webstorm 自帶 eslint，prettier 可以在 settings-plugins 裡搜尋安裝（ws 似乎也預設安裝了 prettier）。

安裝核心程式

IDE 外掛都不包含兩個格式化程式的核心演算法，僅僅提供與 IDE 溝通的橋樑，他們的執行都是依賴於 node_modules 目錄裡的程式，所以 npm 包安裝是必須的。

npm install --save-dev eslint eslint-plugin-vue prettier

其中 eslint-plugin-vue 是 Vue 專用的 lint 規則，對應 react 也會有。

而且還需要在兩個 IDE 都裝上對應外掛

在設定裡可以設定 prettier 的路徑：

ws prettier setting

初始化配置

eslint

ESLint does both traditional linting (looking for problematic patterns) and style checking (enforcement of conventions). You can use ESLint for everything, or you can combine both using Prettier to format your code and ESLint to catch possible errors.
npx eslint --init

初始化建議直接三個都選 To check syntax, find problems, and enforce code style。

輸出格式當然還是推薦 js，一來本身就受到 eslint 管理，而且還可以根據程式自定義輸出結果。

eslint init

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:vue/essential'],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
  },
  plugins: ['vue'],
  rules: {
    indent: ['error', 2],
    'linebreak-style': ['error', 'windows'],
    quotes: ['error', 'single'],
    semi: ['error', 'never'],
  },
}

看起來配置很少，其實都濃縮在 extends 裡的預設規則集裡了。

<!-- const 會不會被加速 -->

prettier

官網自帶的playground 可以幫你生成 json 檔案，拿到了直接新建 js 檔案用 module.exports = 輸出就可以了

全部可選配置的詳細解釋可以看這裡 https://prettier.io/docs/en/o...

module.exports = {
  arrowParens: 'always',
  bracketSameLine: true,
  bracketSpacing: true,
  embeddedLanguageFormatting: 'auto',
  htmlWhitespaceSensitivity: 'css',
  insertPragma: false,
  jsxSingleQuote: false,
  printWidth: 80,
  proseWrap: 'preserve',
  quoteProps: 'as-needed',
  requirePragma: false,
  semi: false,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'es5',
  useTabs: false,
  vueIndentScriptAndStyle: false,
}

其他問題

prettier 和 eslint 的衝突

有時候 prettier 和 eslint 的規則有衝突，prettier 官網有相關專題描述這個問題，不過個人認為沒有必要額外加相容軟體，因為 prettier 的配置本來就很少，手動相容也不是難事，再加這些工具可能反而會增加維護負擔。

像是預設生成的 eslint 規則在格式化 switch 的時候和 prettier 規則就不一樣，但是 prettier 沒有細緻到控制 switch 縮排的規則，所以要改 eslint 遷就 prettier：indent: [2, 2, { SwitchCase: 1 }],

自動格式化

儘管快捷鍵很方便，還是不如一個 ctrl S 來得直接。

webstorm 可以在 settings 搜尋到儲存時的行為，勾選 eslint 和 prettier。

webstorm action on save

vscode 可以直接寫入這個配置（預設格式化工具使用 prettier）：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true
}

提交檢查

專案立項時未使用程式碼格式化工具，後來再接入的專案沒必要立即開啟提交檢查，漸進式修改即可

使用 husky 可以幫助我們在提交前執行一些檢查程式碼質量或進行程式碼測試的指令碼。

安裝過程大概是 npx husky-init 初始化後安裝 husky 依賴，在 package.json 檔案新增 lint 命令。

{
  "scripts": {
    "lint": "node ./node_modules/eslint/bin/eslint.js --ext .vue,.js src",
    "fix": "node ./node_modules/eslint/bin/eslint.js --ext .vue,.js src --fix",
    "prepare": "husky install"
  }
}

然後在 .husky 資料夾中的 pre-commit 檔案新增 npm run lint，即可在提交前執行 eslint，失敗時不可提交程式碼。

配置分享

一般來說一個團隊完全可以所有專案共用一套配置，直接複製配置檔案共享就能跳過生成配置的步驟，更方便的還通過 npm 管理配置檔案，像下面這樣（eslint 同理）：

module.exports = {
  ...require('@company/prettier-config'),
  semi: false,
}

擴充

ESLint 工作原理探討

原文連結：https://ssshooter.com/2021-11...

相關文章