如何推行 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 ？
- 编写文档
- 提供工具
- 达成一致
- 迁移既有代码
如何落实编码规范？
✓
✓
✓
当前规范概览
规范相关文档
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!
如何推行 JS 编码规范（续）：如何迁移既有代码
By zpbx
