前言
多人开发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,}
vue我的项目Ctrl+s vscode代码主动格式化