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?

Answer 1

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

Answer 2

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):

1. Upgrade lint-staged package to the latest version
2. 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"
  ]
}

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