vscode之代碼格式化的prettier、eslint、vetur以及VSCODE的settings.json配置文件

1.作用

項目中常用eslint來約定代碼的規范，但是格式化代碼又需要用到prettier和vetur，很長一段時間都不太懂這三個的作用的相互之間的關系是什么，只知道開發vue項目需要安裝vetur插件，格式化代碼要用到prettier插件。所以花了一段時間專門來弄懂這三者的關系。

首先要知道這三個插件都是干什么用的。

（1）vetur

是開發vue項目基本必裝的一個插件，主要的功能是：

• 語法高亮
• 格式化
• 調試，以及錯誤檢查
• 全局組件的定義提示等等

（2）prettier

是一個用來格式化代碼的插件，不僅僅可用於vue，還可以用於前端大部分場景：如js,html,css,scss,json,reactjs等等。這些類型的文件都可以用prettier插件來格式化。

（3）eslint

eslint是一個JavaScript代碼檢測工具，說白點就是約定代碼的格式是什么樣的，應該是以什么格式什么規范來編寫：

• 通過npm 命令安裝的eslint是用來手動檢查代碼中的不規范，需要手動輸入eslint命令來檢查代碼中的不規范
• 在vscode插件市場安裝的eslint，是用來自動檢測代碼中的不規范，在編寫保存的時候就可以直接通過設定的規范來提示出現的錯誤

 2.settings.json與.prettierrc配置文件的關系

首先要知道的是當前格式化的文件都會首先遵循當前項目目錄（或者更上一級目錄下）的.prettier配置文件的配置。如果都沒有配置這個文件，就會

配置了prettier的vue項目中，在這個項目中生效的是這個項目根目錄下的.prettierrc文件。在settings.json文件中的配置是不起作用的。.prettier文件的格式如下：

{
  "printWidth": 120,
  "semi": false,
  "singleQuote": true
}

 其中配置了使用prettier自動格式化時使用的規范。在右鍵自動格式化代碼或者保存時自動格式化代碼時采用的就是這個配置文件中的配置來自動格式化vue項目中的代碼。

　　我經常遇到的一個情況就是：右鍵點擊了格式化以后格式化成了自己想要的規范，但是右鍵一保存就又變成了另一個規范，我搜了一下是因為eslint和prettier的配置沖突導致的，跟着配置了半天沒什么用，最后只有刪除prettier插件這個暴力辦法處理了。經過這次系統了解以后才發現是格式時使用的插件與settings.json文件中的配置不一致導致的。例如我要格式化一個vue文件，在這個vue項目的根目錄下沒有.prettierrc配置文件，所以這里格式化時采用的prettier配置就是settings.json文件中的prettier配置。

　　先看我的VSCODE配置了如下配置，這里先不看eslint的規范：

• 文件自動保存（在窗口切換時），還有其他自動保存的方案
• 文件保存時自動格式化
• vue的默認格式化的插件：vetur
• prettier插件有自己的插件配置
• vetur插件有自己的插件配置
• 項目根目錄沒有自己的.prettierrc文件

先看settings.json中的配置：

上面主要看三個紅框里面的內容：

• 第一個紅框內的是vue文件保存時采用的格式化方案，這里默認的是vetur插件
• 第二個紅框內的是prettier插件的公共規則
• 第三個紅框內的是使用vetur格式化文件時，采用的prettier規范，如果這個prettier不填就默認采用第二個紅框內的公共規則

 現在看格式化代碼時，在右擊當前項目會出現“以...格式化文件”的選項，：

可以看到如果我直接點擊格式化文件，采用的就是prettier插件的配置（settings.json第二個紅框中的配置），這里我的prettier中的semi配置用的是true（表示格式化時自動j加上語句結尾的分號），而vetur中配置的prettier插件的semi（第二個紅框）用的是false（自動去除結尾的分號）。當我不使用默認vetur而使用prettier來格式化時就會自動加上分號：

此時文件尚未保存，當我保存時：

 此時采用的又是vetur插件配置的"semi": false規則。這就導致了格式化以后再保存會自動修改樣式的問題。

總之，這里主要的原因就是當前項目中沒有配置.prettierrc文件，且格式化時采用的插件規范（prettier）與保存時采用的格式化方案（vetur）沖突導致的。所以最主要的解決方法就是有一個公共的.prettierrc配置文件。這樣settings.json文件中的配置就會被覆蓋了。

3.eslint與vetur和prettier插件的關系

eslint又分為：

• 通過npm安裝的eslint插件，這個需要使用特定eslint的命令（如eslint ./src）來手動找到所有的不規范。所有的規則見官網
• 還有就是vscode通過側邊欄的插件市場來安裝的vscode的eslint插件，這個插件可以不需要執行特定的命令就可以顯示代碼的不規范。具體使用方法見官網

注意：

• 同prettier插件一樣，eslint插件默認會首先遵循離當前文件最近的.eslintrc.js/.json文件中的配置，這也是vscode中在項目中的首先采用的配置。如果這個文件的同級或者更上幾級的目錄中沒有.eslintrc的配置文件，此時運行eslint命令或者使用插件才會使用settings.json中的配置
• 可以使用eslint的eslint.options中配置來配置eslint規則的生效文件。配置了這個屬性即可實現vscode的eslint插件按照該文件指定的規范來提示
• eslint也有格式化代碼的功能，但是多個格式化的工具容易沖突，且eslint也不推薦使用自己的格式化工具