ESLint 、 e2e test 学习

Lint和Format的区别：

Lint只会告诉你代码中的错误或者不符合规范的地方，而Format是用来对格式作调整的

HTML/tpl：HTMLLint

CSS/SCSS：Stylelint

JS/JSX：Eslint

JSLint：古老，不能配置和扩展
JSHint：可配置的JSLint版本，但难以知道哪个规则产生错误
ESLint：高度可配置

ESLint

配置文件： .eslintrc,.eslintrc.js, .eslintrc.yml

rules:

off 或 0 ：关闭规则
warn 或 1 ：开启规则，使用警告级别的错误
error 或 2 ：开启规则，使用错误级别的错误

javascript 复制代码

{
	"rules" :{
		"semi" : ["error", "never"],
		"quotes": ["error", "single"]
	}
}

Extends: 使用别人提供的包，如google

javascript 复制代码

{
	"extends": "google"
}

plugins: 允许使用插件，在npm中搜索eslint-plugin-*，可以找到第三方提供的大量自定义的插件

javascript 复制代码

{
	"extends": "google"，
	"plugins": [
		"react"
	],
	"rules": {
		"semi" : ["error", "never"],
		"quotes": ["error", "single"]
	}
}

安装

bash 复制代码

# --save-dev会把 eslint 安抓过到 package.json文件中的 devDependencies 属性中，意思是知识开发阶段用到的这个包，上线时就不需要这个包了
npm install eslint --save-dev

新增package.json脚本

javascript 复制代码

"scripts": {
	"lint": "eslint src",
	"lint:create": "eslint --init"
}

然后使用run命令

bash 复制代码

npm run lint

或者直接使用npx命令

bash 复制代码

npx eslint --init

ESLint初始化

配置方法使用eslint --init方法

.eslintignore

可以在项目根目录创建，告诉ESLint忽略某些文件或者目录

常用的规则

comma-dangle: 要求或禁止使用拖尾逗号

javascript 复制代码

rules: {
	"comma-dangle": ["error", "never"]
}

quotes：该规则强制使用一致的反勾号、双引号和单引号

javascript 复制代码

rules: {
	"quotes": ["error", "single"]
}

semi: 句尾分号

javascript 复制代码

rules: {
	"semi": ["error", "never"]
}

no-multiple-empty-lines：多个空行

javascript 复制代码

rules: {
	"no-multiple-empty-lines": ["error", { "max": 2, "maxEOF": 1 }]
}

camelcase: 驼峰命名

javascript 复制代码

rules: {
	 "camelcase": "error"
}

no-console：禁用console

javascript 复制代码

rules: {
	 "no-console": process.env.NODE_ENV === 'production' ? "error" : "off"
}

eqeqeq：强等于

javascript 复制代码

rules: {
	 "eqeqeq": "error"
}

space-before-blocks：要求或禁止语句块之前的空格

javascript 复制代码

rules: {
	 "space-before-blocks": "error"
}

StyleLint

安装依赖

javascript 复制代码

npm install stylelint -D
npm install -D stylelint-config-recommended stylelint-config-standard

.stylelintigore 忽略stylelint检查的文件

javascript 复制代码

/src/**/*.css

.stylelintrc.js

javascript 复制代码

module.exports = {
	"extends": ["stylelint-config-recommended", "stylelint-config-standard"],
	"rules": {
		"indentation": 2
	}
}

e2e test

通常对web应用程序执行两种类型的测试：单元测试和端到端（E2E）测试

单元测试：单元通常是单个函数，也可以是类或甚至是复杂的算法

e2e测试：功能测试，测试整个应用程序

e2e测试与应用程序交互，就像真实用户一样

1.加载您的网站

2.点击"注册"链接

3.为注册表单中的输入提供一些有效的详细信息

4.单击"注册按钮"

如果身份验证令牌已存储在Cookie中别切应用程序重定向到配置文件页面，则应通过此测试

e2e测试优点：

可以一次隐式测试很多东西
e2e测试可确保您拥有一个工作系统

e2e测试缺点：

运行缓慢：通常需要5或10分钟才能运行一个站点
测试很脆弱，一个无关紧要的变化，如改变组件逻辑，就需要重新设计e2d test了
测试无法查明失败的原因

所以，主要的业务流程可能会写e2d，不过规模要小很多

便于给PM展示业务流程
便于修改bug之后的回归

cypress

安装

bash 复制代码

npm install cypress --save-dev

使用方式

bash 复制代码

npx cypress open

或者添加package.json 后使用npm命令 npm run cypress:open

javascript 复制代码

{
	"scripts": {
		"cypress:open": "cypress open"
	}
}