UNPKG

36.7 kBMarkdownView Raw
1# 🚫💩 lint-staged [![Test & Release](https://github.com/okonet/lint-staged/actions/workflows/push.yml/badge.svg)](https://github.com/okonet/lint-staged/actions/workflows/push.yml) [![Publish](https://github.com/okonet/lint-staged/actions/workflows/tag.yml/badge.svg)](https://github.com/okonet/lint-staged/actions/workflows/tag.yml) [![npm version](https://badge.fury.io/js/lint-staged.svg)](https://badge.fury.io/js/lint-staged) [![Codecov](https://codecov.io/gh/okonet/lint-staged/branch/master/graph/badge.svg)](https://codecov.io/gh/okonet/lint-staged)
2
3Run linters against staged git files and don't let :poop: slip into your code base!
4
5```bash
6npm install --save-dev lint-staged # requires further setup
7```
8
9```
10$ git commit
11
12✔ Preparing lint-staged...
13❯ Running tasks for staged files...
14 ❯ packages/frontend/.lintstagedrc.json — 1 file
15 ↓ *.js — no files [SKIPPED]
16 ❯ *.{json,md} — 1 file
17 ⠹ prettier --write
18 ↓ packages/backend/.lintstagedrc.json — 2 files
19 ❯ *.js — 2 files
20 ⠼ eslint --fix
21 ↓ *.{json,md} — no files [SKIPPED]
22◼ Applying modifications from tasks...
23◼ Cleaning up temporary files...
24```
25
26<details>
27<summary>See asciinema video</summary>
28
29[![asciicast](https://asciinema.org/a/199934.svg)](https://asciinema.org/a/199934)
30
31</details>
32
33## Why
34
35Linting makes more sense when run before committing your code. By doing so you can ensure no errors go into the repository and enforce code style. But running a lint process on a whole project is slow, and linting results can be irrelevant. Ultimately you only want to lint files that will be committed.
36
37This project contains a script that will run arbitrary shell tasks with a list of staged files as an argument, filtered by a specified glob pattern.
38
39## Related blog posts and talks
40
41- [Introductory Medium post - Andrey Okonetchnikov, 2016](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8#.8qepn2b5l)
42- [Running Jest Tests Before Each Git Commit - Ben McCormick, 2017](https://benmccormick.org/2017/02/26/running-jest-tests-before-each-git-commit/)
43- [AgentConf presentation - Andrey Okonetchnikov, 2018](https://www.youtube.com/watch?v=-mhY7e-EsC4)
44- [SurviveJS interview - Juho Vepsäläinen and Andrey Okonetchnikov, 2018](https://survivejs.com/blog/lint-staged-interview/)
45- [Prettier your CSharp with `dotnet-format` and `lint-staged`](https://johnnyreilly.com/2020/12/22/prettier-your-csharp-with-dotnet-format-and-lint-staged)
46
47> If you've written one, please submit a PR with the link to it!
48
49## Installation and setup
50
51To install _lint-staged_ in the recommended way, you need to:
52
531. Install _lint-staged_ itself:
54 - `npm install --save-dev lint-staged`
551. Set up the `pre-commit` git hook to run _lint-staged_
56 - [Husky](https://github.com/typicode/husky) is a popular choice for configuring git hooks
57 - Read more about git hooks [here](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)
581. Install some linters, like [ESLint](https://eslint.org) or [Prettier](https://prettier.io)
591. Configure _lint-staged_ to run linters and other tasks:
60 - for example: `{ "*.js": "eslint" }` to run ESLint for all staged JS files
61 - See [Configuration](#configuration) for more info
62
63Don't forget to commit changes to `package.json` and `.husky` to share this setup with your team!
64
65Now change a few files, `git add` or `git add --patch` some of them to your commit, and try to `git commit` them.
66
67See [examples](#examples) and [configuration](#configuration) for more information.
68
69## Changelog
70
71See [Releases](https://github.com/okonet/lint-staged/releases).
72
73### Migration
74
75#### v14
76
77- Since `v14.0.0` _lint-staged_ no longer supports Node.js 14. Please upgrade your Node.js version to at least `16.14.0`.
78
79#### v13
80
81- Since `v13.0.0` _lint-staged_ no longer supports Node.js 12. Please upgrade your Node.js version to at least `14.13.1`, or `16.0.0` onward.
82
83#### v12
84
85- Since `v12.0.0` _lint-staged_ is a pure ESM module, so make sure your Node.js version is at least `12.20.0`, `14.13.1`, or `16.0.0`. Read more about ESM modules from the official [Node.js Documentation site here](https://nodejs.org/api/esm.html#introduction).
86
87#### v10
88
89- From `v10.0.0` onwards any new modifications to originally staged files will be automatically added to the commit.
90 If your task previously contained a `git add` step, please remove this.
91 The automatic behaviour ensures there are less race-conditions,
92 since trying to run multiple git operations at the same time usually results in an error.
93- From `v10.0.0` onwards, lint-staged uses git stashes to improve speed and provide backups while running.
94 Since git stashes require at least an initial commit, you shouldn't run lint-staged in an empty repo.
95- From `v10.0.0` onwards, lint-staged requires Node.js version 10.13.0 or later.
96- From `v10.0.0` onwards, lint-staged will abort the commit if linter tasks undo all staged changes. To allow creating an empty commit, please use the `--allow-empty` option.
97
98## Command line flags
99
100```
101❯ npx lint-staged --help
102Usage: lint-staged [options]
103
104Options:
105 -V, --version output the version number
106 --allow-empty allow empty commits when tasks revert all staged changes (default: false)
107 -p, --concurrent <number|boolean> the number of tasks to run concurrently, or false for serial (default: true)
108 -c, --config [path] path to configuration file, or - to read from stdin
109 --cwd [path] run all tasks in specific directory, instead of the current
110 -d, --debug print additional debug information (default: false)
111 --diff [string] override the default "--staged" flag of "git diff" to get list of files. Implies
112 "--no-stash".
113 --diff-filter [string] override the default "--diff-filter=ACMR" flag of "git diff" to get list of files
114 --max-arg-length [number] maximum length of the command-line argument string (default: 0)
115 --no-stash disable the backup stash, and do not revert in case of errors
116 -q, --quiet disable lint-staged’s own console output (default: false)
117 -r, --relative pass relative filepaths to tasks (default: false)
118 -x, --shell [path] skip parsing of tasks for better shell support (default: false)
119 -v, --verbose show task output even when tasks succeed; by default only failed output is shown
120 (default: false)
121 -h, --help display help for command
122```
123
124- **`--allow-empty`**: By default, when linter tasks undo all staged changes, lint-staged will exit with an error and abort the commit. Use this flag to allow creating empty git commits.
125- **`--concurrent [number|boolean]`**: Controls the [concurrency of tasks](#task-concurrency) being run by lint-staged. **NOTE**: This does NOT affect the concurrency of subtasks (they will always be run sequentially). Possible values are:
126 - `false`: Run all tasks serially
127 - `true` (default) : _Infinite_ concurrency. Runs as many tasks in parallel as possible.
128 - `{number}`: Run the specified number of tasks in parallel, where `1` is equivalent to `false`.
129- **`--config [path]`**: Manually specify a path to a config file or npm package name. Note: when used, lint-staged won't perform the config file search and will print an error if the specified file cannot be found. If '-' is provided as the filename then the config will be read from stdin, allowing piping in the config like `cat my-config.json | npx lint-staged --config -`.
130- **`--cwd [path]`**: By default tasks run in the current working directory. Use the `--cwd some/directory` to override this. The path can be absolute or relative to the current working directory.
131- **`--debug`**: Run in debug mode. When set, it does the following:
132 - uses [debug](https://github.com/visionmedia/debug) internally to log additional information about staged files, commands being executed, location of binaries, etc. Debug logs, which are automatically enabled by passing the flag, can also be enabled by setting the environment variable `$DEBUG` to `lint-staged*`.
133 - uses [`verbose` renderer](https://listr2.kilic.dev/renderers/verbose-renderer/) for `listr2`; this causes serial, uncoloured output to the terminal, instead of the default (beautified, dynamic) output.
134 (the [`verbose` renderer](https://listr2.kilic.dev/renderers/verbose-renderer/) can also be activated by setting the `TERM=dumb` or `NODE_ENV=test` environment variables)
135- **`--diff`**: By default linters are filtered against all files staged in git, generated from `git diff --staged`. This option allows you to override the `--staged` flag with arbitrary revisions. For example to get a list of changed files between two branches, use `--diff="branch1...branch2"`. You can also read more from about [git diff](https://git-scm.com/docs/git-diff) and [gitrevisions](https://git-scm.com/docs/gitrevisions). This option also implies `--no-stash`.
136- **`--diff-filter`**: By default only files that are _added_, _copied_, _modified_, or _renamed_ are included. Use this flag to override the default `ACMR` value with something else: _added_ (`A`), _copied_ (`C`), _deleted_ (`D`), _modified_ (`M`), _renamed_ (`R`), _type changed_ (`T`), _unmerged_ (`U`), _unknown_ (`X`), or _pairing broken_ (`B`). See also the `git diff` docs for [--diff-filter](https://git-scm.com/docs/git-diff#Documentation/git-diff.txt---diff-filterACDMRTUXB82308203).
137- **`--max-arg-length`**: long commands (a lot of files) are automatically split into multiple chunks when it detects the current shell cannot handle them. Use this flag to override the maximum length of the generated command string.
138- **`--no-stash`**: By default a backup stash will be created before running the tasks, and all task modifications will be reverted in case of an error. This option will disable creating the stash, and instead leave all modifications in the index when aborting the commit. Can be re-enabled with `--stash`.
139- **`--quiet`**: Supress all CLI output, except from tasks.
140- **`--relative`**: Pass filepaths relative to `process.cwd()` (where `lint-staged` runs) to tasks. Default is `false`.
141- **`--shell`**: By default linter commands will be parsed for speed and security. This has the side-effect that regular shell scripts might not work as expected. You can skip parsing of commands with this option. To use a specific shell, use a path like `--shell "/bin/bash"`.
142- **`--verbose`**: Show task output even when tasks succeed. By default only failed output is shown.
143
144## Configuration
145
146_Lint-staged_ can be configured in many ways:
147
148- `lint-staged` object in your `package.json`
149- `.lintstagedrc` file in JSON or YML format, or you can be explicit with the file extension:
150 - `.lintstagedrc.json`
151 - `.lintstagedrc.yaml`
152 - `.lintstagedrc.yml`
153- `.lintstagedrc.mjs` or `lint-staged.config.mjs` file in ESM format
154 - the default export value should be a configuration: `export default { ... }`
155- `.lintstagedrc.cjs` or `lint-staged.config.cjs` file in CommonJS format
156 - the exports value should be a configuration: `module.exports = { ... }`
157- `lint-staged.config.js` or `.lintstagedrc.js` in either ESM or CommonJS format, depending on
158 whether your project's _package.json_ contains the `"type": "module"` option or not.
159- Pass a configuration file using the `--config` or `-c` flag
160
161Configuration should be an object where each value is a command to run and its key is a glob pattern to use for this command. This package uses [micromatch](https://github.com/micromatch/micromatch) for glob patterns. JavaScript files can also export advanced configuration as a function. See [Using JS configuration files](#using-js-configuration-files) for more info.
162
163You can also place multiple configuration files in different directories inside a project. For a given staged file, the closest configuration file will always be used. See ["How to use `lint-staged` in a multi-package monorepo?"](#how-to-use-lint-staged-in-a-multi-package-monorepo) for more info and an example.
164
165#### `package.json` example:
166
167```json
168{
169 "lint-staged": {
170 "*": "your-cmd"
171 }
172}
173```
174
175#### `.lintstagedrc` example
176
177```json
178{
179 "*": "your-cmd"
180}
181```
182
183This config will execute `your-cmd` with the list of currently staged files passed as arguments.
184
185So, considering you did `git add file1.ext file2.ext`, lint-staged will run the following command:
186
187`your-cmd file1.ext file2.ext`
188
189### Task concurrency
190
191By default _lint-staged_ will run configured tasks concurrently. This means that for every glob, all the commands will be started at the same time. With the following config, both `eslint` and `prettier` will run at the same time:
192
193```json
194{
195 "*.ts": "eslint",
196 "*.md": "prettier --list-different"
197}
198```
199
200This is typically not a problem since the globs do not overlap, and the commands do not make changes to the files, but only report possible errors (aborting the git commit). If you want to run multiple commands for the same set of files, you can use the array syntax to make sure commands are run in order. In the following example, `prettier` will run for both globs, and in addition `eslint` will run for `*.ts` files _after_ it. Both sets of commands (for each glob) are still started at the same time (but do not overlap).
201
202```json
203{
204 "*.ts": ["prettier --list-different", "eslint"],
205 "*.md": "prettier --list-different"
206}
207```
208
209Pay extra attention when the configured globs overlap, and tasks make edits to files. For example, in this configuration `prettier` and `eslint` might try to make changes to the same `*.ts` file at the same time, causing a _race condition_:
210
211```json
212{
213 "*": "prettier --write",
214 "*.ts": "eslint --fix"
215}
216```
217
218If necessary, you can limit the concurrency using `--concurrent <number>` or disable it entirely with `--concurrent false`.
219
220## Filtering files
221
222Linter commands work on a subset of all staged files, defined by a _glob pattern_. lint-staged uses [micromatch](https://github.com/micromatch/micromatch) for matching files with the following rules:
223
224- If the glob pattern contains no slashes (`/`), micromatch's `matchBase` option will enabled, so globs match a file's basename regardless of directory:
225 - `"*.js"` will match all JS files, like `/test.js` and `/foo/bar/test.js`
226 - `"!(*test).js"` will match all JS files, except those ending in `test.js`, so `foo.js` but not `foo.test.js`
227- If the glob pattern does contain a slash (`/`), it will match for paths as well:
228 - `"./*.js"` will match all JS files in the git repo root, so `/test.js` but not `/foo/bar/test.js`
229 - `"foo/**/*.js"` will match all JS files inside the `/foo` directory, so `/foo/bar/test.js` but not `/test.js`
230
231When matching, lint-staged will do the following
232
233- Resolve the git root automatically, no configuration needed.
234- Pick the staged files which are present inside the project directory.
235- Filter them using the specified glob patterns.
236- Pass absolute paths to the linters as arguments.
237
238**NOTE:** `lint-staged` will pass _absolute_ paths to the linters to avoid any confusion in case they're executed in a different working directory (i.e. when your `.git` directory isn't the same as your `package.json` directory).
239
240Also see [How to use `lint-staged` in a multi-package monorepo?](#how-to-use-lint-staged-in-a-multi-package-monorepo)
241
242### Ignoring files
243
244The concept of `lint-staged` is to run configured linter tasks (or other tasks) on files that are staged in git. `lint-staged` will always pass a list of all staged files to the task, and ignoring any files should be configured in the task itself.
245
246Consider a project that uses [`prettier`](https://prettier.io/) to keep code format consistent across all files. The project also stores minified 3rd-party vendor libraries in the `vendor/` directory. To keep `prettier` from throwing errors on these files, the vendor directory should be added to prettier's ignore configuration, the `.prettierignore` file. Running `npx prettier .` will ignore the entire vendor directory, throwing no errors. When `lint-staged` is added to the project and configured to run prettier, all modified and staged files in the vendor directory will be ignored by prettier, even though it receives them as input.
247
248In advanced scenarios, where it is impossible to configure the linter task itself to ignore files, but some staged files should still be ignored by `lint-staged`, it is possible to filter filepaths before passing them to tasks by using the function syntax. See [Example: Ignore files from match](#example-ignore-files-from-match).
249
250## What commands are supported?
251
252Supported are any executables installed locally or globally via `npm` as well as any executable from your \$PATH.
253
254> Using globally installed scripts is discouraged, since lint-staged may not work for someone who doesn't have it installed.
255
256`lint-staged` uses [execa](https://github.com/sindresorhus/execa#preferlocal) to locate locally installed scripts. So in your `.lintstagedrc` you can write:
257
258```json
259{
260 "*.js": "eslint --fix"
261}
262```
263
264Pass arguments to your commands separated by space as you would do in the shell. See [examples](#examples) below.
265
266## Running multiple commands in a sequence
267
268You can run multiple commands in a sequence on every glob. To do so, pass an array of commands instead of a single one. This is useful for running autoformatting tools like `eslint --fix` or `stylefmt` but can be used for any arbitrary sequences.
269
270For example:
271
272```json
273{
274 "*.js": ["eslint", "prettier --write"]
275}
276```
277
278going to execute `eslint` and if it exits with `0` code, it will execute `prettier --write` on all staged `*.js` files.
279
280## Using JS configuration files
281
282Writing the configuration file in JavaScript is the most powerful way to configure lint-staged (`lint-staged.config.js`, [similar](https://github.com/okonet/lint-staged#configuration), or passed via `--config`). From the configuration file, you can export either a single function or an object.
283
284If the `exports` value is a function, it will receive an array of all staged filenames. You can then build your own matchers for the files and return a command string or an array of command strings. These strings are considered complete and should include the filename arguments, if wanted.
285
286If the `exports` value is an object, its keys should be glob matches (like in the normal non-js config format). The values can either be like in the normal config or individual functions like described above. Instead of receiving all matched files, the functions in the exported object will only receive the staged files matching the corresponding glob key.
287
288### Function signature
289
290The function can also be async:
291
292```ts
293(filenames: string[]) => string | string[] | Promise<string | string[]>
294```
295
296### Example: Export a function to build your own matchers
297
298<details>
299 <summary>Click to expand</summary>
300
301```js
302// lint-staged.config.js
303import micromatch from 'micromatch'
304
305export default (allStagedFiles) => {
306 const shFiles = micromatch(allStagedFiles, ['**/src/**/*.sh'])
307 if (shFiles.length) {
308 return `printf '%s\n' "Script files aren't allowed in src directory" >&2`
309 }
310 const codeFiles = micromatch(allStagedFiles, ['**/*.js', '**/*.ts'])
311 const docFiles = micromatch(allStagedFiles, ['**/*.md'])
312 return [`eslint ${codeFiles.join(' ')}`, `mdl ${docFiles.join(' ')}`]
313}
314```
315
316</details>
317
318### Example: Wrap filenames in single quotes and run once per file
319
320<details>
321 <summary>Click to expand</summary>
322
323```js
324// .lintstagedrc.js
325export default {
326 '**/*.js?(x)': (filenames) => filenames.map((filename) => `prettier --write '${filename}'`),
327}
328```
329
330</details>
331
332### Example: Run `tsc` on changes to TypeScript files, but do not pass any filename arguments
333
334<details>
335 <summary>Click to expand</summary>
336
337```js
338// lint-staged.config.js
339export default {
340 '**/*.ts?(x)': () => 'tsc -p tsconfig.json --noEmit',
341}
342```
343
344</details>
345
346### Example: Run ESLint on entire repo if more than 10 staged files
347
348<details>
349 <summary>Click to expand</summary>
350
351```js
352// .lintstagedrc.js
353export default {
354 '**/*.js?(x)': (filenames) =>
355 filenames.length > 10 ? 'eslint .' : `eslint ${filenames.join(' ')}`,
356}
357```
358
359</details>
360
361### Example: Use your own globs
362
363<details>
364 <summary>Click to expand</summary>
365
366It's better to use the [function-based configuration (seen above)](https://github.com/okonet/lint-staged#example-export-a-function-to-build-your-own-matchers), if your use case is this.
367
368```js
369// lint-staged.config.js
370import micromatch from 'micromatch'
371
372export default {
373 '*': (allFiles) => {
374 const codeFiles = micromatch(allFiles, ['**/*.js', '**/*.ts'])
375 const docFiles = micromatch(allFiles, ['**/*.md'])
376 return [`eslint ${codeFiles.join(' ')}`, `mdl ${docFiles.join(' ')}`]
377 },
378}
379```
380
381</details>
382
383### Example: Ignore files from match
384
385<details>
386 <summary>Click to expand</summary>
387
388If for some reason you want to ignore files from the glob match, you can use `micromatch.not()`:
389
390```js
391// lint-staged.config.js
392import micromatch from 'micromatch'
393
394export default {
395 '*.js': (files) => {
396 // from `files` filter those _NOT_ matching `*test.js`
397 const match = micromatch.not(files, '*test.js')
398 return `eslint ${match.join(' ')}`
399 },
400}
401```
402
403Please note that for most cases, globs can achieve the same effect. For the above example, a matching glob would be `!(*test).js`.
404
405</details>
406
407### Example: Use relative paths for commands
408
409<details>
410 <summary>Click to expand</summary>
411
412```js
413import path from 'path'
414
415export default {
416 '*.ts': (absolutePaths) => {
417 const cwd = process.cwd()
418 const relativePaths = absolutePaths.map((file) => path.relative(cwd, file))
419 return `ng lint myProjectName --files ${relativePaths.join(' ')}`
420 },
421}
422```
423
424</details>
425
426## Reformatting the code
427
428Tools like [Prettier](https://prettier.io), ESLint/TSLint, or stylelint can reformat your code according to an appropriate config by running `prettier --write`/`eslint --fix`/`tslint --fix`/`stylelint --fix`. Lint-staged will automatically add any modifications to the commit as long as there are no errors.
429
430```json
431{
432 "*.js": "prettier --write"
433}
434```
435
436Prior to version 10, tasks had to manually include `git add` as the final step. This behavior has been integrated into lint-staged itself in order to prevent race conditions with multiple tasks editing the same files. If lint-staged detects `git add` in task configurations, it will show a warning in the console. Please remove `git add` from your configuration after upgrading.
437
438## Examples
439
440All examples assume you've already set up lint-staged in the `package.json` file and [husky](https://github.com/typicode/husky) in its own config file.
441
442```json
443{
444 "name": "My project",
445 "version": "0.1.0",
446 "scripts": {
447 "my-custom-script": "linter --arg1 --arg2"
448 },
449 "lint-staged": {}
450}
451```
452
453In `.husky/pre-commit`
454
455```shell
456#!/usr/bin/env sh
457. "$(dirname "$0")/_/husky.sh"
458
459npx lint-staged
460```
461
462_Note: we don't pass a path as an argument for the runners. This is important since lint-staged will do this for you._
463
464### ESLint with default parameters for `*.js` and `*.jsx` running as a pre-commit hook
465
466<details>
467 <summary>Click to expand</summary>
468
469```json
470{
471 "*.{js,jsx}": "eslint"
472}
473```
474
475</details>
476
477### Automatically fix code style with `--fix` and add to commit
478
479<details>
480 <summary>Click to expand</summary>
481
482```json
483{
484 "*.js": "eslint --fix"
485}
486```
487
488This will run `eslint --fix` and automatically add changes to the commit.
489
490</details>
491
492### Reuse npm script
493
494<details>
495 <summary>Click to expand</summary>
496
497If you wish to reuse a npm script defined in your package.json:
498
499```json
500{
501 "*.js": "npm run my-custom-script --"
502}
503```
504
505The following is equivalent:
506
507```json
508{
509 "*.js": "linter --arg1 --arg2"
510}
511```
512
513</details>
514
515### Use environment variables with linting commands
516
517<details>
518 <summary>Click to expand</summary>
519
520Linting commands _do not_ support the shell convention of expanding environment variables. To enable the convention yourself, use a tool like [`cross-env`](https://github.com/kentcdodds/cross-env).
521
522For example, here is `jest` running on all `.js` files with the `NODE_ENV` variable being set to `"test"`:
523
524```json
525{
526 "*.js": ["cross-env NODE_ENV=test jest --bail --findRelatedTests"]
527}
528```
529
530</details>
531
532### Automatically fix code style with `prettier` for any format Prettier supports
533
534<details>
535 <summary>Click to expand</summary>
536
537```json
538{
539 "*": "prettier --ignore-unknown --write"
540}
541```
542
543</details>
544
545### Automatically fix code style with `prettier` for JavaScript, TypeScript, Markdown, HTML, or CSS
546
547<details>
548 <summary>Click to expand</summary>
549
550```json
551{
552 "*.{js,jsx,ts,tsx,md,html,css}": "prettier --write"
553}
554```
555
556</details>
557
558### Stylelint for CSS with defaults and for SCSS with SCSS syntax
559
560<details>
561 <summary>Click to expand</summary>
562
563```json
564{
565 "*.css": "stylelint",
566 "*.scss": "stylelint --syntax=scss"
567}
568```
569
570</details>
571
572### Run PostCSS sorting and Stylelint to check
573
574<details>
575 <summary>Click to expand</summary>
576
577```json
578{
579 "*.scss": ["postcss --config path/to/your/config --replace", "stylelint"]
580}
581```
582
583</details>
584
585### Minify the images
586
587<details>
588 <summary>Click to expand</summary>
589
590```json
591{
592 "*.{png,jpeg,jpg,gif,svg}": "imagemin-lint-staged"
593}
594```
595
596<details>
597 <summary>More about <code>imagemin-lint-staged</code></summary>
598
599[imagemin-lint-staged](https://github.com/tomchentw/imagemin-lint-staged) is a CLI tool designed for lint-staged usage with sensible defaults.
600
601See more on [this blog post](https://medium.com/@tomchentw/imagemin-lint-staged-in-place-minify-the-images-before-adding-to-the-git-repo-5acda0b4c57e) for benefits of this approach.
602
603</details>
604</details>
605
606### Typecheck your staged files with flow
607
608<details>
609 <summary>Click to expand</summary>
610
611```json
612{
613 "*.{js,jsx}": "flow focus-check"
614}
615```
616
617</details>
618
619### Integrate with Next.js
620
621<details>
622 <summary>Click to expand</summary>
623
624```js
625// .lintstagedrc.js
626// See https://nextjs.org/docs/basic-features/eslint#lint-staged for details
627
628const path = require('path')
629
630const buildEslintCommand = (filenames) =>
631 `next lint --fix --file ${filenames.map((f) => path.relative(process.cwd(), f)).join(' --file ')}`
632
633module.exports = {
634 '*.{js,jsx,ts,tsx}': [buildEslintCommand],
635}
636```
637
638</details>
639
640## Frequently Asked Questions
641
642### The output of commit hook looks weird (no colors, duplicate lines, …)
643
644<details>
645 <summary>Click to expand</summary>
646
647Git 2.36.0 introduced a change to hooks where they were no longer run in the original TTY.
648This was fixed in 2.37.0:
649
650https://raw.githubusercontent.com/git/git/master/Documentation/RelNotes/2.37.0.txt
651
652> - In Git 2.36 we revamped the way how hooks are invoked. One change
653> that is end-user visible is that the output of a hook is no longer
654> directly connected to the standard output of "git" that spawns the
655> hook, which was noticed post release. This is getting corrected.
656> (merge [a082345372](https://github.com/git/git/commit/a082345372) ab/hooks-regression-fix later to maint).
657
658</details>
659
660### Can I use `lint-staged` via node?
661
662<details>
663 <summary>Click to expand</summary>
664
665Yes!
666
667```js
668import lintStaged from 'lint-staged'
669
670try {
671 const success = await lintStaged()
672 console.log(success ? 'Linting was successful!' : 'Linting failed!')
673} catch (e) {
674 // Failed to load configuration
675 console.error(e)
676}
677```
678
679Parameters to `lintStaged` are equivalent to their CLI counterparts:
680
681```js
682const success = await lintStaged({
683 allowEmpty: false,
684 concurrent: true,
685 configPath: './path/to/configuration/file',
686 cwd: process.cwd(),
687 debug: false,
688 maxArgLength: null,
689 quiet: false,
690 relative: false,
691 shell: false,
692 stash: true,
693 verbose: false,
694})
695```
696
697You can also pass config directly with `config` option:
698
699```js
700const success = await lintStaged({
701 allowEmpty: false,
702 concurrent: true,
703 config: { '*.js': 'eslint --fix' },
704 cwd: process.cwd(),
705 debug: false,
706 maxArgLength: null,
707 quiet: false,
708 relative: false,
709 shell: false,
710 stash: true,
711 verbose: false,
712})
713```
714
715The `maxArgLength` option configures chunking of tasks into multiple parts that are run one after the other. This is to avoid issues on Windows platforms where the maximum length of the command line argument string is limited to 8192 characters. Lint-staged might generate a very long argument string when there are many staged files. This option is set automatically from the cli, but not via the Node.js API by default.
716
717</details>
718
719### Using with JetBrains IDEs _(WebStorm, PyCharm, IntelliJ IDEA, RubyMine, etc.)_
720
721<details>
722 <summary>Click to expand</summary>
723
724_**Update**_: The latest version of JetBrains IDEs now support running hooks as you would expect.
725
726When using the IDE's GUI to commit changes with the `precommit` hook, you might see inconsistencies in the IDE and command line. This is [known issue](https://youtrack.jetbrains.com/issue/IDEA-135454) at JetBrains so if you want this fixed, please vote for it on YouTrack.
727
728Until the issue is resolved in the IDE, you can use the following config to work around it:
729
730husky v1.x
731
732```json
733{
734 "husky": {
735 "hooks": {
736 "pre-commit": "lint-staged",
737 "post-commit": "git update-index --again"
738 }
739 }
740}
741```
742
743husky v0.x
744
745```json
746{
747 "scripts": {
748 "precommit": "lint-staged",
749 "postcommit": "git update-index --again"
750 }
751}
752```
753
754_Thanks to [this comment](https://youtrack.jetbrains.com/issue/IDEA-135454#comment=27-2710654) for the fix!_
755
756</details>
757
758### How to use `lint-staged` in a multi-package monorepo?
759
760<details>
761 <summary>Click to expand</summary>
762
763Install _lint-staged_ on the monorepo root level, and add separate configuration files in each package. When running, _lint-staged_ will always use the configuration closest to a staged file, so having separate configuration files makes sure linters do not "leak" into other packages.
764
765For example, in a monorepo with `packages/frontend/.lintstagedrc.json` and `packages/backend/.lintstagedrc.json`, a staged file inside `packages/frontend/` will only match that configuration, and not the one in `packages/backend/`.
766
767**Note**: _lint-staged_ discovers the closest configuration to each staged file, even if that configuration doesn't include any matching globs. Given these example configurations:
768
769```js
770// ./.lintstagedrc.json
771{ "*.md": "prettier --write" }
772```
773
774```js
775// ./packages/frontend/.lintstagedrc.json
776{ "*.js": "eslint --fix" }
777```
778
779When committing `./packages/frontend/README.md`, it **will not run** _prettier_, because the configuration in the `frontend/` directory is closer to the file and doesn't include it. You should treat all _lint-staged_ configuration files as isolated and separated from each other. You can always use JS files to "extend" configurations, for example:
780
781```js
782import baseConfig from '../.lintstagedrc.js'
783
784export default {
785 ...baseConfig,
786 '*.js': 'eslint --fix',
787}
788```
789
790To support backwards-compatibility, monorepo features require multiple _lint-staged_ configuration files present in the git repo. If you still want to run _lint-staged_ in only one of the packages in a monorepo, you can either add an "empty" _lint-staged_ configuration to the root of the repo (so that there's two configs in total), or alternatively run _lint-staged_ with the `--cwd` option pointing to your package directory (for example, `lint-staged --cwd packages/frontend`).
791
792</details>
793
794### Can I lint files outside of the current project folder?
795
796<details>
797 <summary>Click to expand</summary>
798
799tl;dr: Yes, but the pattern should start with `../`.
800
801By default, `lint-staged` executes linters only on the files present inside the project folder(where `lint-staged` is installed and run from).
802So this question is relevant _only_ when the project folder is a child folder inside the git repo.
803In certain project setups, it might be desirable to bypass this restriction. See [#425](https://github.com/okonet/lint-staged/issues/425), [#487](https://github.com/okonet/lint-staged/issues/487) for more context.
804
805`lint-staged` provides an escape hatch for the same(`>= v7.3.0`). For patterns that start with `../`, all the staged files are allowed to match against the pattern.
806Note that patterns like `*.js`, `**/*.js` will still only match the project files and not any of the files in parent or sibling directories.
807
808Example repo: [sudo-suhas/lint-staged-django-react-demo](https://github.com/sudo-suhas/lint-staged-django-react-demo).
809
810</details>
811
812### Can I run `lint-staged` in CI, or when there are no staged files?
813
814<details>
815 <summary>Click to expand</summary>
816
817Lint-staged will by default run against files staged in git, and should be run during the git pre-commit hook, for example. It's also possible to override this default behaviour and run against files in a specific diff, for example
818all changed files between two different branches. If you want to run _lint-staged_ in the CI, maybe you can set it up to compare the branch in a _Pull Request_/_Merge Request_ to the target branch.
819
820Try out the `git diff` command until you are satisfied with the result, for example:
821
822```
823git diff --diff-filter=ACMR --name-only master...my-branch
824```
825
826This will print a list of _added_, _changed_, _modified_, and _renamed_ files between `master` and `my-branch`.
827
828You can then run lint-staged against the same files with:
829
830```
831npx lint-staged --diff="master...my-branch"
832```
833
834</details>
835
836### Can I use `lint-staged` with `ng lint`
837
838<details>
839 <summary>Click to expand</summary>
840
841You should not use `ng lint` through _lint-staged_, because it's designed to lint an entire project. Instead, you can add `ng lint` to your git pre-commit hook the same way as you would run lint-staged.
842
843See issue [!951](https://github.com/okonet/lint-staged/issues/951) for more details and possible workarounds.
844
845</details>
846
847### How can I ignore files from `.eslintignore`?
848
849<details>
850 <summary>Click to expand</summary>
851
852ESLint throws out `warning File ignored because of a matching ignore pattern. Use "--no-ignore" to override` warnings that breaks the linting process ( if you used `--max-warnings=0` which is recommended ).
853
854#### ESLint < 7
855
856<details>
857 <summary>Click to expand</summary>
858
859Based on the discussion from [this issue](https://github.com/eslint/eslint/issues/9977), it was decided that using [the outlined script ](https://github.com/eslint/eslint/issues/9977#issuecomment-406420893)is the best route to fix this.
860
861So you can setup a `.lintstagedrc.js` config file to do this:
862
863```js
864import { CLIEngine } from 'eslint'
865
866export default {
867 '*.js': (files) => {
868 const cli = new CLIEngine({})
869 return 'eslint --max-warnings=0 ' + files.filter((file) => !cli.isPathIgnored(file)).join(' ')
870 },
871}
872```
873
874</details>
875
876#### ESLint >= 7
877
878<details>
879 <summary>Click to expand</summary>
880
881In versions of ESLint > 7, [isPathIgnored](https://eslint.org/docs/developer-guide/nodejs-api#-eslintispathignoredfilepath) is an async function and now returns a promise. The code below can be used to reinstate the above functionality.
882
883Since [10.5.3](https://github.com/okonet/lint-staged/releases), any errors due to a bad ESLint config will come through to the console.
884
885```js
886import { ESLint } from 'eslint'
887
888const removeIgnoredFiles = async (files) => {
889 const eslint = new ESLint()
890 const isIgnored = await Promise.all(
891 files.map((file) => {
892 return eslint.isPathIgnored(file)
893 })
894 )
895 const filteredFiles = files.filter((_, i) => !isIgnored[i])
896 return filteredFiles.join(' ')
897}
898
899export default {
900 '**/*.{ts,tsx,js,jsx}': async (files) => {
901 const filesToLint = await removeIgnoredFiles(files)
902 return [`eslint --max-warnings=0 ${filesToLint}`]
903 },
904}
905```
906
907</details>
908
909#### ESLint >= 8.51.0 && [Flat ESLint config](https://eslint.org/docs/latest/use/configure/configuration-files-new)
910
911<details>
912 <summary>Click to expand</summary>
913
914ESLint v8.51.0 introduced [`--no-warn-ignored` CLI flag](https://eslint.org/docs/latest/use/command-line-interface#--no-warn-ignored). It suppresses the `warning File ignored because of a matching ignore pattern. Use "--no-ignore" to override` warning, so manually ignoring files via `eslint.isPathIgnored` is no longer necessary.
915
916```json
917{
918 "*.js": "eslint --max-warnings=0 --no-warn-ignored"
919}
920```
921
922**NOTE:** `--no-warn-ignored` flag is only available when [Flat ESLint config](https://eslint.org/docs/latest/use/configure/configuration-files-new) is used.
923
924</details>
925
926</details>