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-prettiereslint-config-prettier会禁止 ESLint 中与 prettier 相冲突的规则eslint-plugin-prettier 让 ESLint 根据 prettier 的规则去检查代码，所有与代码格式有关的错误，ESLint全听 prettier 的。
{
"extends": ["prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
