作者:Oz
版权声明:本文为博主原创,转载请注明出处。
今天主要安利一个 JavaScript 代码规范 standard js ,不论你一开始喜不喜欢这个标准,相信我开使用它,你会爱上这个标准!
序言
是的最近团队一直在 React Native
上进行探索性业务开发,在团队项目的合作中代码规范对于我们是一个相当重要的素质要求,对于注重代码质量注重代码可读性的团队尤其重要。由于缺乏代码规范,不同的人有不同的偏好,代码可读性会随着团队成员的更迭逐渐降低,也因为这样有可能带来线上 bug,而这些完全是可以通过代码检查避免的。
是时候强制要求代码规范了
强制
两个字是好说不好听,谁也不愿意被强制要求这样那样,但这个事情我觉得懂的人自然懂,没什么好说的,团队合作就应该采用相同的规范,不同的人写的代码应该看起来是出自同一个人之手。
为什么选择 stardard 作为 js 代码规范
面对各种各样的 js
代码规范我们应该怎么选择呢?在比较了 standard、airbnb、Idiomatic.js、jQuery 等 js 代码规范后 ,极力推荐把 standard 作为团队的 js
代码标准,主要因为:
- 简单,无需配置文件
- 符合规则的代码相对比较简洁(比如语句不需要分号)
- 可以自动修正代码样式(通过
--fix
参数)
当然还有一点,stardard 的重点就是在于避免那些对于编码风格永远不会有答案的争议上。它不允许你自己修改某些规则,就是这么粗暴,所以把时间花在那些真正该解决的问题上吧!
一些主要的规则
- 用2个空格缩进
- 字符串用单引号,除非字符串里有单引号
- 不能有未使用的变量,这是很多 bug 的来源
- 语句结束不需要分号,可以少些不少字符 It’s fine. Really!
- 不要以
(
,[
, or ``` 开头,这是仅有的缺少分号可能带来问题的地方,standard js 会帮你自动检查 - 关键字后面加空格
if (condition) { ... }
- 函数名后面加空格
function name (arg) { ... }
- 永远使用
===
代替==
,但obj == null
是允许的,用来检查null || undefined
. - 永远处理错误 nodejs 类型的错误
function(err) {}
- 浏览器全局变量永远加上
window
,document
和navigator
除外 - 查看更多规则
pre-commit hook
不管是什么规范得不到有效的执行那都是没有意义,只靠苦口婆心的强调很难确保所有人都能完全按照规范执行,我们是什么人,技术工种耶,能用技术手段的解决的问题我们从来不浪费嘴皮子。利用 Git 提供的 pre-commit hook 可以很好的确保在提交代码时进行规范性检查,从而优雅的保证了自己的体面(骄傲脸)。
1 | !/bin/sh |
注意:
- 文件位于
.git/hooks/pre-commit
standard
和snazzy
需要通过 npm 全局安装npm install -g standard snazzy
pre-commit 文件可以通过执行以下脚本自动创建。
1 | !/bin/sh |
其他
如果你需要忽略某些文件的代码检查,你可以在 package.json
中进行简单的配置:
1 | "standard": { |
如果你在使用 WebStorm
的话推荐你通过 Eslint
进行静态代码检查,配置非常简单,同样可以在 package.json
中进行如下配置:
1 | "devDependencies": { |
通过执行 npm install
安装这些依赖,然后在设置中开启 Eslint
即可(Languages & Frameworks > JavaScript > Code Quality Tools > Eslint
)。
如果你的团队中还没有一个固定的代码规范,亦或想替换一个更适合的代码规范, standard js 绝对是不二之选,用起来吧!
↓↓↓ update 2017.03.23
今天把 WebStorm
版本升级到了 2017.1
,发现 WebStorm
官方已经在这个版本中加入了 stardard code style
,用起来更加简单方便了,还有什么理由不用起来呢?