代码规范
每个团队、每个人都有自己的代码规范。
规范的代码可以让整个项目的编码风格更统一。
好在目前的前端生态有许多工具帮我们解决这个问题。
1. ESLint
可组装的JavaScript和JSX检查工具
1.1 安装 ESLint
ESLint
可以直接使用 npm
安装。
首先在空目录创建一个项目,然后安装 ESLint
。
npm init -y
npm i eslint -D
安装后修改 package.json
的 scripts
配置项。
{
"scripts": {
"lint": "eslint ./src/**/*.*"
}
}
eslint
命令就可以执行 eslint
,./src/**/*.*
表示检查 src
目录开始的所有文件。
接下来创建配置文件:
1.2 创建配置文件
eslint
可以用多种格式的配置,如 JSON
、YAML
,通常会选则 .js
文件,因为可以方便书写一些环境相关的逻辑、写注释等。
// .eslintrc.js
module.exports = {
'rules': { // 椒盐规则
'indent': [ // 锁进为2个一锁 不然报错
'error',
,
],
'quotes': [ // 引号必须使用单引号 不然报错
'error',
'single',
],
'semi': [ // 语句结束必须要分号 不然报错
'error',
'always',
],
},
};
// ./src/index.js
var number =
if (number < ) {
console.log("咕咕?");
}
完成后,就可以执行 npm run lint
命令了。
可以看到其炸了三个 error
级别的通知,因为在配置的时候提供的级别就是 error
。
第一个 Missing semicolon
,就是表示没有分号。
第二个 Expected indentation of 2 spaces but found 4
,表示应该需要2个锁进,但其实有4个。
第三个 Strings must use singlequote
,表示字符串应使用单引号包裹。
// ./src/index.js
var number = ;
if (number < ) {
console.log('咕咕?');
}
如果放心把修复的权利交给 eslint
,可以使用 eslint ./src/**/*.* --fix
命令,来修复这些报错。
// package.json
{
"scripts": {
"fix": "eslint ./src/**/*.* --fix"
}
}
2. 小结
ESLint
的规则有许多,还有很多大厂使用的预设规范,ESLint
也采用了配置项的方式可以配置。
对团队规范的检查其实就是将团队内的规则映射到 ESLint
的规则上。
许多编辑器和 IDE 都有对 eslint
规则的分析,从而对代码进行静态检查,在推送代码前就可以处理掉很多问题,通常情况下代码的规范检查发生在 git commit
的时候,git
提供了对应阶段的钩子。
如果需要对样式进行检查,可以考虑使用 stylelint
, 使用方式和 eslint
大同小异。