前言

多人开发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代码主动格式化