1.兩大linter說起
- eslint 為js而設計的可插拔的檢查程序
- tslint 為ts語言而設計的可擴展的檢查工具（將在2019年取消更新，建議使用eslint）
兩種linter都可以實現fix功能，所謂fix就是將原代碼轉化為符合一定規則的新代碼。雖然linter工具fix之后的代碼，解決了大部分問題，但可能有些地方並不符合我們的閱讀代碼的習慣，比如一行代碼過長。
在強迫症的影響下，不同的人對自己的代碼進行不同程度的”美化“，甚至遇到他人代碼時也會順手美化一把。
最終導致項目中的代碼風格不能統一。
2.prettier簡介
prettier是一種保證代碼一致性、兼具美化效果的代碼格式化工具
2.1 not only js
前有jslint，而后由於eslint過於成功，導致了jslint已經無人問津，這也讓我們誤以為eslint只專注於js
下面列舉了它所支持的其他語言
- JavaScript、jsx
- flow、typescript
- json
- css、less、scss
- graphql
- markdown
- yaml
2.2 IDE
有人的地方就有江湖，有編輯器的地方就有prettier，目前流行的ide都能支持prettier
- vscode
- webstorm
- atom
- visual studio
- sublime
以上列舉了前端比較常用的幾個工具，需要確定所使用的的編輯器是否支持prettier是否支持，請移步官網
2.3 parser
prettier針對不同的語言，所使用的的parser有多個，例如編譯graphql時所使用的就是graphql/language。
而編譯js的目前有兩個，即babylon（默認）、flow，由於babylon的bug較少，對編譯工作支持度較好，所以默認情況下選用babylon即可。
babylon即babel6的編譯工具，在babel7中已更名為@babel/parser
資源搜索網站大全 http://www.szhdn.com 廣州VI設計公司https://www.houdianzi.com
3.eslint融合
eslint作為強大的linter工具，與vscode配合后能降低代碼問題的風險，在coding的過程中就發現潛在問題，提高代碼質量。
3.1 eslint-config-prettier
eslint的config可以繼承自第三方包的config，config中定義了rules的開關規則，eslint-config-prettier主要定義了prettier格式化后導致eslint報錯的那些規則
3.2 eslint-plugin-prettier
eslint與prettier的格式化需要分別進行，如果想要讓eslint fix的同時，也能兼顧prettier的規則進行格式化，就需要使用到eslint-plugin-prettier這個插件。
它的主要作用就是專門定義了eslint fix的prettier規則
3.3 融合寫法
在.eslintrc文件中加入以下配置
{
"extends": ["plugin:prettier/recommended"] }這段代碼有三個作用
- 繼承prettier的config規則
- 開啟rules的 "prettier/prettier": "error"
- eslint fix的同時執行prettier格式化