如何推行 JS 编码规范

@CSS魔法

2017. 11. 10

（暨如何迁移既有代码）

  • 编码规范是什么？
  • 如何落实编码规范？
  • 工具如何集成？
  • 如何迁移既有代码？

(45min)

编码规范是什么？

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

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

  • 文档
  • 工具

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

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

如何落实编码规范？

“JSLint will hurt your feelings.”

—— www.jslint.com

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

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

设计思路：

  1. 编写文档
  2. 提供工具
  3. 达成一致
  4. 迁移既有代码

如何落实编码规范？

  • JSLint
  • JSHint
  • JSCS
  • ESLint

常见的 JS 校验工具：

最流行、功能最丰富、

高度可配置、插件化、

易扩展……

✓

ESLint 校验规则

  • 内置：235+ 条
  • 启用：76+ 条

可能会持续增加……

规范相关文档

https://github.com/*******/*****

工具如何集成？

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

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

补充：主流框架的脚手架通常都已集成 ESLint。

  • ESLint CLI
  • IDE 内置功能 / 插件

开发阶段如何使用 ESLint ？

如何设置 ESLint CLI ？

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

如何使用 ESLint CLI ？

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

有没有更简单的使用方式？

$ cd path/to/my/project
$ npm install

$ npm run lint-js

当然，需要提前定义好开发依赖和 npm script

如何设置 IDE ？（WebStorm 原生支持）

IDE 的提示效果：

如何迁移既有代码？

其实一个命令就可以了……


$ eslint --fix my.js

……才怪！

居然也有文档

https://github.com/*******/*****
  • no-undef
  • eqeqeq
  • no-use-before-define
  • no-loop-func
  • no-extra-boolean-cast
  • no-constant-condition
  • no-implicit-coercion
  • no-used-expressions
  • ...

最容易撞的线： 

no-undef

禁止使用未定义的变量。

 

其实大多数时候我们是在引用一个全局变量。 

//namespace
window.Auth = { /* ... */ }

//init
if (page && Auth[page]) {
    Auth[page]()
}
//namespace
window.Auth = { /* ... */ }

//init
if (page && Auth[page]) {
    Auth[page]()
}
//namespace
window.Auth = { /* ... */ }

const Auth = window.Auth

//init
if (page && Auth[page]) {
    Auth[page]()
}
no-empty

禁止出现空的代码块。

 

包括 if / for / try / catch 等。

if (foo) {

} else {
    bar()
}
if (foo) {

} else {
    bar()
}
if (!foo) {
    bar()
}
try {

    bar()

} catch (e) {}
try {

    bar()

} catch (e) {}
try {

    bar()

} catch (e) {
    // 静默失败
}
no-empty-function

禁止出现空函数。

(接下来看文档吧～)

Q & A

Thank You!

Made with Slides.com