如何推行 JS 编码规范 (续)

@CSS魔法

2017. 11. 10

如何迁移既有代码

  • 前情回顾
  • 当前规范概览
  • 如何迁移既有代码

前情回顾

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

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

  • 要么过，要么不过
  • 尽可能宽松
  • (暂时) 不关心代码风格
  • 只关心 “可能有问题” 的代码

设计思路：

  • 文档
  • 工具

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

  • 开发阶段
  • CI 阶段 / 部署阶段
  • CLI
  • IDE 插件 / 内置

开发阶段如何使用 ESLint ？

如何设置 CLI ？

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

如何使用 CLI ？

$ cd my/haojing/htdocs/assets
$ eslint .

有没有更简单使用方式？


$ cd my/haojing/htdocs/assets

$ npm install

$ npm run lint-js

如何设置 IDE ？

如何设置 IDE ？

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

如何落实编码规范？

✓

✓

✓

当前规范概览

规范相关文档

https://github.com/baixing/Notes

ESLint 校验规则

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

可能会持续增加……

文件位置

htdocs/assets/mobile/.eslintrc.js

很快会扩展到 PC 站和构建脚本！

覆盖面

手机站脚本

如何迁移既有代码

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


$ eslint --fix my.js

……才怪！

居然也有文档

https://github.com/baixing/Notes
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