VSCode配置eslint

在Vue.js項目中，使用的是eslint檢查。

而在我寫完代碼後，cnpm run dev運行命令。。。而後悲劇了，一大堆報錯！╮(╯▽╰)╭

安裝插件：Vetur：這是vscode上一個vue.js代碼提示，語法高亮等功能的流行插件。不過由於它代碼格式化使用的是prettier，因此使用vscode右鍵自帶的「格式化文件 Alt+shift+F」，會存在一些問題：

好比強制雙引號（double quotes）、行尾自動加上分號（semicolon）等。

重點是：這些在eslint中報錯！！！無語O__O "…

 

因此在用戶設置setting.json裏面：能夠這樣設置

注意：這樣設置後，是vscode右鍵格式化顯示效果；不過還有點小問題，函數名後面的圓括號與函數名不會格式化後添加空格（而這致使在eslint中語法報錯，╮(╯▽╰)╭）

 

解決方法是安裝ESLint插件，一樣是用戶設置setting.json：

 1 //配置eslint
 2     "eslint.autoFixOnSave": true,
 3     "files.autoSave":"off",
 4     "eslint.validate": [
 5        "javascript",
 6        "javascriptreact",
 7        "html",
 8        { "language": "vue", "autoFix": true }
 9      ],
10      "eslint.options": {
11         "plugins": ["html"]
12      },
13      //爲了符合eslint的兩個空格間隔原則
14      "editor.tabSize": 2

這樣每次保存文件（ctrl+s）時，eslint插件會自動對當前文件進行eslint語法修正！

 

其實有時候也不得不說是一種無奈，eslint制定了規則，由於使用它，因此算是半強迫狀態接收它的某些規則（即便某些規則剛開始讓人有點不適應）

由原先C++等語言的在行末尾加分號，使用python時tab=4空格縮進，到如今這eslint的強制單引號和行尾不加分號等規則（整的跟ruby愈來愈像，╮(╯▽╰)╭）【這裏說的是eslint的默認規則，固然你要去強行修改固然能夠改變規則。可是大多數人使用不修改的風格，而若是你去使用修改後的風格，溝通協做又是一個問題！】

業界也是對這些東西爭論不休，無奈╮(╯▽╰)╭。成天哪麼語言最好，加分號仍是不加分號（這裏可看知乎連接），vim最強編輯器等等！

明明是可選的規則，而某些工具強制性般使用一種規則。也不知是好是壞，不過本人也只有「入鄉隨俗」，緊跟「大潮流」，不斷變化吧╮(╯▽╰)╭

 

js中不加分號主要在圓括號，方括號，正則開頭的斜槓，加號，減號（後三種比較少見，前面兩種主要體如今IIFE當即執行的函數表達式，數組）5種狀況下容易出問題：

 

這是經保存（ctrl+s）後，eslint格式化的js代碼，以下圖所示：

這是vscode鼠標右鍵，「格式化文件」顯示的代碼，以下圖所示：

 

本文中用到的插件主要有如下幾種：

ESLint插件：

prettier插件：

Vetur插件：

 更多VSCode插件即配置可參見個人另外一篇博客：VSCode插件及用戶設置