Run eslint "ONLY" on the staged files

Question

I am trying to use a pre-commit hook to detect eslint errors before commit happens. I am using husky and lint-staged. But it runs the lint command for all the files in src and not on staged files only. Here is my package.json file.

"scripts": {
    "test:ci": "cross-env CI=true react-scripts test --bail --passWithNoTests",
    "lint": "eslint src/**/*.{js,jsx}",
    "lint:fix": "eslint . --fix",
    "precommit": "npm run lint && npm run test:ci"
  }

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

"lint-staged": {
    "*.js": [
      "npm run precommit"
    ],
    "*.jsx": [
      "npm run precommit"
    ]
  }

Is there any way so that it works ONLY on staged files and not on other files present in the directory?

Devin Rhode · Answer 1 · 2022-11-13T14:45:52.110

4

With husky v7/lint-staged v11.2.0 - the staged files will simply by added onto the end of your command, separated by spaces. If you have a .husky/pre-commit file which calls npx lint-staged, and then you have a lint-staged config like so:

{
  '*.js': [
    'eslint'
  ]
}

And you modify src/foo.js and src/bar.js, the command that will be run is:

eslint src/foo.js src/bar.js

Doesn't matter what command you have inside of your lint-staged config. Files are just added onto end of command, separated by spaces.

These files will be passed to your test:ci command but they won't make it to your lint subcommand.

You can wrap in bash function... Something like this:

"precommit": "!runIt() { npm run lint $@ && npm run test:ci $@;}; runIt",

Wrote this on my phone, and I barely know bash, so syntax might be wrong

edited Nov 13 '22 at 14:45

answered Oct 06 '21 at 19:17

Devin Rhode

23,026
8
58
72

Another question I have, is how to get a list of all .js/ts/tsx/jsx files that have been modified between two git commits, but that will be in a different thread. – Devin Rhode Oct 06 '21 at 19:18
3

Okay @Devin, but what's the solution?? – sanjarcode Nov 12 '22 at 10:38
Added bash wrapper example – Devin Rhode Nov 13 '22 at 14:46

score 2 · Answer 2 · answered Jul 08 '21 at 09:52

According to this lint-staged example, I implemented that in order to lint only staged files (takes like 5 secs) except when there are more than 5 staged files, it checks all the repo (can take more than 1 min):

Upgrade lint-staged package to the latest version
Add a .lintstagedrc.js file at the root of your repo. It could contain something like this:

module.exports = {
  '**/*.js?(x)': (filenames) =>
    filenames.length > 5 ? 'eslint --ext .js,.jsx . --ignore-path .gitignore --fix .' : `eslint ${filenames.join(' ')} --fix`,
  "*.json": [
    "prettier --write"
  ]
}

Remove your old "lint-staged" command from the package.json file

score 2 · Answer 3 · answered Jan 30 '22 at 16:12

With the ESLint CLI you have a help parameter npx eslint -h, --help or you can check the CLI docs at the official ESLint docs page/CLI. There's a section related to caching, so that ESLint only looks at files that have been changed.

Caching:
  --cache                         Only check changed files - default: false
  --cache-file path::String       Path to the cache file. Deprecated: use --cache-location - default: .eslintcache
  --cache-location path::String   Path to the cache file or directory
  --cache-strategy String         Strategy to use for detecting changed files in the cache - either: metadata or content - default: metadata

score 1 · Answer 4 · edited Sep 01 '23 at 07:09

1

You will need to install two libraries, husky and lint-staged and you need to configure your pre-commit file that you can find inside the .husky folder and add this command to it

npx lint-staged

at the end the file will look like this in case you only want to run eslint

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

edited Sep 01 '23 at 07:09

Janar

2,623
1
22
32

answered Mar 30 '23 at 10:25

Mohammed Alabd

11
1

score -2 · Answer 5 · answered Jun 17 '20 at 09:25

-2

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    },
},
"lint-staged": {
    "*.js": [
        "eslint src/**/*.{js}",
        "cross-env CI=true react-scripts test --bail --passWithNoTests",
        "git add"
    ]
},

answered Jun 17 '20 at 09:25

hendrixchord

4,662
4
25
39

9

If this works, it needs some explanation as to _how_ `eslint src/**/*.{js}` will ONLY lint _staged_ files. I can't see any way that it would work. – Devin Rhode Oct 05 '21 at 16:57

Run eslint "ONLY" on the staged files

5 Answers5

Linked