Vue 3 企业级项目实战课
杨文坚
前阿里前端 Leader,前腾讯 IMWeb 团队高级前端工程师
6908 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 47 讲
实战篇 (19讲)
Vue 3 企业级项目实战课
15
15
1.0x
00:00/00:00
登录|注册

07|项目代码规范:如何成为一名合格的团队协作工程师?

你好,我是杨文坚。
这是我们基础篇部分的最后一节课,来聊聊 Vue 3 项目开发的代码规范实践。我们会以企业级项目的视角,实现项目的代码风格限制和代码质量检查,为你后续 Vue 3 项目进阶开发的代码规范打好基础。
为什么要专门留一节课来讲代码规范呢?
我们都知道,企业级项目通常都是团队多人合作进行开发和维护的。多人合作必然就逃不开个人的开发习惯和技术能力的差异,而技术能力的不足又会很直接体现在平时的坏习惯之中。比如说,有些开发者习惯性地在 JavaScript 代码里写一堆 console.log 代码进行功能调试,这个习惯其实很不好,如果在项目里,console.log 频繁使用不规范是很容易导致内存泄露的。
但开发者也是人,或多或少都有“坏习惯”,特别是遇到项目工期紧张,经常顾不上项目代码的规范和质量,只要功能实现就好了。
这些不可控的项目和人员因素,会让不规范代码慢慢积累,各种“小坑”密集沉淀,量变引发质变形成“大坑”,最终的结果就是项目代码难以维护,项目功能经常出问题。
为了规避这些问题,我们先把 Vue 3 项目的代码规范梳理成多个维度来进行讲解。

Vue 3 项目代码规范有哪些方面?

首先,我们必须要理清楚一个概念,Vue 3 项目说到底本质是 JavaScript 项目,既然是 JavaScript 项目,那我们就可以把项目代码规范分解成以下三个方面:
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

在Vue 3项目开发中,团队协作工程师需要遵循代码规范以确保代码质量和团队合作效率。本文从使用强类型语言开发JavaScript、代码格式规范和代码质量检查三个方面介绍了Vue 3项目的代码规范。强调了使用TypeScript可以减少潜在问题,统一代码风格工具ESLint和Prettier的重要性,以及通过代码质量检查工具ESLint减少潜在问题。文章还详细介绍了在Vue 3项目中快速使用TypeScript的方法,包括安装依赖、配置TypeScript的配置文件、修改源码文件的TypeScript文件类型以及给项目源码文件的数据添加TypeScript类型声明。总结来说,本文为读者提供了Vue 3项目代码规范的重要性和实践方法,以及快速上手TypeScript的指导,对于团队协作工程师在Vue 3项目开发中具有一定的参考价值。文章还介绍了如何在VS Code中使用ESLint和Prettier规范代码格式,以及如何结合git流程进行自动化的ESLint代码质量检查。通过本文的指导,读者可以更好地理解项目代码规范的重要性,提升代码质量,降低维护成本,以及加强团队合作和项目可读性。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《Vue 3 企业级项目实战课》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(10)

  • 最新
  • 精选
  • 初烬
    如果能加上editorconfig就更好了

    作者回复: 您好,你的建议很不错。项目代码规范涉及到的配置有很多,本课受限于篇幅,无法一一都进行讲解。

    2022-12-05归属地:陕西
    2
  • yy
    团队协作少不了代码分支管理,这一块可以讲讲吗

    作者回复: 您好,团队项目分支管理,可以先定义分支类型,比如: 1. master分支,只有唯一一个分支。代码最终合并的主干分支。 2. release分支,只有唯一一个分支,代码每次发布到产线的分支。 3. test 分支,只有唯一一个分支,用来项目测试或者预发布验证。 4. dev-xxx 分支,可以多人开发多个分支。 有了分支的分类,下来就是分支管理。管理步骤如下: 1. 开发过程用 dev-xxx分支。 2. 需要发布前先dev-xxx分支合并到test分支,进入测试环境和预发布环境验证测试。 3. 项目要发布时候,从test分支合并到master分支,再进入生产环境部署。 4. 生产环境部署后,从master分支合并到release分支,再打上tag记录备份一次发布内容。 以上只是常见企业的git分支管理方式,不一定是统一的方式,仅供参考。

    2022-12-11归属地:广东
    1
  • Castie!
    hasky

    作者回复: good

    2022-12-07归属地:中国香港
    2
    1
  • 丫头
    配置文件 .eslintrc 的后缀有什么讲究吗?目前有见到过:1-没有后缀,2-.js后缀,3-.cjs后缀。

    作者回复: 您好,.eslintrc文件的后缀可以支持多种文件格式的,您可以参考官网文档 https://eslint.org/docs/latest/use/configure/configuration-files

    2022-12-29归属地:广东
    4
  • Geek_b640fe
    接着再创建 VS Code 扩展插件的配置文件 .vscode/extensions.json,声明我们项目需要用到的插件,这样子只要用 VS Code 打开这个项目,就可以提醒开发者去安装相关插件了。 有提醒吗,我没看到有提醒噢。

    作者回复: 您好,只要是本地电脑VS Code没安装过的插件,重新打开VS Code就会有提醒,一般在右下角有提示框。

    2022-12-13归属地:广东
  • 风太大太大
    我之前一个很厉害的领导跟我说过,他很拒绝代码格式化工具。 站在他的角度,每个开发都需要养成一个良好的代码风格,他觉得是一个必修技能。 如果按照他的观点就是约束大于规范,需要自己养成好的习惯,所以有的时候我也在怀疑,现在大家都这样用工具约束自己写代码,是不是就是在掩盖自己的某些缺陷呢。

    作者回复: 所有代码规范都是管理人员的管理工具,本质上为了避免大神写出看不懂的代码,避免傻子写出有缺陷的代码。注意,这些都是管理工具,最终都是服务于多人协同的,而作出的妥协。

    2022-12-07归属地:中国香港
    2
  • ZR-rd
    可以使用 githooks 在代码提交前执行 eslint 检查和类型检查

    作者回复: 您好,你的答案是正确的,就是基于git hooks对git的每个环节做代码检查和处理。

    2022-12-05归属地:北京
  • 前端WLOP
    typescript的interface和type分别在什么场景下用
    2023-05-06归属地:上海
  • 静心
    请问ESLint 和 Prettier的关系和区别分别是什么?
    2022-12-11归属地:山西
    1
  • 风太大太大
    一不小心就是课程进度21%了
    2022-12-07归属地:湖北
收起评论
显示
设置
留言
10
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部