如何让 ESLint 9 使用 pug 模板？

Question

我的堆栈由 Pug 模板、JS (Jquery)、yaml 和 stylus 文件组成。我正在努力让 ESLint 与 Pug 一起工作。我已经安装了 eslint-plugin-pug 并将其添加到 eslint 配置文件中的插件中，但是它似乎不适用于 pug 文件的脚本部分。

import globals from 'globals';
import pluginJs from '@eslint/js';
import prettierPluginRecommended from 'eslint-plugin-prettier/recommended';
import pugPlugin from 'eslint-plugin-pug';

export default [
  pluginJs.configs.recommended,
  {
    files: ['**/*.js'],
    languageOptions: {
      sourceType: 'script',
      globals: {
        ...globals.browser,
        ...globals.jquery,
      },
    },
    rules: {
      'no-use-before-define': [
        'error',
        {
          functions: false,
          variables: true,
        },
      ],

      'no-unused-vars': 'warn',
      'no-undef': 'warn',
      'no-redeclare': 'warn',
      'no-console': 'warn',
      'no-duplicate-imports': 'error',
      'no-template-curly-in-string': 'error',
      'no-empty-function': 'error',
      'no-lonely-if': 'error',
      'no-magic-numbers': 'error',
      'no-var': 'error',

      'func-style': ['error', 'declaration'],
      'vars-on-top': 'error',
      'prefer-const': 'error',
      'require-await': 'error',

      'comma-dangle': ['error', 'always-multiline'],
      'default-case': 'error',
      'capitalized-comments': ['error', 'always'],
      'new-cap': ['error', { newIsCap: true }],
      'max-depth': ['error', 3],

      eqeqeq: 'error',
      camelcase: 'error',
      yoda: ['error', 'never', { exceptRange: true }],
    },
  },
  {
    files: ['**/*.pug'],
    plugins: { pugPlugin },
  },
  prettierPluginRecommended,
];

  "devDependencies": {
    "@eslint/js": "^9.11.0",
    "@prettier/plugin-pug": "^3.1.0",
    "eslint": "^8.57.1",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-pug": "^1.2.5",
    "globals": "^15.9.0",
    "prettier": "^3.3.3",
    "prettier-plugin-stylus": "^0.1.0"
  }

我尝试将 eslint 降级到 v8，因为该插件不支持 v9，但这似乎也不起作用。

目前，当我在 pug 文件上运行

npx eslint *.pug

时，它会给我

Parsing error: Unexpected token extends

（因为特定的 pug 模板扩展了通用 pug 文件。）

Answer 1

据我所知（我一直在努力解决同样的问题）是没有定义解析器。 Eslint 包含一个 JavaScript 解析器，您不必将“解析器”项添加到“languageOptions”中。

采用这个最小的 eslint 配置：

import pluginYaml from 'eslint-plugin-yaml';
import yamlParser from 'yaml-eslint-parser';

export default [
  {
    files: ['**/*.yaml', '**/*.yml'], // Target YAML files
    plugins: {
      yaml: pluginYaml,
    },
    languageOptions: {
      parser: yamlParser,
    },
    rules: {
      ...pluginYaml.configs.recommended.rules, // Use recommended YAML rules
    },
  },
];

如果注释掉解析器行和推荐的规则行，您将在 YAML 文件中的第一个冒号上收到意外的标记错误。简约的 JSON eslint 配置也会发生同样的问题。

遗憾的是，我还没有在 npm 上的任何地方找到 pug 的 eslint 解析器。

我已经切换到pug-lint。