ESLint Prettier：解析错误：意外的标记为

Question

我对 ESLint、Prettier 和 Babel 相当陌生；仍在学习他们如何一起工作。 我正在使用 Visual Studio Code 1.96.4，带有 ESLint 和 Prettier 扩展。

在我的一个 JavaScript 文件中，我有一个带有类型断言的导入语句。 例如：

import * as manifest from './package.json' with { type: 'json' };
                                           ~~~~

我的 IDE 告诉我 ESLint 的上述导入语句有问题：

Parsing error: Unexpected token with | eslint

我有一个

eslint.config.js

文件，它导出一个

eslint.Linter.Config

数组，指定我自己的配置对象（具有语言选项和规则），后面是

@eslint/js

的推荐配置，以及 ESLint Prettier 插件推荐的配置。

import pluginJs from '@eslint/js';
import eslintPluginPrettier from 'eslint-plugin-prettier/recommended';
import globals from 'globals';

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.jest
      },
      ecmaVersion: 2024,
      sourceType: 'module'
    },
    rules: {
      ...
    }
  },
  pluginJs.configs.recommended,
  eslintPluginPrettier    // <-- Removing this fixes the problem, but then am I still running Prettier at lint-time?
];

这些是（我认为？）相关的已安装软件包：

"devDependencies": {
  "@babel/core": "^7.26.0",
  "@babel/eslint-parser": "^7.26.5",
  "@babel/plugin-syntax-import-assertions": "^7.26.0",
  ...
  "@eslint/eslintrc": "^3.2.0",
  "@eslint/js": "^9.18.0",
  ...
  "eslint": "^9.18.0",
  "eslint-config-prettier": "^10.0.1",
  "eslint-plugin-prettier": "^5.2.3",
  ...
  "prettier": "^3.4.2",
  ...
},

我还有一个

.prettierrc

文件，它是一个简单的 JSON 对象，其中只有规则，没有插件或任何东西。 而且不知道

.babelrc

和这个有没有关系？

如何让 IDE 错误消失，同时仍然执行 ESLint 和 Prettier 规则？

Answer 1

您已经安装了

@babel/plugin-syntax-import-assertions

，但您还需要通过正确的配置让 ESLint 使用

@babel/eslint-parser

：

import pluginJs from '@eslint/js';
import eslintPluginPrettier from 'eslint-plugin-prettier/recommended';
import globals from 'globals';

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    parser: '@babel/eslint-parser',  // Set Babel as the parser
    parserOptions: {
      requireConfigFile: false,  // Prevents needing a separate Babel config file
      babelOptions: {
        plugins: ['@babel/plugin-syntax-import-assertions'],  // Ensure the plugin is enabled
      },
    },
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.jest,
      },
      ecmaVersion: 2024,
      sourceType: 'module',
    },
    rules: {
      // Your custom rules
    },
  },
  pluginJs.configs.recommended,
  eslintPluginPrettier,  // Ensures Prettier runs as well
];