规范（一）：代码规范
1. 建立代码规范的意义和原则
为什么要建立代码规范呢？
增强团队协作效率每个工程师都有自己主观的编程风格，但作为一个团队，必须在可读性上找到最大公约数。
提高代码质量很多优秀的编码习惯，应该沉淀下来成为一个团队的【军规】而不是工程师个人的选择
减缓系统腐化的速度一个工程总会腐化，但在保持可读性和代码质量的情况下，我们可以减慢它的速度
建立代码规范需要建立什么原则？
代码规范是一个找公约数的过程需要听取团队每一位成员的意见，除了会引起质量问题的编码习惯，其他意见都值得被尊重
本着可读性第一的目标代码规范是为了帮助人与人之间的协作，可读性应该是第一目标
循序渐进的建立规范代码规范不应成为工程师工作之外的负担，建立规范的过程可以求同存异，小步快跑
2. 社区中成熟的规范
在 HTML 和 CSS 方面比较著名的有：
Google HTML/CSS/JS 规范 （著名的谷歌前端规范，大而全）
Airbnb Style规范（Airbnb的样式规范，不仅包含CSS规范，也包含Sass的规范）
但是，由于 MVC/MVVM 框架的的出现，比如说 Vue 和 React ，纯的 HTML/CSS 的我们已经很少写了，我们现在一般只把它们当做最佳实践。不需要严格的遵守，可以了解一下其中背后的思想和原理
JavaScript 方面规范有：
Airbnb JavaScript 规范
JavaScript Standard Style
框架相关：
V0ue Style Guide (VueJS官方推荐的编码规范)
Airbnb React/JSX Style Guide (Airbnb JavaScript规范的React/JSX部分)
3. 利用各种工具建立规范
3.1 ESLint
ESLint 是一款高度可配置的 JavaScript 静态代码检验工具，已成为 JS 代码检查的事实标准
特性
完全的可插拔，一切行为都通过配置产生
任一 rule 之间都是独立的
原理
先通过解析器（parser）将 JavaScript 代码解析为抽象语法树（AST），再调用规则（rule）对 AST 进行检查，从而实现对代码的检查
AST浅析
AST 是一种可遍历的、描述代码的树状结构，利用AST可以方便地分析代码的结构和内容。
可以从这个网站查看AST长什么样 AST Explore
ESLint的使用
ESLint 的使用可以通过 ESLint CLI
# 全局安装
npm i -g eslint
# -h参数查看用法
eslint -h
除了CLI之外，ESLint还提供了编辑器的集成以及构建工具的集成
编辑器集成
VS Code / Atom / Vim / Sublime Text 提供了在写代码的同时就可以实时进行代码检查
构件工具集成
Webpack / Rollup / Gulp / Grunt 提供了在构建过程中进行代码检查
ESLint的配置
配置文件格式
JavaScript，JSON 或者 YAML，也可以在 package, json 中的 eslintConfig 字段配置
ESLint配置的主要内容
Parser: ESLint使用哪种解析器
Environments：选择代码跑在什么环境中（browser/node/commonjs/es6...）
Globals：除了Env之外，其他需要额外指定的全局变量
Rules: 规则
Plugins：一组以上配置选项以及processor的集合，往往用于特定类型文件的代码检查，如.md文件
Extends：继承的配置
3.2 Prettier
Prettier介绍
Prettier 是一个流行的代码格式化工具
Prettier 称，自己最大的作用是：可以让大家停止对“代码格式”的无意义的辩论
Prettier 在一众工程化工具中非常特殊，它毫不掩饰地称自己是“有主见的”，且严格控制配置项的数量，它对默认格式的选择，完全遵循【让可读性更高】这一标准。
Prettier 认为，在代码格式化方面牺牲一些灵活性，可以为开发者带来更多的收益。不得不承认，Prettier是对的。
Prettier vs Linters
Linters规则分两类
1. 格式优化类，max-len，no-mided-spaces-and-tabs，keyword-spacing,comman-style...
2. 代码质量类：no-unused-vars，no-extra-bind，no-implicit-globals，prefer-promise-reject-errors...
Prettier 只关注第一类，且不会以报错的形式告知格式问题，而是允许开发者按自己的方式编写代码，但是会在特定时机（save,commit），将代码格式化为可读性最好的形式。
prettier的配置
prettier 可以通过 .prettierc .prettierrc.json .prettierrc.js 或者 .prettierrc.yml 配置
{
"useTabs": false, // 使用tab缩进还是空格缩进，选择false；
"tabWidth": 2, // tab是空格的情况下，是几个空格，选择2个；
"printWidth": 80, // 当行字符的长度，推荐80，也有人喜欢100或者120；
"singleQuote": true, // 使用单引号还是双引号，选择true，使用单引号；
"trailingComma": "none", // 在多行输入的尾逗号是否添加，设置为 `none`，比如对象类型的最后一个属性后面是否加一个；
"semi": false // 语句末尾是否要加分号，默认值true，选择false表示不加；
}
prettier的使用
有很多方式可以去触发 Prettier 的格式化行为：CLI、Watch Changes、git hook、与 Linter 集成
Watch Changes
{
"scripts": {
"prettier-watch": "onchange '**/*.js -- prettier --write {{changed}}'"
}
}
与ESLint集成
npm install -D eslint-config-prettier eslint-plugin-prettier
eslint-config-prettier会禁止 ESLint 中与 prettier 相冲突的规则eslint-plugin-prettier 让 ESLint 根据 prettier 的规则去检查代码，所有与代码格式有关的错误，ESLint全听 prettier 的。
{
"extends": ["prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}