我们的前端技术2015--编码规范

1:编码规范

1.1 javascript 编码规范

编码规范的选择是件非常容易的事情,网上有非常多得选择,我们使用的是 airbnb 团队在 GitHub 维护的airbnb/javascript

选择这个规范主要因为

  • 它是目前 GitHub 上最有热度的规范,有恐怖的24000+个 star
  • 支持 ES6 版本(我们现在的项目全面使用 ES6进行开发)
  • 官方提供 ESlint 插件支持

规范制定容易,执行起来确实非常困难,很多团队都有规范的制定,但是后续业务一忙,CodeReview 只是走走形式,让规定形同虚设。

我们使用 ESlint 与 git hook 进行提交前检查。

1.2 javascript 编码规范自动可视化检查

上面有提到airbnb/javascript有提供 ESlint 插件。我们可以利用这个插件可以在开发过程中实时看到当前代码的问题。

ESlint 不仅可以提示编码规范的问题,同时会对 javascript 进行静态质量检查,帮助避免开发错误。

我们统一使用Atom进行开发,同时利用linter这款插件进行可视化错误提示。如下图所示:

1.3 javascript代码自动格式化

我们希望有一个自动工具能帮我们把代码进行自动格式成符合我们代码规范的代码。我们使用的是esformatter,它同样有 Atom的插件工具。这个插件可以让我们在保存页面的时候自动格式化代码。 esformatter 和 ESlint 同样基于 espree开发,所以他们的配置都保持一致。

espree是一个 将javascript转换成 AST 的工具,它是由esprima fork 过来,由 ESlint 团队维护。由于 espree 的 缘故,esformatter 和 ESlint的功能非常强大。

除了常规的代码格式化,我们还使用了esformatter得多个插件,来帮助我们提高代码质量

1.4 代码提交前的代码质量验证

我们希望代码在 CodeReview 前就能够确保通过 ESlint 的测试。所以我们使用 git hook 来做这件事情。

我们使用的pre-commit工具,让 git hook 和 npm scripts 进行绑定。

配置类似这样

{
  "name": "test",
  "version": "0.0.0",
  "main": "index.js",
  "scripts": {
    "lint": "eslint xx xxx "
  },
  "pre-commit": [
    "lint"
  ]
}

当你提交代码时,会先运行 eslint校验,只有通过测试才可以进行代码提交。

1.5 总结

我们都喜欢制定规范,却又讨厌执行规范。所以我们希望我们尽可能的使用自动化工具来保证我们的代码都能够符合规范。

所以在推进规范前,我们应该先想想你的工具准备好了吗?

: ) boke.io