前端代码规范、校验、测试框架、git规范

前端规范及校验：

1、代码规范及校验

1.1、eslint：

是一个开源的 JavaScript 代码检查工具，它是用来进行代码的校验，检测代码中潜在的问题，比如：

• 某个变量定义了未使用；
• 函数定义的参数重复；
• 变量名没有按规范命名等等。

在项目运行编译时 起作用，本身可支持280多个规范，还存在一些额外的自定义规范，但实际应用中一般不会全部用到，具体规则可通过.eslinntrc.js文件进行配置。

.eslinntrc.js配置文件：

• 配置文件读取的规则：

  • 首先在项目中去找是否有.eslinntrc.js文件；
  • 如果没找到，会去当前目录中去找；
  • 还是没有的话，会去全局找。

• 配置文件的配置项：

  • 配置当前目录为 root；
  • 全局变量 globals；
  • 扩展 extends：可扩展采用的校验规则标准，比如常见的有以下几种：
    • eslint:recommended：ESLint 内置的推荐规则，即 ESLint Rules 列表中打了钩的那些规则；
    • @vue/standard standard 的 JS 规范，字符串使用单引号，关键字、函数名后加空格，坚持使用全等 === 摒弃 ==等；
    • airbnb rules：js、React/JSX、CSS、HTML编码规范；
    • Google rules；
  • 插件 plugins
  • 规则 rules：off 或 0，warn 或 1，error 或 2；

• 规则的优先级：

  • 如果 extends 配置的是一个数组，那么最终会将所有规则项进行合并，出现冲突的时候，后面的会覆盖前面的；
  • 通过 rules 单独配置的规则优先级比 extends 高；

.eslintignore 文件

可以配置 ESLint 校验的时候忽略的目录/文件。

1.2、prettier：

是代码格式化工具，用来做代码格式化：

• 没有 prettier 之前，是用 eslint —fix和 编辑器自带代码格式来进行代码格式化的。每种编辑器会有不一样的代码格式，而且配置会比较麻烦。

• 有了Prettier之后，它能去掉原始的代码风格，确保团队的代码使用统一相同的格式，修复规则可自定义。

• 配置项可以通过 .prettierrc 文件修改。

Prettier 和 ESLint 一起使用的时候会冲突解决方式：

• 所以使用 eslint-config-prettier 来关掉 (disable) 所有和 Prettier 冲突的 ESLint 的配置：在 .eslintrc 里面将 prettier 设为最后一个 extends：

  "extends": ["prettier"] // prettier 一定要是最后一个，才能确保覆盖    
  

• 再启用 eslint-plugin-prettier ，将 prettier 的 rules 以插件的形式加入到 ESLint 里面：

  "plugins"