代码规范

建立团队代码规范的意义和原则

原因

增强团队协作效率
提高代码质量
减缓系统腐化速度

原则

团队成员统一意见
可读性第一为目标
循序渐进的建立规范

社区中的成熟规范

html/css

Google HTML/CSS/JS规范
Airbnb Style规范（包括CSS和Sass）

JavaScript

Aribnb JavaScript 规范
JavaScript Standard Style

框架

Vue Style Guide
Airbnb React/JSX Style Guide

利用工具建立代码规范

ESLint -- 高度可配置JavaScript静态代码检查工具

特点

完全的可插拔，一切行为通过配置产生
任意rule之间都是独立的

原理

通过解析器(Parser)将JavaScript代码解析为抽象语法树(AST)，再调用规则(rule)对AST进行检查，从而实现对代码的检查

AST

AST是一种可遍历的、描述代码的树状结构，利用AST可以方便得解析代码的结构和内容 (AST Exploer)

ESLint 使用

安装ESLint CLI
编辑器集成(VS Code / Atom / Vim...)
构建工具集成 (Webpack/ Rollup / Gulp / Grunt...)

ESLint 配置

配置文件格式
- Javascript
- JSON
- YAML
- package.json 中的 eslintConfig字段
ESLint配置主要内容
- Parser: ESLint使用哪种解析器
- Environments: 选择你的代码跑在什么环境中 ( browser/node/commonjs/es6/es2017/worker)
- Globals: 除了Env之外，其他需要额外指定的全局变量
- Rules: 规则
- Plugins: 一组以上配置项以及processor的集合，往往用于特定类型文件的代码检查，如.md文件
- Extends: 继承的配置

Stylelint -- 样式代码检查方案

特点

社区活跃，生态丰富
插件化，功能强大
不仅支持css, 还支持scss, sass 和 less 等css预处理器
众多大厂使用

Prettier -- 代码格式化工具

版本规范

npm包版本

语义化版本

eg： 2.1.3-beta.1 对应版本major.minor.patch-pre-release

major 主版本，架构重构或差异较大
minor 次版本，新feature发布时可以使用
patch 一般不包含新功能，主要是修复bug或者和功能关系不大的变化
pre-release 预发行版本，一般用于正式版本发行前验证、联调和测试。和正式版本号之间用 -连接

大小比较 2.3.2 > 2.2.17 > 2.2.17-beta.1 > 2.2.17-beta.0 > 2.2.17-alpha.1 > 2.2.16

Changelog

Changelog是以时间倒叙的列表，记录所有版本变更的信息。

自动化的npm包版本控制和Changelog

release-it

根据git commit自动生成版本
自动生成 changelog
丰富的hooks用来定制发版逻辑
提供插件机制，高度可扩展

其他规范

ignore

.gitignore 忽略不需要提交git仓库的文件

每次运行时通过脚本生成的文件
构建、安装过程中产生的临时文件
文档或demo中的图片、视频等资源
第三方的vendor
仅对自己开发环境生效的配置文件

    node_modules/       # node依赖包， 必忽略
    coverage/           # 生成的测试报告
    server/logs/        # 日志文件
    dist/               # 构建出来的生产包
    .DS_Store           # Mac电脑生成的元数据文件

.npmrc

忽略对使用者无关的文件

忽略所有只有scripts脚本才能使用的配置
忽略.git
忽略 node_modules
只保留用户所需最少的文件

优先级

按一下顺序查找

每个项目的配置文件
每个用户的配置文件
全局的配置文件
npm内置的配置文件

重点配置项

    cache = "~/npm"             # 缓存位置
    engine-strice =  false      # 是否严格限制node版本
    https-proxy = null          # npm网络操作的代理
    package-lock = true         # 使用 package-lock.json
    registry = "https://registry.npmjs.org"         # npm仓库地址, 尤其对自建仓库的Team很重要

加入二进制依赖下载

配置.npmrc国内镜像 eg

    ELECTRON_MIRROR = "https://npm.taobao.org.mirrors/electron/"        # electron
    PHANTOMJS_CDNURL = "https://npm.taobao.org.mirrors/phantomjs/"      # phantomjs
    SASS_BINARY_SITE = "https://npm.taobao.org.mirrors/node-sass/"      # node-sass

.vscode 、 .editorconfig

.vscode 目录结构

.setting.json - 编辑器设置
lauch.json - debug相关配置项，常用于NodeJS调试
*.code-snippet - 代码片段

.editorconfig

得到各大主流IDE良好支持的编辑器偏好配置文件
使用.editorConfig可以在不同IDE中得到相同的编码体验，有助于团队尽可能的统一编码的习惯

前端工程化系列-第二章-规范