lint-staged使⽤教程
lint-staged 是⼀个在git暂存⽂件上运⾏linters的⼯具，当然如果你觉得每次修改⼀个⽂件就给所有⽂件执⾏⼀次lint检查不恶⼼的话，这个⼯具对你来说就没有什么意义了，请直接关闭即可。
npx mrm lint-staged
它将根据package.json依赖项中的代码质量⼯具来安装和配置husky和lint-staged，因此请确保在此之前安装（npm install --save-dev）并配置所有代码质量⼯具，如Prettier和ESlint。
不要忘记提交对package.json的更改以与您的团队共享此设置！
现在更改⼀些⽂件，git add或git add --patch将其中⼀些⽂件修补到您的提交中，并尝试git提交它们。
命令⾏标志
❯ npx lint-staged --help
⽤法: lint-staged [options]
Options:
-V, --version 输出版本号
--allow-empty 当任务撤消所有分阶段的更改时允许空提交（默认值：false）
-c, --config [path] 配置⽂件的路径
-d, --debug 打印其他调试信息（默认值：false）
-p, --concurrent <parallel tasks> 要同时运⾏的任务数，或者为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 ：在调试模式下运⾏。设置后，它将执⾏以下操作
1. 在内部使⽤记录有关暂存⽂件、正在执⾏的命令、⼆进制⽂件的位置等的其他信息。通过传递标志⾃动启⽤的调试⽇志也可以通过将环境变量$DEBUG设置
为lint-staged*启⽤。
2. 使⽤的listr; 这将导致串⾏⽆⾊输出到终端，⽽不是默认（美化，动态）输出。
--concurrent [number | (true/false)]: 控制由lint-staged运⾏的任务的并发性。注意：这不会影响⼦任务的并发性（它们将始终按顺序运⾏）。可能的值为：
1. false：依次运⾏所有任务
2. true（默认）：⽆限并发。并⾏运⾏尽可能多的任务
3. {number}：并⾏运⾏指定数量的任务，其中1等效于false。
-
-quiet：禁⽌所有CLI输出，但任务中除外。
--relative: 将与process.cwd()（lint-staged运⾏）相关的⽂件路径传递给任务。默认值为false。
--shell ：默认情况下，将分析linter命令以提⾼速度和安全性。这具有常规shell脚本可能⽆法按预期⼯作的副作⽤。您可以使⽤此选项跳过命令解析。
配置
从v3.1开始，您现在可以使⽤不同的⽅式进⾏配置：
lint-staged在你的对象package.json
.lintstagedrc JSON或YML格式的⽂件
使⽤--config或-c标志传递配置⽂件
配置应该是⼀个对象，其中每个值都是要运⾏的命令，其键是要⽤于此命令的glob模式。这个软件包使⽤进⾏全局模式匹配。
package.json例:
{
"lint-staged": {
"*": "your-cmd"
}
}
.lintstagedrc例：
{
"*": "your-cmd"
}
该配置将your-cmd使⽤作为参数传递的当前暂存⽂件的列表执⾏。
因此，考虑到您做了git ，lint-staged将运⾏以下命令：
提交更改是什么过滤⽂件
Linter命令处理由glob模式定义的所有暂存⽂件的⼦集。lint staged使⽤将⽂件与以下规则匹配：
如果全局模式不包含斜杠（/），matchBase则将启⽤micromatch的选项，因此⽆论⽬录如何，全局匹配⽂件的基本名称：
1. "*.js"将匹配所有JS⽂件，例如/test.js和/foo/bar/test.js
2. "!(*test).js"。将匹配所有以结尾的JS⽂件test.js，因此foo.js但不匹配st.js
如果全局模式确实包含斜杠（/），则它也将与路径匹配：
1. "./*.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仍应忽略某些暂存⽂件，则可以在使⽤函数语法将⽂件路径传递给任务之前对其进⾏筛选。请参见。
⽀持哪些命令？
⽀持通过本地或全局安装的任何可执⾏⽂件npm，以及$PATH中的任何可执⾏⽂件。
不建议使⽤全局安装的脚本，因为对于没有安装脚本的⼈，lint-staged可能不起作⽤。
lint-staged使⽤查本地安装的脚本。因此，您.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
'**/*.js?(x)': filenames => filenames.map(filename => `prettier --write '${filename}'`)
}
⽰例：运⾏tsc对TypeScript⽂件的更改，但不传递任何⽂件名参数
// fig.js
'**/*.ts?(x)': () => 'tsc -p tsconfig.json --noEmit'
}
⽰例：如果超过10个暂存⽂件，则在整个存储库上运⾏eslint
// .lintstagedrc.js
'**/*.js?(x)': filenames => (filenames.length > 10 ? 'eslint .' : `eslint ${filenames.join(' ')}`)
}
⽰例：使⽤⾃⼰的全局
// fig.js
const micromatch = require('micromatch')
'*': allFiles => {
const match = micromatch(allFiles, ['*.js', '*.ts'])
return `eslint ${match.join(' ')}`
}
}
⽰例：忽略匹配⽂件
如果出于某种原因要忽略全局匹配中的⽂件，则可以使⽤()：
// fig.js
const micromatch = require('micromatch')
'*.js': files => {
// from `files` filter those _NOT_ matching `*test.js`
const match = (files, '*test.js')
return `eslint ${match.join(' ')}`
}
}
请注意，在⼤多数情况下，全局效果可以达到相同的效果。对于上⾯的⽰例，匹配的glob为!(*test).js。
** ⽰例：对命令使⽤相对路径 **
const path = require('path')
'*.ts': absolutePaths => {
const cwd = process.cwd()
const relativePaths = absolutePaths.map(file => lative(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约定。要⾃⼰启⽤该约定，请使⽤诸如之类的⼯具。例如，此处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"
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论