如何推行 JS 编码规范
@CSS魔法
2017. 11. 10
（暨如何迁移既有代码）
- 编码规范是什么？
- 如何落实编码规范？
- 工具如何集成？
- 如何迁移既有代码？
(45min)
编码规范是什么？
- 统一代码风格
- 防止错误
- 促进最佳实践
编码规范的 “目的” 是什么？
- 文档
- 工具
编码规范需要包含哪些内容？
- 开发阶段
- CI 阶段 / 部署阶段
如何落实编码规范？
“JSLint will hurt your feelings.”
—— www.jslint.com
如何设计一套可落地的编码规范？
- 简单、易用
- 务实
- 考虑现状（既有代码、写法、人）
- 不挑起无意义的争论
- 要么过，要么不过
- 尽可能宽松
- (暂时) 不关心代码风格
- 只关心 “可能有问题” 的代码
设计思路：
- 编写文档
- 提供工具
- 达成一致
- 迁移既有代码
如何落实编码规范？
- 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!
如何推行 JS 编码规范（暨如何迁移既有代码）
By CSS魔法
