【学不动系列】lint-staged 使用教程

lint-staged 使用教程

lint-staged 是一个在git暂存文件上运行linters的工具,当然如果你觉得每次修改一个文件就给所有文件执行一次lint检查不恶心的话,这个工具对你来说就没有什么意义了,请直接关闭即可。

npx mrm lint-staged

它将根据package.json依赖项中的代码质量工具来安装和配置husky和lint-staged,因此请确保在此之前安装(npm install --save-dev)并配置所有代码质量工具,如PrettierESlint

不要忘记提交对package.json的更改以与您的团队共享此设置!

现在更改一些文件,git addgit add --patch将其中一些文件修补到您的提交中,并尝试git提交它们。

命令行标志

npx lint-staged --help
用法: lint-staged [options]

Options:
-V, --version 输出版本号
–allow-empty 当任务撤消所有分阶段的更改时允许空提交(默认值:false)
-c, --config [path] 配置文件的路径
-d, --debug 打印其他调试信息(默认值:false)
-p, --concurrent 要同时运行的任务数,或者为false则要连续运行任务(默认值:true)
-q, --quiet 自己的控制台输出(默认值:false)
-r, --relative 将相对文件路径传递给任务(默认值:false)
-x, --shell 跳过任务解析以更好地支持shell(默认值:false)
-h, --help 输出用法信息
–allow-empty: 默认情况下,当LITER任务撤消所有阶段性的更改时,LITET阶段将退出一个错误,并中止提交。使用此标志允许创建空git提交。
–config [path] : 手动指定配置文件或npm包名称的路径。注意:使用时,lint-staged不会执行配置文件搜索,如果找不到指定的文件,则会打印错误。
–debug :在调试模式下运行。设置后,它将执行以下操作
在内部使用debug记录有关暂存文件、正在执行的命令、二进制文件的位置等的其他信息。通过传递标志自动启用的调试日志也可以通过将环境变量$DEBUG设置为lint-staged*启用。
使用verbose渲染程序的listr; 这将导致串行无色输出到终端,而不是默认(美化,动态)输出。
–concurrent [number | (true/false)]: 控制由lint-staged运行的任务的并发性。注意:这不会影响子任务的并发性(它们将始终按顺序运行)。可能的值为:
false:依次运行所有任务
true(默认):无限并发。并行运行尽可能多的任务
{number}:并行运行指定数量的任务,其中1等效于false。
–quiet:禁止所有CLI输出,但任务中除外。
–relative: 将与process.cwd()(lint-staged运行)相关的文件路径传递给任务。默认值为false。
–shell:默认情况下,将分析linter命令以提高速度和安全性。这具有常规shell脚本可能无法按预期工作的副作用。您可以使用此选项跳过命令解析。

配置

从v3.1开始,您现在可以使用不同的方式进行配置:

lint-staged 在你的对象 package.json
.lintstagedrc JSON或YML格式的文件
lint-staged.config.js JS格式的文件
使用–config或-c标志传递配置文件
配置应该是一个对象,其中每个值都是要运行的命令,其键是要用于此命令的glob模式。这个软件包使用micromatch进行全局模式匹配。

package.json 例:

{
“lint-staged”: {
“*”: “your-cmd”
}
}
.lintstagedrc 例:

{
“*”: “your-cmd”
}
该配置将your-cmd使用作为参数传递的当前暂存文件的列表执行。

因此,考虑到您做了git add file1.ext file2.ext,lint-staged将运行以下命令:
your-cmd file1.ext file2.ext

过滤文件

Linter命令处理由glob模式定义的所有暂存文件的子集。lint staged使用micromatch将文件与以下规则匹配:

如果全局模式不包含斜杠(/),matchBase则将启用micromatch的选项,因此无论目录如何,全局匹配文件的基本名称:
“*.js"将匹配所有JS文件,例如/test.js和/foo/bar/test.js
2.”!(test).js"。将匹配所有以结尾的JS文件test.js,因此foo.js但不匹配foo.test.js
如果全局模式确实包含斜杠(/),则它也将与路径匹配:
"./
.js"将匹配git repo根目录中的所有JS文件,因此/test.js但不匹配/foo/bar/test.js
2."foo/**/*.js"将匹配/foo目录中的所有JS文件,所以/foo/bar/test.js但不匹配/test.js
匹配时,lint-staged将执行以下操作

自动解决git root,无需配置。
选择项目目录中存在的暂存文件。
使用指定的glob模式过滤它们。
将绝对路径传递给linters作为参数。
注意: lint-staged将绝对路径传递给linter,以免在其他工作目录(例如,您的.git目录与您的package.json目录不同)中执行时产生混淆。

忽略文件

lint-staged的概念是在git中暂存的文件上运行已配置的linter(或其他)任务。lint-staged总是将所有暂存文件的列表传递给任务,忽略任何文件都应该在任务本身中配置。

