持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情
前言
作为一个前端开发者，养成良好的编程习惯相当重要，此篇文章笔者将从代码编写规范、命名规范和提交规范入手，讲讲如何写出一套优质且易读懂的代码，减轻团队负担。
插件
在团队开发中，多人开发同一个项目，由于个人编码习惯不同，一个项目中最终的代码风格可能差别很大，所以需要通过约束来保证代码风格的统一。
团队关于代码风格遵循两个基本原则：
- 少数服从多数
- 用工具统一风格
在 vscode 中，我们可以通过安装插件让代码以及语法得到规范，这里我主要介绍三种常用的插件。
Prettier
Prettier 是一款强大的代码格式化工具，它支持我们目前大部分语言处理，包括 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Vue、GraphQL、JSON、Markdown 等，这代表着，你几乎可以用一个工具能搞定所有的代码格式化问题。
你可以直接点击安装，也可以通过命令在项目目录下安装 Prettier：
npm i prettier -D
安装成功后，编辑器默认的格式化处理就会被 Prettier 代替，默认快捷键是 alt + shift + f，Mac 上默认快捷键是 shift + option + f。
我们也可以在项目根目录下添加配置文件 .prettierrc.js 来进行配置，这样设置之后，编译器就会按你的配置来进行格式化：
module.exports = {
"printWidth": 80, // 一行的字符数，如果超过会进行换行，默认为80
"tabWidth": 2, // 一个tab代表几个空格数，默认为80
"useTabs": false, // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
"singleQuote": false, // 字符串是否使用单引号，默认为false，使用双引号
"semi": true, // 行位是否使用分号，默认为true
"trailingComma": "none", // 是否使用尾逗号，有三个可选值"<none|es5|all>"
"bracketSpacing": true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
"parser": "babylon" // 代码的解析引擎，默认为babylon，与babel相同。
}
其他的配置大家可以参考一下官方文档：prettier.io/docs/en/opt…
Vetur
Vetur 这里就不多介绍了，Vetur 的默认格式化工具也是使用的 Prettier，会自动检索项目根目录下的 Prettier 配置文件进行格式化，非常亲近，建议两者一起搭配使用。直接安装插件即可。
ESLint
ESLint 属于一种 QA 工具，是一个 ECMAScript/JavaScript 语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
你可以直接点击安装，也可以通过命令在项目目录下安装 ESLint：
npm i eslint -D
通过命令 npx eslint --init 进行选择配置，之后项目根目录下就会多一个 eslint 的配置文件 .eslintrc.js，你可以进行相关配置。参考：t.zoukankan.com/codexlx-p-1…
命名
良好的命名规范尤为重要，它使得我们写的代码可读性更好，也可以让同伴阅读我们的代码时不会太头疼，例如使用语义化标签，切记不要使用中文缩写。
关于前端的命名规范，大家可以参考下这篇文章：前端开发规范：命名规范、html规范、css规范、js规范
提交
在团队中代码提交（git commit）会有各种各样的风格，甚至有些人根本没有 commit 规范的概念，所以在我们回头去查找在哪个版本出现问题的时候，很难快速定位到问题。为了项目的规范化，代码提交规范就显得尤为重要！
关于代码提交的规范，大家可以参考阮一峰老师的这篇文章：Commit message 和 Change log 编写指南
其他
工欲善其事必先利其器，在开发过程中，熟练地使用快捷键能够提高我们的开发效率，以 Mac 和 vscode 为例，下面是一些常用的快捷键：
参考：www.zhangshilong.cn/work/342140…
总结
以上就是笔者对于前端代码规范所做的一些小结，如果大家觉得还可以的话，不要忘了点赞呦 :)
