vue2|vue2 前端项目规范整理（仅做参考） vue2前端项目规范整理（仅做参

说明：以下内容仅根据本人开发经验总结，为大家提供参考，请多指教。
那么下面就以vue2 项目前端代码做个简单的总结，本文不涉及typeScript。

一插件：

针对vue2这种结构比较单纯的项目，用以下三个插件足以对代码进行最基本的格式化。

文章图片

二项目配置.vscode

优点: 在单个项目的根目录下配置.vscode 可以针对当前项目进行个性化配置（但主要还是要遵循开发团队基本规范）。若非必要，请勿在vscode全局进行代码格式化配置（本人曾经深受其害...）。
如下图所示：
【vue2|vue2 前端项目规范整理（仅做参考）】

文章图片

setting.json代码如下:

{ "editor.detectIndentation": false, // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.formatOnSave": true, // 每次保存的时候自动格式化 "editor.tabSize": 4, // 一个制表符等于的空格数。 "editor.fontSize": 20, // 控制字体大小(像素) "markdown.preview.fontSize": 18, // 控制 Markdown 预览中使用的字号(以像素为单位) "terminal.integrated.fontSize": 18, // 控制终端的字号(以像素为单位)。 "git.ignoreLimitWarning": true, // 忽略“存储库中存在大量更改”的警告 "editor.suggest.snippetsPreventQuickSuggestions": false, "prettier.jsxSingleQuote": true, "prettier.singleQuote": true, // 修改.vue文件script中的引号为单引号 "javascript.preferences.quoteStyle": "single", // 保存时使用单引号 "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false, // 在函数括号前插入空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": false, // 定义函数参数括号前的空格处理方式 "workbench.startupEditor": "newUntitledFile", "editor.lineNumbers": "on", // 控制行号的显示 "workbench.editor.enablePreview": true, // 打开文件不覆盖 "editor.maxTokenizationLineLength": 2000, "files.trimTrailingWhitespace": true, // 启用后，将在保存文件时删除行尾的空格。 "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.tslint": true, "source.fixAll": true }, "html.format.indentHandlebars": true, "html.format.indentInnerHtml": true, "html.format.wrapAttributes": "preserve-aligned", // 对属性进行换行 "eslint.run": "onSave", // 开启eslint校验 "eslint.alwaysShowStatus": true, "eslint.validate": ["typescript", "javascript", "javascriptreact", "vue"], // eslint开启错误提示（红色波浪线） "prettier.trailingComma": "none", // 尽可能控制尾随逗号的输出。有效选项： '无' - 无尾随逗号 ' es5' - 在ES5中有效的尾随逗号（对象，数组等） 'all' - 尾随逗号尽可能（函数参数） "prettier.printWidth": 120, // 指定每行代码的最佳长度，如果超出长度则换行。 "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "eslint.format.enable": true, "[scss]": { "editor.defaultFormatter": "vscode.css-language-features" }, "[less]": { "editor.defaultFormatter": "vscode.css-language-features" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" } }

经过上述配置以后，在我们保存代码时，那么代码就可以按照我们配置好的规则进行格式化，大大提高代码的可维护性。