考虑一个prettier用于使代码格式在所有文件中保持一致的项目。 项目还将缩小的第三方供应商库存储在vendor/目录中。为了防止prettier在这些文件上抛出错误,应该将供应商目录添加到prettier的忽略配置.prettierignore文件中。运行npx prettier .。将忽略整个供应商目录,不会引发错误。当lint-staged被添加到项目并配置为运行prettier时,prettier将忽略供应商目录中所有修改的和暂存的文件,即使它将它们作为输入接收。

在高级方案中,如果无法将linter任务本身配置为忽略文件,但lint-staged仍应忽略某些暂存文件,则可以在使用函数语法将文件路径传递给任务之前对其进行筛选。请参见示例:忽略match中的文件。

支持哪些命令?

支持通过本地或全局安装的任何可执行文件npm,以及$PATH中的任何可执行文件。

不建议使用全局安装的脚本,因为对于没有安装脚本的人,lint-staged可能不起作用。

lint-staged使用execa查找本地安装的脚本。因此,您.lintstagedrc可以编写:

{
“*.js”: “eslint --fix”
}

依次运行多个命令

可以在每个glob上按顺序运行多个命令。为此,请传递一个命令数组而不是单个命令。这对于运行诸如eslint --fix或stylefmt之类的自动格式化工具很有用,但可以用于任何任意序列。

例如:

{
".js": [“eslint”, “prettier --write”]
}
要执行esLIt,如果它用0个代码退出,它将执行prettier --write所有暂存的
.js文件。

使用JS函数自定义任务

当以JS格式提供配置时,可以将任务定义为一个函数,该函数将接收一个分段文件名/路径数组,并应以字符串形式返回完整的命令。也可以返回一个完整的命令字符串数组,例如当任务只支持单个文件输入时。函数可以是sync或async。

type TaskFn = (filenames: string[]) => string | string[] | Promise<string | string[]>
示例:将文件名用单引号引起来,并在每个文件中运行一次

// .lintstagedrc.js
module.exports = {
‘**/*.js?(x)’: filenames => filenames.map(filename => prettier --write '${filename}')
}
示例:运行tsc对TypeScript文件的更改,但不传递任何文件名参数

// lint-staged.config.js
module.exports = {
‘**/*.ts?(x)’: () => ‘tsc -p tsconfig.json --noEmit’
}
示例:如果超过10个暂存文件,则在整个存储库上运行eslint

