特定のファイルをlint-stagedの対象から除外する

この記事のゴール

以下の理解が得られることを本記事のゴールとします

• .eslintignoreで該当するファイルをpre-commit時の対象から除外する方法が理解できること

自動生成したファイルをlint-stagedが検知してエラーが出た

筆者の所属しているプロジェクトではNestJSで作ったAPIをNext.jsでも呼び出せるようにopenapi-generator-cliを利用しているのですが、その過程で自動生成されたファイルがlint-stagedで検知されエラーが吐かれてコミットできないという問題が発生していました。

元々、自分が書いたコードをきれいにしてリモートにあるコードをきれいに保つ目的が、その目的外のところで動作していてそれを避けたかったというのがこの記事を書こうと思った背景です。

.eslintignoreの設定をlint-stagedに反映させる

と思ったらREADMEのFAQにしっかり書いてありました。

https://github.com/okonet/lint-staged#how-can-i-ignore-files-from-eslintignore

lint-stagedが走るタイミングで.eslintignoreファイルを読み込んで、該当するディレクトリやファイルを除外するようです。

手順

筆者は以下のケースで設定したのでケースに応じて書き換えてください

• ESLint: v7.32.0
• pre-commitで.eslintignoreに該当するファイルを除外したい

また、筆者と同様の環境はこちらの記事で作成できます。

1. .lintstagedrc.jsを作成する

注意：Eslintのバージョンによって記載する内容が異なるので注意してください。

ESLint < 7

import { CLIEngine } from 'eslint'

export default {
  '*.js': (files) => {
    const cli = new CLIEngine({})
    return 'eslint --max-warnings=0 ' + files.filter((file) => !cli.isPathIgnored(file)).join(' ')
  },
}

ESLint >= 7

const { ESLint } = require('eslint')

const removeIgnoredFiles = async files => {
  const eslint = new ESLint()
  const isIgnored = await Promise.all(
    files.map(file => {
      return eslint.isPathIgnored(file)
    })
  )
  const filteredFiles = files.filter((_, i) => !isIgnored[i])
  return filteredFiles.join(' ')
}

module.exports = {
  '**/*.{ts,tsx,js,jsx}': async files => {
    const filesToLint = await removeIgnoredFiles(files)
    return [`eslint --max-warnings=0 ${filesToLint}`]
  },
}

2. .husky/pre-commitのコマンドを変更する

次に手順1で設定したファイルを動作するタイミングで呼び出すように以下のように書き換えます。

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

npx lint-staged --config .lintstagedrc.js

これで.eslintignoreに設定したパスはlint-stagedの対象から除外されるようになりました。

余談

この記事で少しでも「husky導入してみようかな？」と思ったら導入記事も書いているのでぜひ読んでみてください！

ではまた！

参考記事