vscode中默認(rèn)代碼格式化ctrl+shift+f后攒岛，代碼無法通過eslint的代碼風(fēng)格檢查。
https://github.com/varHarrie/varharrie.github.io/issues/10
解決方案
1.首先安裝eslint糟需，prettier-Code formatter，vetur 這三個插件，大多數(shù)情況下vetur已經(jīng)安裝了吴汪。
image.png
2.點(diǎn)擊文件->首選項(xiàng)->設(shè)置，修改用戶設(shè)置區(qū)的配置如下：
{
// vscode默認(rèn)啟用了根據(jù)文件類型自動設(shè)置tabsize的選項(xiàng)
"editor.detectIndentation": false,
// 重新設(shè)定tabsize
"editor.tabSize": 4,
// #值設(shè)置為true時蒸眠，每次保存的時候自動格式化漾橙；值設(shè)置為false時，代碼格式化請按shift+alt+F
"editor.formatOnSave": false,
// #去掉代碼結(jié)尾的分號
"prettier.semi": false,
// #使用帶引號替代雙引號
"prettier.singleQuote": true,
"prettier.tabWidth": 4,
// #讓函數(shù)(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
// #讓vue中的js按"prettier"格式進(jìn)行格式化
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// #vue組件中html代碼格式化樣式
"wrap_attributes": "force-expand-multiline", //也可以設(shè)置為“auto”楞卡，效果會不一樣
"wrap_line_length": 200,
"end_with_newline": false,
"semi": false,
"singleQuote": true
},
"prettier": {
"semi": false,
"singleQuote": true
}
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 格式化stylus, 需安裝Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒號
"stylusSupremacy.insertSemicolons": false, // 是否插入分號
"stylusSupremacy.insertBraces": false, // 是否插入大括號
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
"stylusSupremacy.insertNewLineAroundBlocks": false,
"prettier.useTabs": true,
"files.autoSave": "off",
"explorer.confirmDelete": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"diffEditor.ignoreTrimWhitespace": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
} // 兩個選擇器中是否換行
}
