规范（一）：代码规范

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

package.json
{
    "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 的。

.eslintrc.json
{
    "extends": ["prettier"],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": "error"
    }
}

目录

1. 建立代码规范的意义和原则

2. 社区中成熟的规范

3. 利用各种工具建立规范

3.1 ESLint

3.2 Prettier