前端规范及校验
前端规范及校验:
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": ["prettier"], "rules": { "prettier/prettier": "error" }
-
上述两步合并之后(也是官方推荐配置)即:
"extends": ["plugin:prettier/recommended"]
1.3、配合vscode工具
-
eslint扩展插件:
- 自动检测代码中的不规范,在编写保存的时候就可以直接通过设定的规范来提示出现的错误;
- 下载eslint扩展,在setting.json中添加配置;若项目中有.eslinntrc.js文件配置,则优先采用项目配置;
"eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
-
prettier扩展插件:
- 用来格式化代码的插件,不仅仅可用于vue,还可以用于前端大部分场景:如js,html,css,scss,json,reactjs等等。
- 这些类型的文件都可以用prettier插件来格式化。若项目中有 .prettierrc 配置文件,则优先采用项目配置;
-
vetur扩展插件:
- 是开发vue项目基本必装的一个插件,主要的功能是:语法高亮、格式化(可选择对应文件格式化选项,比如prettier)、调试,以及错误检查、全局组件的定义提示等等;
2、代码自动化测试
2.1. 测试分类:
- 单元测试:关注应用中每