vscode vue 格式化 ESLint 檢查單引號雙引號函數括號報錯問題

vscode vue 格式化

最近從新搞了下電腦，重裝了 vscode 軟件，在用 vue 寫項目的時候，照例開啓了 ESLint 語法檢查，可是發如今使用 vscode 格式化快捷鍵的時候（ shift+alt+F）各類報錯，單雙引號，函數空格各類問題。由於 vscode 它自身的那個格式化插件是不匹配 ESLint 的。後來查閱了一些文檔，解決問題以下：

1、安裝 Vetur

在 vscode 軟件商店裏搜索插件 Vetur 如今的版本應該是 0.24.0

2、打開配置文件

打開 vscode 軟件【文件】---【首選項】---【設置】按照下圖點右上角那個小文件圖標，會彈出一個【settings.json】文件。

3、默認配置

這是 vscode 本來的默認配置。

4、更改配置文件

按下圖所示：紅色箭頭所指的 vue 配置註釋掉，在藍色箭頭下加上以下代碼。

"[vue]": {
    "editor.defaultFormatter": "octref.vetur" // 使用 vetur 格式化規則
},
"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "semi": false, // 去掉分號
        "singleQuote": true, // true 爲使用單引號
    },
},
"vetur.format.defaultFormatter.js": "vscode-typescript", // js 使用 typescript
"vetur.format.defaultFormatter.html": "js-beautify-html", // html 使用 beautify
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函數名字和括號前加空格

5、修改 ESLint

若是以上步驟還沒成功那麼只能在 .eslintrc.js 裏修改 rules 配置了。

'off'或者0  //關閉規則關閉
'warn'或者1  //在打開的規則做爲警告（不影響退出代碼）
'error'或者2  //把規則做爲一個錯誤（退出代碼觸發時爲1）

'quotes': [1, 'single'], //引號類型 `` "" ''
'semi': [2, 'never'], // 語句強制分號結尾
'space-before-function-paren': [0, 'always'] //函數定義時括號前面要不要有空格

vscode vue 格式化 ESLint 檢查 單引號 雙引號 函數括號報錯問題