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 ： 开启规则， 使用错误级别的错误

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

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

{"extends": "google"
}

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

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

安装

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

新增package.json脚本

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

然后使用run命令

npm run lint

或者 直接使用npx命令

npx eslint --init

ESLint初始化
配置方法使用eslint --init方法


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

常用的规则
comma-dangle: 要求或禁止使用拖尾逗号

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

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

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

semi: 句尾分号

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

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

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

camelcase: 驼峰命名

rules: {"camelcase": "error"
}

no-console：禁用console

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

eqeqeq：强等于

rules: {"eqeqeq": "error"
}

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

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

StyleLint

安装依赖

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

.stylelintigore 忽略stylelint检查的文件

/src/**/*.css

.stylelintrc.js

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

安装

npm install cypress --save-dev

使用方式

npx cypress open

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

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