参考
- 如何更优雅的编写CSS代码
- 聊聊编程原则(OOP,SOLID)
- 你真的了解 SOLID 吗
- 为何大量设计模式在动态语言中不适用?
- conventional-changelog
- How to Write a Git Commit Message
- Semantic Versioning 2.0.0
- Codecov vs Coveralls: What are the differences?
- codecov docs
- fruit
- 持续集成
- bable-jest
- JavaScript compiler: Babel
- JavaScript Testing Framework: jest
资源
- lint-staged
- yorkie
- husky
- commitlint
- eslint
- chalk
- semantic-release
- travis
- jest
- coveralls
- codecov
- cross-env
项目结构
代码规范
规范的代码能减少团队成员间的沟通成本, 而规范\优雅的 Standard 代码, 则使人赏心悦目!
Standard
Standard 是现在 JS 最流行的规范, 也是能让你的代码最简洁的规范.
细则如下:
- 使用两个空格 – 进行缩进
- 字符串使用单引号 – 需要转义的地方除外
- 不再有冗余的变量 – 这是导致 大量 bug 的源头!
- 无分号 – 这没什么不好。不骗你!
- 行首不要以
(
,[
, or `\
开头, 这是省略分号时唯一会造成问题的地方 - 关键字后加空格
if (condition) { ... }
- 函数名后加空格
function name (arg) { ... }
- 坚持使用全等
===
摒弃==
一但在需要检查null || undefined
时可以使用obj == null
。 - 一定要处理 Node.js 中错误回调传递进来的 err 参数。
- 使用浏览器全局变量时加上 window 前缀 – document 和 navigator 除外
- 避免无意中使用到了这些命名看上去很普通的全局变量, open, length, event 还有 name。
你可以在这里查看实际的例子以加深理解
ESLints
ESLints 是一个实时代码格式检查工具, 它也可以在你保存文件修改时自动按照你定义好的 JS 代码规范来格式化你的代码.
你可以参考下面这篇文章以及 ESLints 官方文档配置适合自己的 ESLints 配置文件:
深入浅出 eslint ——关于我学习 eslint 的心得 —— @掘金 时长: 5分钟
ESLints 的配置文件一般包含在脚手架提供的项目模板中,
不需要我们自己写,
不过参考上面的文档现配一个也很简单.
如果你需要自己写 eslint 插件的话:
在 ESLints 中使用 Standard 规范
在 vscode 编辑器中配置 Prettier-Standard 和 ESlint 扩展
1 | /* |
lint-staged , husky 和 commitlint
在我们要将代码 commit 到本地仓库时, 对 commit message 的格式和 staged files 的代码样式进行规范, 对一个合格的团队来说是非常重要的!
而lint-staged , husky 和 commitlint 就是可以帮助我们对 commit message 的格式和 staged files 的代码样式进行规范的工具.
lint-staged 与 eslint 结合使用
引入 lint-staged 和 eslint
1 | npm i -D lint-staged eslint |
package.json
1 | { |
git hook husky
引入 husky
1 | npm i -D husky |
简单的使用 verifyCommit.js
package.json
1 | { |
其中 的 verifyCommit.js
可参考 vue-next 项目
使用 Angular 团队的 commit 约定 : conventional-changelogverifyCommit.js
1 | // Invoked on the commit-msg git hook by yorkie. |
注意引入的开发时依赖: chalk
1 | npm i -D chalk |
husky 结合 commitlint
commitlint 是标准化的 git commit lint 工具
type(scope?): subject
- What type of changes am I committing?
- What scope is affected by my changes?
- subject: When applied, the software will …
1 | npm install --save-dev @commitlint/config-angular @commitlint/cli |
package.json
1 | { |
commitlint.config.js
1 | module.exports = { extends: ['@commitlint/config-angular'] } |
semantic-release (语义化版本)
1 | npm i -D semantic-release |
package.json
1 | "scripts": { |
semantic-release 结合 travis-ci 和 travis-deploy-once 自动化发布
1 | npm i -D travis-deploy-once |
package.json
1 | "scripts": { |
.travis.yml
1 | language: node_js |
jest
安装 cross-env
1 | npm i -D cross-env |
安装 [core-js][]
1 | npm -D i core-js@3 |
安装 bable 和 jest
1 | npm i -D @babel/core @babel/preset-env @babel/cli babel-jest jest |
.babelrc
1 | { |
jest.config.js
1 | // For a detailed explanation regarding each configuration property, visit: |
package.json
1 | { |
codecov
安装
1 | npm install codecov --save-dev |
package.json
1 | { |