如何推行 JS 编码规范

@CSS魔法

2017. 09. 29

  • 编码规范是什么？
  • 如何落实编码规范？
  • 工具与集成
  • 典型规则解析

编码规范是什么？

  • 统一代码风格
  • 防止错误
  • 促进最佳实践

编码规范的 “目的” 是什么？

  • 文档
  • 工具

编码规范需要包含哪些内容？

  • 开发阶段
  • CI 阶段 / 部署阶段

如何落实编码规范？

“JSLint will hurt your feelings.”

—— www.jslint.com

  1. 编写文档
  2. 部署工具
  3. 达成一致

如何落实编码规范？

如何设计一套可落地的编码规范？

  • 简单、易用
  • 务实
  • 考虑现状（既有代码、写法、人）
  • 不挑起无意义的争论
  • 要么过，要么不过
  • 尽可能宽松
  • 不关心代码风格
  • 只关心 “可能有问题” 的代码

设计思路：

工具与集成

  • JSLint
  • JSHint
  • JSCS
  • ESLint

常见的 JS 校验工具：

最流行、功能最丰富、

高度可配置、插件化、

易扩展……

✓

  • CLI
  • IDE 插件 / 内置
  • Gulp: gulp-eslint
  • Webpack: eslint-loader

ESLint 如何集成到现有工作流？

如何设置 CLI ？

$ npm i -g eslint
$ npm i -g babel-eslint

如何使用 CLI ？

$ cd path/to/my-project
$ eslint .

如何设置 IDE ？

如何设置 IDE ？

典型规则解析 

  • no-undef
  • eqeqeq
  • no-use-before-define
  • no-loop-func
  • no-extra-boolean-cast
  • no-constant-condition
  • no-implicit-coercion
  • no-used-expressions
  • curly

最容易撞的线：

Q & A

Thank You!

Made with Slides.com