Next.jsでhuskyを使ったcommit時lintエラー検出とGitHub Desktop対応

> cd my-app

> npm install

> git add .
> git commit -m "ごにょごにょ開発した"

> npx create-next-app@latest
Need to install the following packages:
  create-next-app@latest
Ok to proceed? (y) y
√ What is your project named? ... my-app
√ Would you like to use TypeScript with this project? ... Yes
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use Tailwind CSS with this project? ... Yes
√ Would you like to use `src/` directory with this project? ... No
√ Use App Router (recommended)? ... Yes
√ Would you like to customize the default import alias? ... No
Creating a new Next.js app in c:\dev\my-app.

> cd my-app
> npm install --save-dev husky lint-staged

> npx husky-init

	hooksPath = .husky

> git config --local core.hooksPath
.husky

  "scripts": {
    ・・・,
    "prepare": "husky install"

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

npm test

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

npm test

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

npx lint-staged

const path = require('path');

const buildEslintCommand = (filenames) =>
  `next lint --fix --file ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(' --file ')}`;

module.exports = {
  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
};

module.exports = {
  "<pattern>": "<command>",
  "<pattern>": "<command>",
  // ...
}

//パスに関わる処理をしたいため、pathモジュールを読み込み
const path = require('path');

//buildEslintCommandは、lint-stagedに実行させたいコマンド
//を生成する関数（アロー関数式）
//filenamesは、引数で配列で渡される。
const buildEslintCommand = (filenames) =>
//`文字列${式}`のテンプレートリテラル構文
//fは、filenamesの１要素（１ファイルのパス）
//process.cwd()は、カレントディレクトリ
//path.relative(process.cwd(), f)でfの相対パスを取得
//.join(' --file ')は、--file 2番目のファイル --file 3番目のファイル
//のように --file で連結する意味
//--fixでESLintの自動修正機能が有効
  `next lint --fix --file ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(' --file ')}`;

//設定したいことの本体
module.exports = {
  //*.{js,jsx,ts,tsx}にマッチするファイルに対して、buildEslintCommand関数を実行
  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
  //右側のコマンドは、[複数コマンド]とできるけど、今回は、buildEslintCommandのみ。
};

$ git add .
$ git commit -m "test"
[STARTED] Preparing lint-staged...
[SUCCESS] Preparing lint-staged...
[STARTED] Running tasks for staged files...
[STARTED] .lintstagedrc.js — 1 file
[STARTED] *.{js,jsx,ts,tsx} — 1 file
[STARTED] next lint --fix --file app\page.tsx
[FAILED] next lint --fix --file app\page.tsx [FAILED]
[FAILED] next lint --fix --file app\page.tsx [FAILED]
[FAILED] next lint --fix --file app\page.tsx [FAILED]
[STARTED] Applying modifications from tasks...
[SKIPPED] Skipped because of errors from tasks.
[STARTED] Reverting to original state because of errors...
[SUCCESS] Reverting to original state because of errors...
[STARTED] Cleaning up temporary files...
[SUCCESS] Cleaning up temporary files...

× next lint --fix --file app\page.tsx:
- warn Detected next.config.js, no exported configuration found. https://nextjs.org/docs/messages/empty-configuration

./app/page.tsx
Error: Parsing error: '}' expected.

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
husky - pre-commit hook exited with code 1 (error)

$ git reset HEAD
$ git add  .
$ git commit -m "test"
[STARTED] Preparing lint-staged...
[SUCCESS] Preparing lint-staged...
[STARTED] Running tasks for staged files...
[STARTED] .lintstagedrc.js — 1 file
[STARTED] *.{js,jsx,ts,tsx} — 1 file
[STARTED] next lint --fix --file app\page.tsx
[SUCCESS] next lint --fix --file app\page.tsx
[SUCCESS] *.{js,jsx,ts,tsx} — 1 file
[SUCCESS] .lintstagedrc.js — 1 file
[SUCCESS] Running tasks for staged files...
[STARTED] Applying modifications from tasks...
[SUCCESS] Applying modifications from tasks...
[STARTED] Cleaning up temporary files...
[SUCCESS] Cleaning up temporary files...
[main fbf1d1c] test
 1 file changed, 1 insertion(+)

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

npx lint-staged

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

if [ "$(expr substr "$(uname -s)" 1 5)" = "MINGW" ]; then
. npx lint-staged
else
npx lint-staged
fi

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

if [ "$(expr substr "$(uname -s)" 1 5)" = "MINGW" ]; then
npx.cmd lint-staged
else
npx lint-staged
fi

> npx create-react-app my-app --template typescript
> cd my-app

> npx eslint --init

> npx eslint src --ext .tsx --ext .ts
Warning: React version not specified in eslint-plugin-react settings.

    "settings": {
        "react": {
            "version": "detect"
        }
    },

> npx eslint src --ext .tsx --ext .ts

> npm install --save-dev husky lint-staged

> npx husky-init

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

npm test

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

npx lint-staged

  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": "eslint --cache --fix"
  },

$ git add .
$ git commit -m "test"
[STARTED] Preparing lint-staged...
[SUCCESS] Preparing lint-staged...
[STARTED] Hiding unstaged changes to partially staged files...
[SUCCESS] Hiding unstaged changes to partially staged files...
[STARTED] Running tasks for staged files...
[STARTED] package.json — 5 files
[STARTED] src/**/*.{js,jsx,ts,tsx} — 1 file
[STARTED] eslint --cache --fix
[FAILED] eslint --cache --fix [FAILED]
[FAILED] eslint --cache --fix [FAILED]
[FAILED] eslint --cache --fix [FAILED]
[STARTED] Applying modifications from tasks...
[SKIPPED] Skipped because of errors from tasks.
[STARTED] Restoring unstaged changes to partially staged files...
[SKIPPED] Skipped because of errors from tasks.
[STARTED] Reverting to original state because of errors...
[SUCCESS] Reverting to original state because of errors...
[STARTED] Cleaning up temporary files...
[SUCCESS] Cleaning up temporary files...

× eslint --cache --fix:

C:\dev\my-app\src\index.tsx
  8:0  error  Parsing error: Argument expression expected

✖ 1 problem (1 error, 0 warnings)

husky - pre-commit hook exited with code 1 (error)