為什么會遇到這個問題？

每次創(chuàng)建工程前，總要糾結(jié)一下是否要用eslint，一方面因為eslint沒法和vscode很容易的集成，比如需要配置文件.eslintrc.js，需要設(shè)置.usersetting等，另一方面會和prettier等格式化軟件可能有沖突，當(dāng)然為了體現(xiàn)專業(yè)性，還是不能不用，于是半推半就的加上了。

配置復(fù)雜，這次好好總結(jié)一下，爭取讓大家拿來即用。

eslint和prettier是什么？

eslint是js代碼的規(guī)范性檢查工具。
prettier是js代碼的格式化工具，可以格式化js/html/css/less/sass...等代碼

從定位可以看出二者還是有區(qū)別的，一個用來檢查規(guī)范性，一個格式化。

eslint也可以通過指定--fix參數(shù)來格式化，為什么還需要prettier？

eslint只能進(jìn)行部分格式化，但這個格式化只是用來修正規(guī)范性，對代碼可讀性并沒有改變，對于像var a={a:1,b:2,}這樣寫在一行的代碼，并不能格式化。
因此eslint不能直接用于統(tǒng)一團(tuán)隊代碼風(fēng)格。
而prettier才是用于統(tǒng)一代碼風(fēng)格的格式化工具。
prettier會把var a={a:1,b:2,}格式化成多行，像這樣：

//原代碼：var a={a:1,b:2,}
var a = {
  a : 1,
  b : 2
}
//這里原代碼段中等號、括號附近無空格，這個是規(guī)范性問題，
//最后一個kv對后加了逗號，這個是代碼風(fēng)格的問題，
//正好由eslint校驗提示錯誤，由prettier進(jìn)行格式化進(jìn)行消除。

因此二者互相補充才是最好的。

說了那么多，如何配合使用？

配置還是有點復(fù)雜的，需要配置這些東西：

• vscode：
• eslint插件：
• prettier插件：
• .eslintrc.js文件：
• .eslintignore文件：

如何應(yīng)用到vue工程中？

vue官方指定了一些插件，可以很方便的集成eslint和prettier