// .lintstagedrc.js
module.exports = {
‘**/*.js?(x)’: filenames => (filenames.length > 10 ? ‘eslint .’ : eslint ${filenames.join(' ')})
}
示例:使用自己的全局

// lint-staged.config.js
const micromatch = require(‘micromatch’)

module.exports = {
‘: allFiles => {
const match = micromatch(allFiles, [’
.js’, ‘*.ts’])
return eslint ${match.join(' ')}
}
}
示例:忽略匹配文件
如果出于某种原因要忽略全局匹配中的文件,则可以使用micromatch.not():

// lint-staged.config.js
const micromatch = require(‘micromatch’)

module.exports = {
‘*.js’: files => {
// from files filter those NOT matching *test.js
const match = micromatch.not(files, ‘*test.js’)
return eslint ${match.join(' ')}
}
}
请注意,在大多数情况下,全局效果可以达到相同的效果。对于上面的示例,匹配的glob为!(*test).js。

** 示例:对命令使用相对路径 **

const path = require(‘path’)

module.exports = {
‘*.ts’: absolutePaths => {
const cwd = process.cwd()
const relativePaths = absolutePaths.map(file => path.relative(cwd, file))
return ng lint myProjectName --files ${relativePaths.join(' ')}
}
}

重新格式化代码

像Prettier、ESLint/TSLint或stylelint这样的工具可以根据适当的配置重新格式化代码,方法是运行Prettier–write / ESLint --fix / TSLint --fix / stylelint --fix。只要没有错误,lint-staged将自动向提交添加任何修改。

{
“*.js”: “prettier --write”
}
在版本10之前,git add作为最后一步,必须手动包含任务。此行为已集成到lint阶段本身中,以防止多个任务编辑同一文件时出现争用情况。如果lint-staged git add在任务配置中检测到,它将在控制台中显示警告。git add升级后,请从您的配置中删除。

例子
假设您已经在中设置了lint-staged和husky的所有示例package.json。

{
“name”: “My project”,
“version”: “0.1.0”,
“scripts”: {
“my-custom-script”: “linter --arg1 --arg2”
},
“husky”: {
“hooks”: {
“pre-commit”: “lint-staged”
}
},
“lint-staged”: {
.{js}": [
“eslint --cache --fix”,
“prettier --write”
],
"
.css”: [
“stylelint --cache --fix”,
“prettier --write”
]
}
}
注意,我们不将路径作为命令调用时的参数传递。这一点很重要,因为lint-stage将为您完成这一点。

具有默认参数的ESLint .js并.jsx作为预提交挂钩运行

{
“*.{js,jsx}”: “eslint”
}
自动修复代码样式–fix并添加提交

{
“*.js”: “eslint --fix”
}
这将运行eslint --fix并自动向提交添加更改。

重用npm脚本

如果您想重用package.json中定义的npm脚本:

{
“*.js”: “npm run my-custom-script --”
}
以下是等效的:

{
“*.js”: “linter --arg1 --arg2”
}
在linting命令中使用环境变量
Linting命令不支持扩展环境变量的Shell约定。要自己启用该约定,请使用诸如之类的工具cross-env。

例如,此处jest正在.js将NODE_ENV变量设置为的所有文件上运行"test":

{
“*.js”: [“cross-env NODE_ENV=test jest --bail --findRelatedTests”]
}
使用prettier自动修复javascript、typescript、markdown、HTML或CSS的代码样式

{
“*.{js,jsx,ts,tsx,md,html,css}”: “prettier --write”
}
Stylelint用于具有默认值的CSS和具有SCSS语法的SCSS

{
.css": “stylelint”,
"
.scss”: “stylelint --syntax=scss”
}
运行PostCSS排序和Stylelint进行检查

{
“*.scss”: [“postcss --config path/to/your/config --replace”, “stylelint”]
}
缩小图像

{
“*.{png,jpeg,jpg,gif,svg}”: “imagemin-lint-staged”
}
imagemin-lint-staged是一个CLI工具,专门用于具有合理默认值的lint-staged使用。

使用流对您的暂存文件进行类型检查

{
“*.{js,jsx}”: “flow focus-check”
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/766866.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

xercesc库中文保存XML功能实现

目录 一 参考链接 二 运行结果 三 代码 一 参考链接 DOM Programming Guide (apache.org) Xerces-c DOM XML文件的构造_xerces-c domimplementation-CSDN博客 Xerces-c库的使用-CSDN博客 二 运行结果 三 代码 #if 1//参考链接&#xff1a; https://blog.csdn.net/RGBMa…

容器podman

容器 Linux中的容器是什么 装载应用的存在容器就是将软件打包成标准化单元, 用于开发,交付和部署容器技术已经称为应用程序封装和交付的核心技术 容器的优缺点 优点 相比床同的虚拟化技术, 容器更加简洁高效传统虚拟机需要给每个VN安装操作系统容器是的共享公共库和程序 缺点…

网页有效防止XSS,SQL注入,木马文件拦截上传等安全问题

网络安全问题一直是备受关注的话题&#xff0c;其中跨站脚本攻击&#xff08;XSS&#xff09;、SQL注入和木马文件上传是常见的安全威胁。下面我将详细介绍这些安全问题。 首先是跨站脚本攻击&#xff08;XSS&#xff09;。XSS攻击是一种利用网站漏洞&#xff0c;将恶意脚本注…

2020年黑龙江省水稻种植分布数据

黑龙江省&#xff0c;位于中国最东北部&#xff0c;是我国位置最北、最东&#xff0c;纬度最高&#xff0c;经度最东的省份&#xff0c;气候为温带大陆性季风气候。黑龙江省土地总面积为47.3万平方公里&#xff08;含加格达奇和松岭区&#xff09;&#xff0c;占全国土地总面积…

LeetCode第一天(485.最大连续1的个数)

官解&#xff1a; 为了得到数组中最大连续 111 的个数&#xff0c;需要遍历数组&#xff0c;并记录最大的连续 111 的个数和当前的连续 111 的个数。如果当前元素是 111&#xff0c;则将当前的连续 111 的个数加 111&#xff0c;否则&#xff0c;使用之前的连续 111 的个数更新…

HTML元素语义化补充之css函数(三)

文章目录 CSS中的函数css函数–varcss函数–calccss函数–blurcss函数–gradientlinear-gradient的使用 CSS中的函数 ◼ 在前面我们有使用过很多个CSS函数: 比如rgb/rgba/translate/rotate/scale等; CSS函数通常可以帮助我们更加灵活的来编写样式的值&#xff1b; ◼ 下面有几…

Nature:“量子龙卷风”首次模拟黑洞

科学家们在超流体氦气中首次创造出了一个巨大的“量子漩涡”&#xff08;quantum vortex&#xff09;&#xff0c;用以模拟黑洞。这一成就不仅使他们能够更加细致地观察模拟黑洞的行为&#xff0c;还能探究其与周围环境的交互作用。 诺丁汉大学的研究团队与伦敦国王学院和纽卡斯…

春天到了,颈椎病容易复发和加重,怎么回事?

即将进入四月&#xff0c;气温回暖&#xff0c;大家的着装明显轻便了。实际上&#xff0c;四时之气均有诱发颈椎病复发的因素&#xff0c;春天也不例外。 对于颈椎病人群来说&#xff0c;他们的颈部状态较差&#xff0c;遇到“无孔不入”、挟裹着湿气的风邪&#xff0c;便十分容…

操作系统原理-模拟进程创建、终止、阻塞、唤醒原语——沐雨先生

一、实验题目&#xff1a; 模拟进程创建、终止、阻塞、唤醒原语 二、实验目的&#xff1a; 通过设计并调试创建、终止、阻塞、唤醒原语功能&#xff0c;有助于对操作系统中进程控制功能的理解&#xff0c;掌握操作系统模块的设计方法和工作原理。 三、实验环境&#xff1a; …

【算法分析与设计】翻转二叉树

题目 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1]示例 2&#xff1a; 输入&#xff1a;root [2,1,3] 输出&#xff1a;[2,3,1]示例…

本地运行环境工具UPUPWANK(win)和Navicat数据库管理工具

UPUPWANK安装地址&#xff1a;https://www.upupw.net 1.进入UPUPWANK后点击一键开启 2.新增项目 这里请千万注意80端口&#xff0c;如果80端口被占用了&#xff0c;请记住去任务管理器关闭占用80端口的进程。不然就不会成功显示。&#xff08;笔者含泪警告&#xff0c;一晚上的…

多线程应用中的性能优化:创建合适的线程数

多线程应用中的性能优化&#xff1a;创建合适的线程数 在多线程应用中&#xff0c;为了降低延迟和提高吞吐量&#xff0c;我们可以采取两种主要策略&#xff1a;优化算法或者充分利用硬件性能。要发挥硬件的极致性能&#xff0c;就需要使用多线程来提高CPU或I/O的利用率。 由于…

TypeScript+Jest测试

1、初始化TypeScript工程 npm i -D typescript生成TypeScript工程配置 tsc --init代码目录 test └── src├── sum.test.ts└── sum.tssum.ts export function add(a: number, b: number): number {return a b; }sum.test.ts import { add } from ./sum;test(add …

Spring中的OAuth2

一. 什么是OAuth2 “Auth” 表示 “授权” Authorization “O” 是 Open 的简称&#xff0c;表示 “开放” 连在一起就表示 “开放授权”&#xff0c;OAuth2是一种开放授权协议。 二. OAuth2是什么 怎么用 OAuth2是目前最流行的授权协议&#xff0c;用来授权第三方应用&am…

信号的小波包能量谱计算(以轴承振动信号为例,Python环境)

小波分析是近30年来发展起来的数学分支&#xff0c;是Fourier分析划时代发展的结果&#xff0c;由法国工程师Morlet首先提出&#xff0c;后广泛应用于信号处理、图像处理与分析、地震勘探、故障诊断、自动控制等领域&#xff0c;小波就是小的波形&#xff0c;所谓“小”是指它具…

QT文件读写操作和内容提取

访问IO设备&#xff0c;需要先调用open()来设置正确的OpenMode(例如ReadOnly或ReadWrite) 打开设备后后&#xff0c;使用write() 或putChar() 写入数据到文件和设备&#xff0c;并通过调用read()&#xff0c;readLine() 或readAll() 进行读取&#xff1b;使用完设备后&#xf…

供应链攻击揭秘:识别、防范与应对

供应链攻击是网络安全领域的一种新兴威胁&#xff0c;它利用供应链中的漏洞对目标进行攻击。本文将介绍供应链攻击的概念、类型、危害&#xff0c;并通过具体案例阐述其影响&#xff0c;同时探讨如何防范供应链攻击&#xff0c;以提高人们对供应链攻击的认识和防范意识。 一、引…

3、Jenkins持续集成-Jenkins安装和插件管理

文章目录 一、Jenkins安装1. 安装JDK2. 获取jenkins安装包3. 安装包上传到服务器&#xff0c;进行安装4. 修改Jenkins配置&#xff08;1&#xff09;低版本Jenkins的rpm包&#xff08;2&#xff09;高版本Jenkins的rpm包 5. 启动Jenkins6. 打开浏览器访问7. 获取并输入admin账户…

【漏洞复现】netgear路由器 boarddataww 存在RCE漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

HTML发展史

为什么要讲 HTML 发展史呢&#xff1f; 唐太宗告诉我们: 以铜为镜&#xff0c;可以正衣冠&#xff1b;以史为镜&#xff0c;可以知兴替&#xff1b;以人为镜&#xff0c;可以明得失。 那了解了 HTML 的发展史&#xff0c;可以知道什么呢&#xff1f; 答案是兼容 国内在 淘宝…