vcode 儲存修復vue檔案的eslint語法錯誤

死神654發表於2020-11-15

1.先安裝ESlint和Vetur這兩個外掛

在這裡插入圖片描述
在這裡插入圖片描述

2.按照如下步驟開啟vscode的配置檔案

在這裡插入圖片描述
在這裡插入圖片描述

3.將下列程式碼貼上進去儲存即可使用

	// 每次儲存的時候將程式碼按eslint格式進行修復
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
	// 儲存時格式化
"editor.formatOnSave": true,
    // 格式化vue檔案使用vetur
"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
},
    // 讓vue中的js按編輯器自帶的ts格式進行格式化 
"vetur.format.defaultFormatter.js": "vscode-typescript",
    // 讓函式(名)和後面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    //vue的模板檔案中的 html 使用自帶的 js-beautify-html 進行格式化
"vetur.format.defaultFormatter.html": "js-beautify-html", 
    // vue tab 大小為2個空格
"vetur.format.options.tabSize": 2,
    // vutur 覆蓋預設設定
"vetur.format.defaultFormatterOptions": {
        // 讓html的attributes不換行,看起來會更美觀
   "js-beautify-html":{
       "wrap_line_length": 240,
       "wrap_attributes": "auto",
       "end_with_newline": false
   }
}

4.現在在vue檔案中儲存即可修復語法錯誤,比如:雙引號變單引號,函式和括號間會有間隔,最後的方法或資料後面會消除逗號等等

相關文章