规范化标准
- 规范化是我们践行前端工程化中重要的一部分
- 为什么要有规范标准
- 软件开发需要多人协同
- 不同的开发者有不同的编码习惯和喜好
- 不同的喜好增加项目的维护成本
- 每个项目或者团队需要明确统一的标准
- 哪里需要规范化标准
- 代码，文档，甚至是提交日志
- 开发过程中国人为编写的成果物
- 代码标准化规范最为重要
- 实施规范化的方法
- 编码前人为的标准约定
- 通过工具实现lint
- ESLint工具的使用
- 定制ESLint校验规则
- ESLint对Tyepscript的支持
- ESLint结合自动化工具或者webpack
- 基于ESlint的衍生工具
ESLint介绍
- 最主流的Javascript Lint工具 监测JS代码质量
- ESLint很容易统一开发者的编码风格
- ESLint也可以帮助开发者提升编码能力
ESlint安装步骤
- 初始化项目
- 安装ESLint模块为开发依赖
- 通过CLI命令验证安装结果
- npm init
- npm install eslint --save-dev
- npm eslint --version或者cd node_modules cd .bin eslint --version
- 使用eslint进行检测
- 完成eslint使用配置
- npx eslint '通配符或者文件路径'
- 直接使用上面的命令会报错，显示没有找到配置文件，需要进行eslint init
- 进入询问选择环节，进行选择
ESLint配置文件解析
//.eslintrc.js//通过npm elsint init生成的
module.exports = {
env:{
brower:true,
es2020:true
},
extends:[
// 定义公共的配置文件和模块，在这里去继承就可以了
// 找个属性可以是一个数组，说明可以继承多个属性配置
'standard'
],
parserOptions:{
// 用来设置语法解释器的相关配置
// 注意的是，他只是检测语法，而不是代表某成员可用
// 成员可用在env中配置，比如promise
ecmaVersion:11
},
rules:{
// 添加一个内置的规则,值有off，warn，error
'no-alert':""
},
// 这个选项在最新版中已经没有声明了
globals:{
// 用于表示可以使用的全局变量
"jQuery":'readonly'
}
}
ESLint 配置注释
- 将配置通过注释的方式，直接写在脚本文件之中，然后再去执行代码的校验
- 用来解决，可能会遇到必须违反规则的某一两个点，但不能为了这两个点去推翻规则，所以需要用到注释配置
- //eslint-disable-line//忽略一行的eslint校验
- // eslint-dsable-lint '规则名称' //就能忽略此规则，其他的问题也能发现
- 还可以临时修改某个配置，开启全局变量，临时开启某个环境等等功能
ESLint结合自动化工具
- 集成之后，ESLint一定会工作
- 与项目统一，管理更加方便
ESLint结合webpack
- eslint集成进webpack并不是以插件的形式，而是loader机制
- 安装eslint模块
- 安装eslint-loadermok
- 初始化.eslintrc.js配置文件
//webpack.config.js
import HtmlWebpackPlugin from 'html-webpack-plugin'
module.exports = {
mode:'production',
entry:'./src/main.js',
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
use:'babel-loader'
},
{
test:/\.js$/,
exclude:/node_modules/,
use:'eslint-loader',
enfore:'pre'//保证eslint-loader为最先执行
},
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'src/index.html'
})
]
}
//.eslintrc.js
module.exports = {
env:{
brower:true,
es2020:true
},
extends:[
'standard'
],
parserOptions:{
ecmaVersion:11
},
rules:{
'no-alert':""
},
}
- 如果是针对react代码，需要安装eslint-plugin-react
//.eslintrc.js
module.exports = {
env:{
brower:true,
es2020:true
},
extends:[
'standard'
],
parserOptions:{
ecmaVersion:11
},
rules:{
//然后就可以直接去开启某些规则，具体看node_modules里面的插件
'react/jsx-uses-vars:2,//避免app没有定义的报错
'react/jsx-uses-react':2,//通过数字2去开启，避免报错，react定义了没有使用
},
plugins:[
// 可以扩展eslint的插件，同时配置的时候，去掉eslint-plugin前缀
'react'
]
}
- 配置完就可以使用npx webapck进行打包
- 一般eslint的插件都会提供一些共享的配置，可以去进行继承，去降低使用的成本
- 继承的规则一般是
plugin:继承的插件名称/具体的配置名字
//.eslintrc.js
module.exports = {
env:{
brower:true,
es2020:true
},
extends:[
'standard',
'plugin:react/recommended'
],
parserOptions:{
ecmaVersion:11
},
}
ESlint检查TypeScript的情况
- npm eslint init进行询问选择，当遇到typescript询问的时候，选择是，并安装相应的模块
//.eslintrc.js
module.exports = {
env:{
brower:true,
es2020:true
},
extends:[
'standard',
],
parserOptions:{
ecmaVersion:11
},
parser:'@typescript-eslint/parser',//语法解析器
// 因为ts和其他的不太一样，因此需要一个专门的语法解析器
plugins:[
'@typescript-eslint',
]
}
stylelint
- 用于检测css代码规范
- 也提供了一系列的代码检查规则
- 提供CLI工具，快速调用
- 通过插件支持Sass，Less，PostCss
- 支持gulp或webpack的集成
- npm install stylelint -D
- 添加配置文件.stylelintrc.js
// 配置属性和eslint很类似
// 但stylelint没有提供任何初始的配置可以继承
// 可以先安装stylelint-config-standard
module.exports = {
extend:'stylelint-config-standard',//但这里的名称必须是一个完整的模块名称
}
- npx stylelint ./index.css
- 如果是校验sass代码
- npm install stylelint-config-sass-guidelines -D
- 修改配置文件
module.exports = {
extend:[
'stylelint-config-standard',
'stylelint-config-sass-guidelines'
]
}
Prettier
- 前端代码格式化工具
- 可以格式化css，js，html，md，vue等文件
- npm install prettier -D
- npx prettier index.css// 默认是将格式化后的代码输出到控制台
- npx prettier index.css --write// 覆盖到原文件中
- npx prettier . --write //格式化所有文件
Git hooks工作机制
- 可能会遇到代码提交之前未进行eslint工作
- git hook的每一个钩子对应一个任务
- 通过shell脚本可以编写钩子任务触发时要具体执行的操作
- git init初始化后，有一个.git目录，目录下有一个hooks目录
- 里面存放了一些sample文件，里面的每一个sample就是一个钩子
- 但我们主要关注时的pre-commit.sample，因为这个就是commit钩子
- 当我们进行commit的时候，会触发的一些任务
eslint结合git hooks
- husky可以实现git hooks的使用需求
- npm install husky -D
- 安装完成之后，就可以在package.json文件里面添加husky字段
- husky字段里面有hooks，hooks里面都是各种钩子，而我们最需要pre-commit钩子
- 所以可以直接定义pre-commit为npm run test
- 然后在commit之前，就会先执行这里面的内容
- 将script里面test设置成eslint操作
