vue2 前端项目规范整理(仅做参考)

Power
说明:

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

代码规范参考:

京东前端规范文档

腾讯前端规范文档

一 插件:

针对vue2这种结构比较单纯的项目,用以下插件(Prettier-Code formatter)足以对代码进行最基本的格式化。
为提高团队协作效率,故没有使用eslint, 保留一定的冗余供大家自行调节。

图片.png

二 项目配置.vscode

优点: 在单个项目的根目录下配置.vscode 可以针对当前项目进行个性化配置(但主要还是要遵循开发团队基本规范)。若非必要,请勿在vscode全局进行代码格式化配置(本人曾经深受其害...)。

如下图所示:

图片.png

图片.png

图片.png

图片.png

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, // 引号为单引号
    "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", // 尽可能控制尾随逗号的输出。 有效选项: '无' - 无尾随逗号 ' es5' - 在ES5中有效的尾随逗号(对象,数组等) 'all' - 尾随逗号 尽可能(函数参数)
    "prettier.printWidth": 120, // 指定每行代码的最佳长度, 如果超出长度则换行。
    "prettier.tabWidth": 4, //  "prettier插件 一个制表符等于的空格数。
    "[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个空格比较好,阅读代码感觉会相对好很多。

图片.png

四 注释

多行注释: 个人非常建议在methods中使用多行注释,好处如下(细品):

图片.png

多行注释参考链接

图片.png

五 css样式覆盖问题

图片.png

六 常见代码规范问题:

6.1 请求方法优化解决方案

请比较以下两段代码:

图片.png

优化之后的代码如下图(图中说明了优化的部分):

图片.png

6.2 if else 判断条件优化解决方案:

我曾看到的代码如下(令人抓狂):

图片.png

当然,优化之后:

图片.png

七 组件命名

对于组件名称我个人倾向于 短横线 写法, 优点是: 一目了然。请看下图,你愿意花时间去把驼峰单词拆开后再翻译过来阅读吗???

图片.png

图片.png

阅读 305
0 声望
0 粉丝
0 条评论
你知道吗?

0 声望
0 粉丝
宣传栏