说明：以下内容仅根据本人开发经验总结，供大家参考，还请多多指教。那我们就简单总结一下vue2项目的前端代码吧。本文不涉及typeScript。请在以下配置后重启vscode。代码规范参考：京东前端规范文档腾讯前端规范文档1插件：对于vue2等结构比较简单的项目，下面这个插件（Prettier-Codeformatter）就可以格式化代码了最基本的水平。为了提高团队协作的效率，没有使用eslint，预留了一定的冗余，供大家调整。两个项目配置.vscode优点：在单个项目根目录下配置.vscode，可以针对当前项目进行个性化设置（但主要遵循开发团队的基本规范）。如非必要，请不要在vscode中全局进行代码格式化配置（我已经苦了。。。）。如下图所示：setting.json代码如下：{"editor.detectIndentation":false,//vscode默认开启根据文件类型自动设置tabsize的选项"editor.formatOnSave":true,//每次保存时自动Format"editor.tabSize":4,//一个制表符等于空格数。"editor.fontSize":20,//控制字体大小（以像素为单位）"markdown.preview.fontSize":18,//控制在Markdown预览中使用的字体大小（以像素为单位）"terminal.integrated.fontSize":18,//控制终端的字体大小（以像素为单位）。"git.ignoreLimitWarning":true,//忽略“存储库更改过多”的警告单引号"javascript.preferences.quoteStyle":"single",//保存时使用单引号"javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces":false,//在函数括号前插入空格"javascript.format.insertSpaceBeforeFunctionParenthesis":true,//在函数参数括号前定义空格处理方式"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",//包装属性"prettier.trailingComma":"none",//尽可能控制尾随逗号的输出。有效选项：'none'-没有尾随逗号'es5'-ES5（对象、数组等）中的有效尾随逗号'all'-尾随逗号尽可能多（函数参数）"prettier.printWidth":120,//指定每行代码的最佳长度，如果超过长度，就会断行。"prettier.tabWidth":4,//"prettierplugin一个tab对应的空格数。"[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":"esbenp.prettier-vscode"}}经过上面的配置，当我们保存代码的时候，就可以按照我们配置的规则对代码进行格式化，大大提高了代码的可维护性。三关于空格，个人建议4个空格比较好，读代码的感觉会相对好很多。四注释多行注释：个人非常推荐在方法中使用多行注释。好处如下（详情）：多行注释参考链接五个css样式覆盖问题六个常见代码规范问题：6.1请求方法优化方案请对比以下两段代码：优化后的代码如下图所示（优化部分如图）：6.2ifelse判断条件优化方案：我看过的代码如下（狂人）：当然，优化后：七组件命名对于组件名称，我个人更喜欢连字符方法，优点是：一目了然。请看下图，你愿意花时间拆解驼峰词再翻译阅读吗？？？
