前端代码风格自动化系列(三)之Lint-staged
2023-02-18 16:40:28 时间
在我们介绍了Husky、Commitlint之后,来看一个前端文件过滤的工具Lint-staged,代码的格式化肯定会涉及到文件系统,一般工具会首先读取文件,格式化操作之后,重新写入。对于较大型的项目,文件众多,首先遇到的就是性能问题,虽然如Eslint之类的也有文件过滤配置,但毕竟还是对于匹配文件的全量遍历,如全量的.js
文件,基本达不到性能要求,有时还会误格式化其他同学的代码,因此我们引入Lint-staged,一个仅仅过滤出Git代码暂存区文件(被committed的文件)的工具。
安装
npm install --save-dev lint-staged husky
配置
首先明确一下,Lint-staged仅仅是文件过滤器,不会帮你格式化任何东西,所以没有代码规则配置文件,需要自己配置一下,如:.eslintrc
、.stylelintrc
等,然后在package.json
中引入。
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": ["eslint --fix", "git add"]
}
}
当文件变化,我们git commit
它们,pre-commit
钩子会启动,执行lint-staged
命令,我们对于lint-staged
如上文配置,对本次被commited中的所有.js
文件,执行eslint --fix
命令和git add
,命令,前者的的目的是格式化,后者是对格式化之后的代码重新提交。
除了在package.json
中配置,也可以在.lintstagedrc
、lint-staged.config.js
文件中,lint-staged
的常用选项除了liners
之外,还有ignore
、concurrent
等,具体参考文档:
{
"lint-staged": {
"linters": {
"*.{js,scss}": ["some command", "git add"]
},
"ignore": ["**/dist/*.min.js"]
}
}
对于文件的过滤,lint-staged
的格式如下:
{
// .js files anywhere in the project
"*.js": "eslint",
// .js files anywhere in the project
"**/*.js": "eslint",
// .js file in the src directory
"src/*.js": "eslint",
// .js file anywhere within and below the src directory
"src/**/*.js": "eslint",
}
lint-staged
提供的功能远不止于此,它只是平台,具体的格式化工具的搭配有很多,如对于图片的、样式的、.tsx
、.md
等文件的。
相关文章
- 静态路由汇总的方法
- 已知IP地址和子网掩码后可以算出网络地址、广播地址、地址范围、主机位数、可用主机位数
- STP工作原理和配置
- RSTP原理与配置整理和汇总
- eNSP和GNS3进行桥接
- CTO来分享:给新晋技术管理者的研发协同工具——YesDev
- 使用VMware Workstation搭建先电IaaS云平台(v2.2版本)
- 使用先电IaaS云平台创建云主机
- DHCP欺骗实验操作及防护措施
- DHCP配置参数说明
- 使用VMware Workstation安装FusionCompute CNA和VRM
- 插入SD卡,复制粘贴不了,原来是这个原因造成的
- vlan的端口隔离及端口优化——“道高一尺魔高一丈”
- 使用Windows Server 2012 R2创建DHCP作用域(DHCP地址池),并测试使用
- DHCP中继(实验操作)
- SecureCRT v8.7 安装过程以及高亮配色方案设置
- 在Ubuntu下使用几行命令打造好莱坞电影特效
- 华为USG6000V防火墙的初始密码及修改密码的操作
- 更改FusionCompute8.0 Web端管理系统密码(修改VRM节点的root帐户密码)
- 用先序和中序遍历重建二叉树