0%

stardard JS 代码规范及 pre-commit hook

作者:Oz

版权声明:本文为博主原创,转载请注明出处。

今天主要安利一个 JavaScript 代码规范 standard js ,不论你一开始喜不喜欢这个标准,相信我开使用它,你会爱上这个标准!

序言

是的最近团队一直在 React Native 上进行探索性业务开发,在团队项目的合作中代码规范对于我们是一个相当重要的素质要求,对于注重代码质量注重代码可读性的团队尤其重要。由于缺乏代码规范,不同的人有不同的偏好,代码可读性会随着团队成员的更迭逐渐降低,也因为这样有可能带来线上 bug,而这些完全是可以通过代码检查避免的。

是时候强制要求代码规范了

强制两个字是好说不好听,谁也不愿意被强制要求这样那样,但这个事情我觉得懂的人自然懂,没什么好说的,团队合作就应该采用相同的规范,不同的人写的代码应该看起来是出自同一个人之手。

为什么选择 stardard 作为 js 代码规范

面对各种各样的 js 代码规范我们应该怎么选择呢?在比较了 standardairbnbIdiomatic.jsjQuery 等 js 代码规范后 ,极力推荐把 standard 作为团队的 js 代码标准,主要因为:

  1. 简单,无需配置文件
  2. 符合规则的代码相对比较简洁(比如语句不需要分号)
  3. 可以自动修正代码样式(通过 --fix 参数)

当然还有一点,stardard 的重点就是在于避免那些对于编码风格永远不会有答案的争议上。它不允许你自己修改某些规则,就是这么粗暴,所以把时间花在那些真正该解决的问题上吧!

一些主要的规则

  • 用2个空格缩进
  • 字符串用单引号,除非字符串里有单引号
  • 不能有未使用的变量,这是很多 bug 的来源
  • 语句结束不需要分号,可以少些不少字符 It’s fine. Really!
  • 不要以 (, [, or ``` 开头,这是仅有的缺少分号可能带来问题的地方,standard js 会帮你自动检查
  • 关键字后面加空格 if (condition) { ... }
  • 函数名后面加空格 function name (arg) { ... }
  • 永远使用 === 代替 ==,但 obj == null 是允许的,用来检查 null || undefined.
  • 永远处理错误 nodejs 类型的错误 function(err) {}
  • 浏览器全局变量永远加上 windowdocumentnavigator 除外
  • 查看更多规则

pre-commit hook

不管是什么规范得不到有效的执行那都是没有意义,只靠苦口婆心的强调很难确保所有人都能完全按照规范执行,我们是什么人,技术工种耶,能用技术手段的解决的问题我们从来不浪费嘴皮子。利用 Git 提供的 pre-commit hook 可以很好的确保在提交代码时进行规范性检查,从而优雅的保证了自己的体面(骄傲脸)。

1
2
3
4
#!/bin/sh
# Ensure all javascript files staged for commit pass standard code style
git diff --name-only --cached --relative | grep "\.jsx\?$" | xargs standard --verbose | snazzy
if [ $? -ne 0 ]; then exit 1; fi

注意:

  • 文件位于.git/hooks/pre-commit
  • standardsnazzy 需要通过 npm 全局安装 npm install -g standard snazzy

pre-commit 文件可以通过执行以下脚本自动创建。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#!/bin/sh
if [ "`which standard`" = "" ]; then
npm install standard -g
fi

if [ "`which snazzy`" = "" ]; then
npm install snazzy -g
fi

hookDir=./.git/hooks
if [ ! -d $hookDir ]; then
mkdir -p $hookDir
fi

echo '#!/usr/bin/env bash

# Ensure all javascript files staged for commit pass standard code style
if [ "$CHECK" = "0" ]; then
echo "ignore pre commit check"
exit
fi

git diff --name-only --cached --relative | grep "\.jsx\?$" | xargs standard --verbose | snazzy

if [ $? -ne 0 ]; then exit 1; fi
' > .git/hooks/pre-commit

chmod +x .git/hooks/pre-commit

其他

如果你需要忽略某些文件的代码检查,你可以在 package.json 中进行简单的配置:

1
2
3
4
5
6
7
8
9
"standard": {
"ignore": [
"/node_modules"
],
"globals": [
"__DEV__",
"fetch"
]
}

如果你在使用 WebStorm 的话推荐你通过 Eslint 进行静态代码检查,配置非常简单,同样可以在 package.json 中进行如下配置:

1
2
3
4
5
6
7
8
"devDependencies": {
"eslint": "^3.15.0",
"eslint-config-standard": "^6.2.1",
"eslint-plugin-promise": "^3.4.1",
"eslint-plugin-standard": "^2.0.1",
"eslint-config-standard-jsx": "^3.3.0",
"eslint-plugin-react":"^6.10.0"
}

通过执行 npm install 安装这些依赖,然后在设置中开启 Eslint 即可(Languages & Frameworks > JavaScript > Code Quality Tools > Eslint)。

如果你的团队中还没有一个固定的代码规范,亦或想替换一个更适合的代码规范, standard js 绝对是不二之选,用起来吧!

↓↓↓ update 2017.03.23

今天把 WebStorm 版本升级到了 2017.1 ,发现 WebStorm 官方已经在这个版本中加入了 stardard code style ,用起来更加简单方便了,还有什么理由不用起来呢?