ESLint
先說是什么：ESLint 是一個檢查代碼質量與風格的工具，配置一套規則，他就能檢查出你代碼中不符合規則的地方，部分問題支持自動修復。
使用這么一套規則有什么用呢？如果單人開發的話倒是沒什么了，但是一個團隊若是存在兩種風格，那格式化之后處理代碼沖突就真的要命了，統一的代碼風格真的很重要！
（其實以前自己做一個項目的時候，公司電腦和家庭電腦的代碼風格配置不一樣，在家加班的時候也經常順手格式化了，這么循環了幾次不同的風格，導致 diff 極其混亂 ）
如何配置
用腳手架生產的配置可能會在 package.json 里面，個人建議拆成單獨的 .eslintrc.json 文件，另外也可以使用 js 文件 export 或者 yaml 格式。
默認 ESLint 不會有任何規則，不過你可以直接用 "eslint:recommended" 套用一些常用規則（包括上面 rules 頁面打了勾的選項）。
我之前用 vue cli 創建的工程規則是 "@vue/standard"：
{
"root": true, "env": { "node": true }, "extends": ["plugin:vue/essential", "@vue/standard"], "rules": { "semi": ["error", "never"], "quotes": ["error", "single"], "comma-dangle": ["error", "only-multiline"], "space-before-function-paren": ["error", "never"] }, "parserOptions": { "parser": "babel-eslint" } }rules 部分是我按平時的風格自己加的，rules 中的定義會覆蓋 extends 里配置組合中的設定。對於那些使用腳手架搭建的項目，遇到不符合團隊或自己代碼風格的地方可以另外在 rules 里配置。
實用提示
在 vscode 安裝 ESLint 插件之后，鼠標懸停於錯誤語句，就會看到錯誤原因，點擊鏈接可以直達該設定的詳情頁面，頁面內包括：
- 對該風格的描述
- 錯誤與正確的使用事例
- 配置可選項
通過這些信息可以快速調整 rules 中的配置。
順帶一提，實例中多用數組舉例，其實簡單的開關配置用數字即可：
"off" or 0 - turn the rule off "warn" or 1 - turn the rule on as a warning (doesn't affect exit code) "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)另一個問題是 ESLint 格式化很麻煩，怎么辦？
早就有人提出為什么右鍵格式化里面不能選 ESLint 這個issue，里面有很多可選方案，我比較喜歡下面這種：
修改 keybindings.json 文件，綁定一個快捷鍵到 eslint.executeAutofix 即可，再也看不到那些惱人的 error 啦！
Prettier
因為估計大部分人都不會編程式地使用 Prettier，所以下面講的都是 vscode 的 Prettier 插件。
Prettier專注於代碼排版，但不會關心你的代碼質量。
說到這里，既然 ESLint 已經包含了排版相關的校驗，為什么還需要 Prettier 呢？
我想到這么三個原因：一是 ESLint 安裝和配置比較麻煩，而且 lint 的速度並不快；二是使用 Prettier 並不只針對 JavaScript，也就是安裝 Prettier 插件，就可以格式化各種流行語言；三是配置沒那么眼花繚亂。
畢竟是只管代碼格式，Prettier 的選項本來就比 ESLint 少多了，而且即使只在樣式上，prettier 也不傾向於亂加選項，這一點還專門在選項的哲學里說明了 Prettier 選項精簡的原因。
說回配置方式，Prettier 與 ESLint 同樣可用 js、json、yaml 格式，下面舉例依然使用慣用的 .prettierrc.json。
最常用的配置也就這四項：tab 寬度、尾逗號、是否使用分號和是否使用單引號：
{
"tabWidth": 2, "trailingComma": "es5", // comma-dangle "semi": false, // semi "singleQuote": true // quotes }除了縮進沒有管之外，另外三個選項對應的 ESLint 選項已經寫在注釋里。Prettier 格式化的結果和 ESLint 沖突是常有的問題，官網 Integrating with Linters 部分也有提供了讓 Prettier 繼承 ESLint 配置的方法，需要另外安裝依賴。不過我看實在不必，按我的實際風格習慣自己配一下也就幾分鍾的事情。
關於這兩個工具就先寫到這了，希望大家能正確區分這兩個工具啦～
廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com
時代的眼淚
—— 下面一些不知道有沒有用的信息，可以選擇不看 ——
下面兩個片段都是 vscode 的 settings.json 文件
{
"vetur.format.defaultFormatterOptions": { "prettier": { "semi": false, "trailingComma": "es5", "singleQuote": true } } }很久以前依稀記得 vetur 需要像上面的配置一樣嵌套在 vetur 里，現在查了資料才發現配置了 .prettierrc.json 的話一切以配置文件為准，直接無視這里的配置。還記得當年用 vetur 不知道要在里面套 prettier 屬性，還折騰了一些時間呢。
{
"prettier.semi": true, "prettier.trailingComma": "es5", "prettier.singleQuote": true }又像上面的配置一樣配置整個 vscode 的風格，實測現在是不能用的，即使沒有 .prettierrc.json 這樣配置也不生效，官網現在也沒有提到這種配置方法。
上面兩個配置不是本文主要內容，只是突然想起來好像有這回事，而現在，可能已經成為了時代眼淚吧。