使用Vue-cli的時候出現的自動化格式與ESlint格式不匹配問題
阿新 • • 發佈:2021-01-05
技術標籤:vue
問題描述:在學習Vue開發的時候,每次儲存vscode都會幫我自動格式化程式碼,但是不符合ESlint的標準,比如會在最後新增逗號,句末會新增分號,單引號會變成雙引號。
網上給出的結果都是修改設定中的setting,但是隻修改setting仍然不會發生改變。
解決方法:
VScode裡的設定不生效,是因為專案本地有.editorconfig檔案,只要刪除這個檔案,系統自帶的設定就會生效了
附:在vscode左上角的檔案->首選項->設定 中 點選右上角的小筆記本圖示
然後新增如下程式碼:
// vscode預設啟用了根據檔案型別自動設定tabsize的選項
"editor.detectIndentation": false,
// 重新設定tabsize
"editor.tabSize": 2,
// #每次儲存的時候自動格式化
"editor.formatOnSave": true,
// #每次儲存的時候將程式碼按eslint格式進行修復
"eslint.autoFixOnSave": true,
// 新增 vue 支援
"eslint.validate": [
"javascript" ,
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #讓prettier使用eslint的程式碼格式進行校驗
"prettier.eslintIntegration": true,
// #去掉程式碼結尾的分號
"prettier.semi": false,
// #使用帶引號替代雙引號
"prettier.singleQuote": true,
// #讓函式(名)和後面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #這個按使用者自身習慣選擇
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #讓vue中的js按編輯器自帶的ts格式進行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue元件中html程式碼格式化樣式
}
},
// 格式化stylus, 需安裝Manta's Stylus Supremacy外掛
"stylusSupremacy.insertColons": false, // 是否插入冒號
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括號
"stylusSupremacy.insertNewLineAroundImports": false, // import之後是否換行
"stylusSupremacy.insertNewLineAroundBlocks": false // 兩個選擇器中是否換行