Yanxi.me 热爱互联网和技术,喜欢探索的终身学习者

standard JS 代码规范和提交代码时检查

  阎曦    

公司的 Javascript 项目最开始有一个代码规范,也用 jsHint 写了检查脚本。但是随着团队人员的逐渐增加和项目的时间紧迫,有一段时间没有特别强调要去做代码规范的检查。导致后来每次运行 jsHint 脚本都是错误无数,于是更没有人做相关的检查了。由于缺乏代码规范,不同的人有不同的偏好,代码可读性逐渐降低。也出现过几次由于不小心带来的线上 bug,这些完全是可以通过代码检查避免的。于是我决定是时候对代码规范和检查做强制性的要求了。

之前的 JS 代码规范比较简单,也没有涉及到 jsx 部分的规范。不同的人对于 JS 的写法有不同的习惯和看法,其实本没有对错之分。但作为一个开发团队,应该采用相同的规范,不同的人写的代码应该看起来是出自同一个人之手。这样能显著提高代码的可读性,有利于团队合作,避免出现不必要的错误。而且规范一旦制定,一定要有可行的办法强制执行,不然规则再完美再有效,也没有实际的意义。关于代码规范,非常认同下面的几句话:

“对风格的挑刺毫无意义可言。它们必须是指导原则,且你必须遵循。”

–Rebecca Murphey

“成为一个优秀的成功项目管理者的一个条件是,明白按自己的偏好风格写代码是非常不好的做法。如果成千上万的人都在使用你的代码,那么请尽可能通俗易懂地写出你的代码,而非在规范之下自作聪明地使用自己偏好的风格。”

–Idan Gazit

在网上比较了 airbnbIdiomatic.jsjQueryStandard等更多 JS 代码规范后 ,确定把 standardJS 作为团队的 JS 代码标准,主要因为:

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

主要规则如下:

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

强制在提交代码时检查代码是否符合规范

正如上面提到的,执行规范是比规范本身更加重要,再好的规范但没有很好的执行也是没有意义的。只靠强调是很难确保所有人都能完全按照规范,必须有自动化的检查工具才行。利用 Git 提供的 pre-commit hook,可以很好的完成提交时检查的工作,下面是 pre-commit 脚本:

#!/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 文件可以通过执行这段代码自动创建。

使用 overcommit

除了通过上面的方法直接修改 pre-commit 文件,还可以使用 overcommit 工具来管理 Git hoops,步骤大致如下:

  • 安装 rvm: \curl -sSL https://get.rvm.io | bash -s stable
  • 下载 ruby 2.4.0: rvm install 2.4.0
  • 更新 gem 镜像:http://gems.ruby-china.org/
  • 安装 overcommit: gem install overcommit
  • 在 git 项目中初始化 overcommit

    overcommit --install
    overcommit --sign
    
  • 编辑 .overcommit.yml 文件:

    PreCommit:
      Standard:
        enabled: true
        include:
          - '**/*.js'
          - '**/*.jsx'