前言
多人開發vue項目,代碼風格形式不一
vscode保存代碼，自動按照eslint規范格式化代碼設置（vscode最新版配置）
vscode插件
首先vscode需要裝一些vscode插件
ESLint、Vetur、Prettier-Code formatter、GitLens-Git supercharged
配置settings.json
打開settings.json，貼上配置，注意自己原有的vscode主題和字體等不要替換掉
打開方式
方式一:
1)文件 ------.>【首選項】---------->【設置】
2）搜索emmet.include;
3）在settings.json下的【工作區設置】中添加
方式二:
Ctrl + P 搜索settings.json
貼上如下配置
{
"window.zoomLevel": 0,
"diffEditor.ignoreTrimWhitespace": false,
"workbench.colorTheme": "One Monokai",
"editor.fontSize": 14,
"workbench.editor.enablePreview": true, //預覽模式關閉
"editor.formatOnSave": true, // #每次保存的時候自動格式化
// 自動修復
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"eslint.enable": true, //是否開啟vscode的eslint
// vscode默認啟用了根據文件類型自動設置tabsize的選項
"editor.detectIndentation": false,
// 重新設定tabsize
"editor.tabSize": 2,
// #去掉代碼結尾的分號
"prettier.semi": false,
// #使用單引號替代雙引號
"prettier.singleQuote": true,
// #讓prettier使用eslint的代碼格式進行校驗
"prettier.eslintIntegration": true,
"javascript.preferences.quoteStyle": "double",
"typescript.preferences.quoteStyle": "double",
// #讓函數(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// 配置 ESLint 檢查的文件類型
"eslint.validate": [
"javascript",
"vue",
"html"
],
"eslint.options": { //指定vscode的eslint所處理的文件的后綴
"extensions": [
".js",
".vue",
".ts",
".tsx"
]
},
"git.enableSmartCommit": true,
"editor.quickSuggestions": {
"strings": true
},
//一定要在vutur.defaultFormatterOptions參數中設置，單獨修改prettier擴展的設置是無法解決這個問題的，因為perttier默認忽略了vue文件（事實上從忽略列表移除vue也不能解決這個問題）
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, // 格式化不加分號
"singleQuote": true, // 格式化以單引號為主
},
"js-beautify-html": {
// force-aligned | force-expand-multiline vue html代碼格式化
"wrap_attributes": "force-aligned",//"auto","force-expand-multiline"
"wrap_line_length": 200,
"wrap_width_line": false,
"semi": false,
"singleQuote": true,
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": true
},
},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "prettier",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"javascript.updateImportsOnFileMove.enabled": "never",
"javascript.implicitProjectConfig.experimentalDecorators": true,
"workbench.editor.showTabs": true,
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressResultsExplorerNotice": false,
"suppressShowKeyBindingsNotice": true,
"suppressUpdateNotice": false,
"suppressWelcomeNotice": true
},
"gitlens.keymap": "alternate",
"git.enableSmartCommit": true,
"gitlens.historyExplorer.enabled": true,
"gitlens.views.fileHistory.enabled": true,
"gitlens.views.lineHistory.enabled": true,
}