1. 程式人生 > 其它 >使用Vue-cli的時候出現的自動化格式與ESlint格式不匹配問題

使用Vue-cli的時候出現的自動化格式與ESlint格式不匹配問題

技術標籤: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 // 兩個選擇器中是否換行