如何获得与预提交一起使用的新型 ESLint 配置？

Question

我有一个带有

.pre-commit-config.yaml

的项目，其中包含官方 ESLint 挂钩等。使用旧式

.eslintrc.json

配置时它可以完美运行，但用新式

eslint.config.js

替换它会导致它失败。

钩子配置如下所示：

  - repo: https://github.com/pre-commit/mirrors-eslint
    rev: v8.51.0
    hooks:
    - id: eslint
      types: [javascript]
      additional_dependencies: [
        '[email protected]',
        '[email protected]',
        '@eslint/js',
        '[email protected]'
      ]

运行

pre-commit install-hooks

，ESLint 本身和列出的依赖项似乎安装没有错误（没有创建

~/.cache/pre-commit/pre-commit.log

）。我没有全局安装 ESLint。

这是旧式的

.eslintc.json

配置，一切正常：

{
    "env": {
      "es2022": true,
      "browser": true
    },
    "extends": [
      "eslint:recommended",
      "prettier"
    ],
    "ignorePatterns": [
      "project/static/htmx/**"
    ],
    "parserOptions": {
      "sourceType": "module"
    },
    "rules": {}
}

然而，使用这个

eslint.config.js

会失败，尽管与 ESLint 文档中的新样式配置示例相比它似乎完全有效：

import globals from "globals";
import js from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  js.configs.recommended,
  eslintConfigPrettier,
  {
    languageOptions: {
      globals: {
        ...globals.browser,
      },
      sourceType: "module",
      ecmaVersion: 2022,
    },
  },
  {
    ignores: ["project/static/htmx/**"],
  },
];

这是运行时的错误

pre-commit run --all-files

:

eslint...................................................................Failed
- hook id: eslint
- exit code: 2

Oops! Something went wrong! :(

ESLint: 8.51.0

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'globals' imported from /Users/jkl/Development/foobar/eslint.config.js
Did you mean to import globals/index.js?
    at new NodeError (node:internal/errors:406:5)
    at packageResolve (node:internal/modules/esm/resolve:789:9)
    at moduleResolve (node:internal/modules/esm/resolve:838:20)
    at defaultResolve (node:internal/modules/esm/resolve:1043:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36)

如果我将其他两个导入移动到第一行，

ERR_MODULE_NOT_FOUND

也会同样升高，所以这不是

globals

问题。

尽管我在

eslint.config.js

中安装了这三个导入所需的所有依赖项，以便以记录的方式工作，但仍找不到它们。所以有些东西已经关闭了，事实上，该钩子在旧式配置中工作得很好，根本没有改变

.pre-commit-config.yaml

，这让我觉得要么a）我错过了一些关键的配置，要么b）ESLint钩子只是由于某种原因不支持新式配置，或者 c) ESLint 本身与新配置的组合和预提交安装它的方式有某种不兼容。

我在日常生活中不是 NodeJS 用户，也不熟悉 pre-commit 的内部工作原理。我很高兴进一步调试并发布更多信息来帮助解决这个问题，并为下一步寻找什么提供一些帮助。

Answer 1

我也对同样的事情感到困惑，但在 ESLint Discord 上某人的帮助下，我们找到了答案。

您需要一个包含以下内容的

package.json

文件：

{
    "type": "module",
    "devDependencies": {
        "eslint": "^8.56.0",
        "globals": "^13.24.0"
    }
}

在此处添加您需要的所有依赖项。

在您的 GitHub 工作流程文件中，您需要添加：

# Set up Node.js
 - name: Setup Node.js
   uses: actions/setup-node@v4
   with:
     node-version: '20'
 - run: npm install

在运行

pre-commit

检查之前。

希望有帮助。