在打開一個vue項目時候，有時會看到很多紅色波浪線糕非，提示我們編碼格式不正確蒙具。
這很有可能是vs code 安裝了vetur這個插件球榆，這個插件的規(guī)則是沒辦法配置的。他的官網也說了禁筏，要想體驗最好的需要跟eslint插件結合
vetur與Eslint結合分三步
1持钉、vs code 安裝 Eslint插件。
2融师、在vs code的setting.json中關掉vetur默認的模板校驗右钾。
"vetur.validation.template": false
3、在vs code的setting.json中把vue文件開啟Eslint旱爆。
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
],
4舀射、在根目錄創(chuàng)建Eslint的配置文件.eslintrc.js
.eslintrc.js在創(chuàng)建項目已經自動生成了。因為創(chuàng)建項目的時候怀伦，我選用了eslint 并且單獨生成配置文件脆烟。這樣就能在.eslintrc.js中的rules對象里配置我們自己的規(guī)則。
關掉v-for要有key的編碼提示后房待，就看不到紅色的線了
除了編輯器邢羔，其實vue-cli還有eslint-loader校驗我們的代碼。就是那個創(chuàng)建項目的時候桑孩，選擇了lint to save 就是說在Ctrl+s保存的時候校驗我們的代碼拜鹤。
所以在npm run serve啟動服務后，我們修改文件流椒，Ctrl+s保存后也有可能看到一堆報錯
這個eslint-loader 也是使用.eslintrc.js中的規(guī)則敏簿。所以我們的編輯器和命令行能同時看到這個編碼不規(guī)范的提示。
eslint-loader 也有自己的配置
在vue.config.js中
可以選擇報錯的級別宣虾，warnnings: true會發(fā)出警告但不會影響serve或者build惯裕，error: true 會在頁面上彈出錯誤
一些規(guī)則的配置
'off': 表示關掉，
'wran': 表示發(fā)出警告
'error': 表示發(fā)出錯誤
/*對應的數字是 */
0：表示關掉
1：表示發(fā)出警告
2：表示發(fā)出錯誤
1绣硝、v-for的時候蜻势，可以不用v-bind:key,當然我覺得還是保留好
'vue/require-v-for-key': 'off',
2、在{{ index < 0 }}插值表達式中鹉胖，使用到 '<' 小于號的規(guī)則
'vue/no-parsing-error': ['error', {
'invalid-first-character-of-tag-name': false
}],
注意:直接設置'invalid-first-character-of-tag-name': false不管用
注意:可以設置vue/no-parsing-error： 'off'握玛，這個是有效的，但不建議這樣做
注意:因為vue/no-parsing-error中還有好多規(guī)則
更多的規(guī)則可以看文章底部的跳轉鏈接或者網上搜
小結：
通過.eslintrc.js設置甫菠，我們能同時控制編輯器校驗代碼的提示規(guī)則和打包時vue框架自帶的eslint-loader校驗败许。如果我們不想看編輯器的提示，就可以去掉vs code setting.json中的Eslint配置淑蔚，并把vetur.validation.template": false設置保留，這樣只有在npm run serve 或者npm run build的時候在命令行中看到校驗報錯愕撰。當然eslint-loader的提示也可以清除掉配置刹衫，這樣命令行不會有這么多警告醋寝。
這樣我們就可以對編碼的規(guī)范提示控制在自己想要的范圍內，一些規(guī)則我們能保留带迟，一些規(guī)則能不校驗音羞，相應的規(guī)則都可以在Eslint官網找到。這樣就很靈活仓犬，看到再多的紅色波浪也不慌了嗅绰。
相關鏈接
vetur官網：https://vuejs.github.io/vetur/
Eslint官網：https://eslint.org/
slint-plugin-vue配置規(guī)則：https://eslint.vuejs.org/
