开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情
在开发过程中，代码规范是相当重要的。指在让程序员在编码时遵守的规则，是为了让程序员编写易于阅读、可维护的代码。当团队中每个人的代码都风格一致，阅读起来更顺畅，降低维护成本，促进团队合作，有助于自身成长。
那么，如何制定代码规范呢？
如何制订代码规范
代码规范一般包含了代码格式规范、变量和函数命名规范、文档注释规范等等。
- 代码格式
一般是指代码缩进使用空格还是 Tab、每行结尾要不要加分号、左花括号需不需要换行等等。
- 命名规范
命名规范一般指命名是使用驼峰式、匈牙利式还是帕斯卡式；用名词、名词组或动宾结构来命名，变量命名和函数命名的侧重点不同。变量命名的重点是表明这个变量“是什么”，倾向于用名词命名。而函数命名的重点是表明这个函数“做什么”，倾向于用动宾结构来命名（动宾结构就是 doSomething）。
- 文档注释
文档注释比较简单，例如单行注释使用 //，多行注释使用 /**/。
- 注释规范
有些人可能认为，好的代码是不需要写注释的。其实这种说法有点片面。写注释的目的也是为了让代码更加容易理解，以后出问题了，也能快速定位问题，从而解决问题。所以应该这么理解：不是不写注释，而是不写垃圾注释。那么什么是垃圾注释？啰里吧嗦一大堆讲不到重要的就是垃圾注释，注释应该着重描述“做了什么”而不是“怎么做”。
如何检查代码规范
规范制定下来了，可以使用工具校验代码格式及利用 code review 审查变量命名、注释。
接下来我们来看如何使用工具来校验代码格式。
- ESLint
- 下载依赖
// eslint-config-airbnb-base 使用 airbnb 代码规范
npm i -D babel-eslint eslint eslint-config-airbnb-base eslint-plugin-import
- 配置
.eslintrc文件
{
"parserOptions": {
"ecmaVersion": 2019
},
"env": {
"es6": true,
},
"parser": "babel-eslint",
"extends": "airbnb-base",
}
- 在
package.json的scripts加上这行代码"lint": "eslint --ext .js test/ src/"。然后执行npm run lint即可开始验证代码。代码中的test/ src/是要进行校验的代码目录，这里指明了要检查test、src目录下的代码。
不过这样检查代码效率太低，每次都得手动检查。并且报错了还得手动修改代码。
为了改善以上缺点，我们可以使用 VSCode。使用它并加上适当的配置可以在每次保存代码的时候，自动验证代码并进行格式化，省去了动手的麻烦。
- Stylelint
Stylelint 是一个开源的、用于检查 CSS 代码格式的开源工具。
