在專案中使用ESLint與Prettier
-
prettier 主要是為了格式化程式碼，而在沒有 prettier 之前，是用 eslint —fix和 編輯器自帶程式碼格式來進行程式碼格式化的。
- 缺點：每種編輯器會有不一樣的程式碼格式，而且配置會比較麻煩。
- prettier 已經逐漸成為業界主流的程式碼風格格式化工具。
- 減輕 eslint 等工具的校驗規則，因為將程式碼樣式校驗交給了 prettier，所以可以將程式碼校驗的規則更準確地應用到程式碼真正的規範上面。
-
eslint 是主要還是負責程式碼規則校驗，prettier 只調整程式碼風格，程式碼樣式，eslint 才是真正檢查程式碼是否符合規範的工具。
兩者分工不同，所以需要配合使用。
具體實現過程
- 統一團隊使用的開發工具（webstorm，ide 編輯器）
- 安裝 eslint 和 prettier （node 模組）
- 安裝 eslint 和 prettier （ ide 編輯器的外掛）
- 配置 eslint 和 prettier
- 配置 editorconfig （可選）
安裝 eslint 和 prettier （ ide 編輯器的外掛），主要就是利用 ide 編輯器做程式碼格式錯誤提醒和程式碼格式處理，這個操作也可以使用 webpack 打包的時候來做，也可以使用 npm 來做，但這裡藉助編輯器會更方便。
1. 統一團隊使用的開發工具（webstorm，ide 編輯器）
開發工具可以做很多東西，是開發程式碼的利器，但是不同的開發工具會有不同的程式碼提示，程式碼格式化，程式碼檢查的機制，這樣的差異化會對團隊程式碼規範（開發和檢查）帶來很多問題，所以需要統一。
前端開發工具推薦：WebStorm VSCode
2. 安裝 eslint 和 prettier （node 模組）
這一步是最需要的，如果沒有這兩個模組，開發工具即使有外掛也不能使用，必須安裝好這兩個模組才能使用。
// 這裡需要全域性安裝最主要的兩個node 模組，主要是要讓ide編輯器 能夠讀取全域性環境來呼叫這2個模組 npm install eslint prettier -g --save-dev // 這個是為了 eslint 跟 prettier 可以聯合使用 // npm install --save-dev eslint-plugin-prettier // 這個是為了讓 eslint 跟 prettier 相容，關閉 prettier 跟 eslint 衝突的rules npm install --save-dev eslint-config-prettier 複製程式碼
外掛介紹：
-
eslint-config-prettier
-
這個外掛是如果eslint的規則和prettier的規則發生衝突的時候（主要是不必要的衝突），例如eslint 限制了必須單引號，prettier也限制了必須單引號，那麼如果用 eslint 驅動 prettier 來做程式碼檢查的話，就會提示2種報錯，雖然他們都指向同一種程式碼錯誤，這個時候就會由這個外掛來關閉掉額外的報錯。
-
但如果是 eslint 只負責檢測程式碼，prettier 只負責格式化程式碼，那麼他們之間互不干擾，也就是說，也是可以不安裝這個外掛的，但是因為團隊的人員的差異性（即使同一個開發工具也有版本差異，也有使用 prettier 和 eslint 的差異），可能有存在各種情況，所以最好還是安裝上這個外掛。
-
-
babel-eslint ：
- 有些程式碼是沒被 eslint 支援的（因為 babel 也是負責這種事情，轉譯不被支援的 js 語法），所以需要加上這個外掛來保持相容性。
-
eslint-plugin-html：
- 為了讓eslint 可以檢查.vue檔案的程式碼。
3. 安裝eslint 外掛和 prettier 外掛並啟用外掛
安裝過程自行檢視eslint 文件 和prettier 文件
4.配置 eslint 外掛和 prettier外掛
-
eslint 的配置
.eslintrc 配置檔案需要新增修改地方，主要是為了 prettier外掛和eslint-config-prettier 外掛 ~~和eslint-plugin-prettier外掛~~ 使用的：
// 因為使用了 eslint 和 prettier，所以要加上他們 extends: [ 'eslint:recommended', 'plugin:prettier/recommended'], // required to lint *.vue files 使用 html引數 plugins: ['html', 'prettier'], // rules 規則就按照各家寫法。 複製程式碼
-
prettier的配置
prettier 的檢查規則是通過配置檔案.prettierrc 實現的， 不過一般來說，只需要配置少部分規則即可：
{
"printWidth": 100,
"singleQuote": true,
"semi": false
}
複製程式碼
有可能會出現的情況是，prettier 格式化後，全部加了分號，但是 eslint 又要去掉分號，那麼就會重複了，這裡可以簡單地設定 prettier 的分號設定跟 eslint 保持一致，其他如此類推，但只適用在幾個比較特別的地方，可以參考官方文件。
5. 配置 editorconfig
- EditorConfig可以幫助開發者在不同的編輯器和IDE之間定義和維護一致的程式碼風格。
- EditorConfig包含一個用於定義程式碼格式的檔案和一批編輯器外掛，這些外掛可以讓編輯器讀取配置檔案並依此格式化程式碼。
對此我個人的理解就是，editorconfig可以協助開發工具在自動格式化或者自動排版或者錄入排版的時候進行程式碼格式化，但是隻能支援比較簡單的規則，不過也減輕了一部分程式碼格式化的壓力和成本，所以有比沒有好，而且最好要有。
// 放在專案根目錄的.editorconfig檔案 root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true 複製程式碼