vscode vue 格式化
最近重新搞了下電腦,重裝了 vscode 軟件,在用 vue 寫項目的時候,照例開啟了 ESLint 語法檢查,但是發現在使用 vscode 格式化快捷鍵的時候(
shift+alt+F)各種報錯,單雙引號,函數空格各種問題。因為 vscode 它自身的那個格式化插件是不匹配 ESLint 的。后來查閱了一些文檔,解決問題如下:
一、安裝 Vetur
在 vscode 軟件商店里搜索插件 Vetur 現在的版本應該是 0.24.0

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

三、默認配置
這是 vscode 原本的默認配置。

四、更改配置文件
按下圖所示:紅色箭頭所指的 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, // 函數名字和括號前加空格
五、修改 ESLint
如果以上步驟還沒成功那么只能在 .eslintrc.js 里修改 rules 配置了。
'off'或者0 //關閉規則關閉
'warn'或者1 //在打開的規則作為警告(不影響退出代碼)
'error'或者2 //把規則作為一個錯誤(退出代碼觸發時為1)
'quotes': [1, 'single'], //引號類型 `` "" ''
'semi': [2, 'never'], // 語句強制分號結尾
'space-before-function-paren': [0, 'always'] //函數定義時括號前面要不要有空格