用vscode開發vue應用

如今用VSCode開發Vue.js應用幾乎已是前端的標配了，但不少時候咱們看到的代碼混亂不堪，做爲一個前端工程師，單引號雙引號亂用，一段有分號一段沒有分號，有的地方有逗號有的地方沒有逗號，空格回車都對不齊，還說本身作事認真，這不是開玩笑的事情。

咱們今天從頭開始，完整地講述一下一個重度代碼潔癖患者該如何用vscode開發vue，以及如何把一個已經能夠宣判死刑的全身各類格式錯誤幾萬條的項目整容成標準美女。

從安裝開始

爲了準確起見，咱們把vscode裏全部插件所有禁用，把用戶設置清空，以讓它儘量恢復成原始的樣子：

做爲代碼潔癖患者，對於系統的版本要求必定也是最苛刻的，無論何時，都讓咱們把全部的系統能升級的都升級到最高版本：

npm install -g @vue/cli

而後，咱們開始建立項目：

vue create hello-world

在這裏，必定要選擇第一項：babel + eslint，這兩個是必不可少的。我見到有些人嫌eslint麻煩，竟然在項目創建好以後手工把eslint關掉的，簡直無語。

安裝完畢：

咱們先不急着執行，執行代碼是最容易的事情，咱們先打開代碼看一下：

好吧，至少咱們須要先安裝vetur插件。這幾乎已經肯定是開發vue項目的標配了，即便我不說，vscode也會強烈建議你安裝它。

裝上vetur之後多少有點人樣了。接下來咱們來試一試能不能自動格式化，這部分纔是潔癖患者的最愛。胡亂加幾個空格，而後保存試試看：

不能格式化，連個提示都沒有！

用lint格式化

就算vscode裏的vetur不能幫咱們自動格式化，好在package.json命令裏還有一個lint命令，咱們看看lint命令能不能幫咱們自動格式化：

lint竟然說沒有錯誤！明明就是多了不少空格的錯誤好吧，爲何？

這是由於缺省的vue-cli沒有爲咱們安裝@vue/prettier插件，咱們先來手工安裝一下：

yarn add -D @vue/eslint-config-prettier

而後在package.json或者.eslintrc.js或者其它什麼你設置eslint的地方，給它加上：

"extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/prettier"
    ],

特別是最後這一個@vue/prettier，很是重要。而後再執行yarn lint。多餘的空格被自動幹掉了，可是咱們發現有一些地方同時也被篡改了：

全部的單引號被變成雙引號了，本來行尾沒有的分號被加上了分號。這是爲何呢？由於咱們雖然引入了prettier，可是尚未對prettier作設置，咱們在項目的根目錄下建立一個.prettierrc.js文件，而後在其中加入：

module.exports = {
  semi: false,
  singleQuote: true
}

再次執行yarn lint，如今咱們看到lint已經可以起做用了。它不但能把咱們多餘插入的空格刪掉，而且能按照規則把雙引號變成單引號，把行尾多餘的分號刪掉。固然，關於行尾加不加分號這是一個哲學命題，你能夠根據你我的的喜愛自行決定。在這裏，咱們權且按照vue-cli的標配執行。

到這一步很關鍵，假設你拿到一個爛的再也不爛的vue項目，裏面有幾千個.vue文件，幾萬個各類格式錯誤，也都能經過yarn lint這一行命令把它們所有修正過來！

在vscode裏格式化

事情尚未完，咱們注意到雖然yarn lint命令能在編寫完代碼以後幫咱們格式化，可是既然咱們是用vscode進行開發，咱們固然但願能在vscode裏直接看到對於錯誤的標註。

這時候咱們須要在vscode裏再安裝一個插件eslint。

你覺得安裝上eslint插件就好了嗎？不行的。由於eslint並不知道咱們的.vue文件裏面包含了js語法，因此還須要打開咱們的vscode設置文件。

注意：這裏必定要設置到 項目的設置裏，而不要只是設置到你本身我的的設置裏，不然你團隊的小夥伴隨便一改又亂掉了。正確的方法是在你項目的文件夾下有一個 .vscode文件夾，而 vue最討厭的地方是它竟然會把這個文件夾放到 .gitignore裏，這個錯誤你必需要糾正過來，也就是說從 .gitignore文件裏把 .vscode刪掉。切切。

在你項目的settings.json裏文件裏添加如下代碼：

{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
}

這時候全部錯誤都被標註出來了，注意看左側，必定要讓這個settings.json文件是綠色的，而不能是灰色的，若是是灰色的，請檢查你的.gitignore文件：

由於咱們在settings.json文件裏設置了autoFixOnSave，因此無論多麼亂的格式，只要一按Ctrl+S保存，自動就幫咱們把代碼格式整理好了，是否是很方便呢？

和Prettier的衝突

有些時候咱們的vscode裏插件裝的比較多，譬如還安裝了prettier插件，由於咱們不僅開發vue項目，可能還有其它類型的js項目特別是傳統js項目，須要用到prettier進行美化，而prettier的一些功能是會和eslint相沖突的，好比說咱們在全局設置了prettier的formatOnSave，這個功能就會和eslint的autoFixOnSave打架，爲了不這個矛盾，咱們一般還會在本項目的settings.json文件裏再多加幾個選項，相似於這樣：

"editor.tabSize": 2,
  "editor.formatOnSave": false,
  "prettier.semi": false,
  "prettier.singleQuote": true

有了這些設置，基本上prettier就不會和eslint打架了。

小結

以上就是用vscode開發vue程序的標配，並不像網上有些文章說的那麼簡單，不是隻須要配一個eslint就能解決的事情，這裏還用到了vetur，eslint和prettier，把幾個工具綜合用好，才能真正達到咱們的錯誤隨時可見，保存自動修改，更正既往錯誤的目的。但願每一個前端工程師寫出的代碼都如出一人之手，漂亮簡潔乾淨。

咱們的目標始終如一：0錯誤0警告。

---

關於如何在vscode中進行規範化的Vue應用開發，我作了一個教程，感興趣的同窗能夠到這裏學習： https://segmentfault.com/ls/1...