NextJS - lint-staged 的 Linter 不起作用

Question

我已经使用 NextJS 设置了 lint-staged 和 husky。当我们运行

yarn lint

时，它会在后台调用

yarn next lint

并且它可以工作。当我们调用

yarn lint-staged

时，我们收到一个错误：

✖ yarn lint:
> Couldn't find a `pages` directory. Please create one under the project root

重点是

pages

目录存在于

src

下并且它应该可以工作。这是怎么回事？

package.json：

{
  "scripts": {
    "lint": "next lint"
  },
  "lint-staged": {
    "src/**/*.{ts,tsx}": [
      "yarn lint"
    ]
  }
}

Answer 1

在 lint-staged 下使用“eslint”而不是“yarn lint”。

我相信下一个 lint 有一些与 lint-staged 不兼容的固有配置。

“eslint”在预提交期间捕获预期的错误

package.json

{
  "scripts": {
    "lint": "next lint"
  },
  "lint-staged": {
    "src/**/*.{ts,tsx}": [
      "eslint"
    ]
  }
}

Answer 2

正如 nextjs 的 docs 中所写，下一个 lint 需要配置 lint-staged。

而不是package.json中的配置，

在根文件夹中创建文件： .lintstagedrc.js

const path = require('path')
 
const buildEslintCommand = (filenames) =>
  `next lint --file ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(' --file ')}`
 
module.exports = {
  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
}