作者：blue

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

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

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

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

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

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

面对各种各样的 js 代码规范我们应该怎么选择呢？在比较了 standard、airbnb、Idiomatic.js、jQuery 等 js 代码规范后 ，极力推荐把 standard 作为团队的 js 代码标准，主要因为：

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

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

2.2 一些主要的规则

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

3、pre-commit hook

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

#!/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
• standard 和 snazzy 需要通过 npm 全局安装 npm install -g standard snazzy

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

#!/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 中进行简单的配置：

"standard": {
    "ignore": [
      "/node_modules"
    ],
    "globals": [
      "__DEV__",
      "fetch"
    ]
  }

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

"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 ，用起来更加简单方便了，还有什么理由不用起来呢？