代码之家 › 专栏 › 技术社区 › srbrills

ESLint预处理层:分析错误:意外的令牌

prettier eslint visual-studio-code javascript

-2

srbrills · 技术社区 · 1 周前

我对ESLint、Prettier和Babel相当陌生;仍在学习他们如何协同工作。我使用的是Visual Studio Code 1.96.4,带有ESLint和Prettier扩展。

在我的一个javascript文件中,我有一个带有类型断言的import语句。例如:

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

我的IDE告诉我ESLint上面的import语句有问题:

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规则?

1 回复 | 直到 1 周前

enzo 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
];

srbrills 1 周前

根据 enzo 的答案很好,我不得不告诉ESLint使用Babel作为我的解析器。我也能够继续使用我现有的 .babelrc 文件。 我必须重新启动VSCode才能使新的lint解析器选项工作。 此外,必须设置Prettier选项 endOfLine 到 auto 基本上忽略 CR (回车)错误。

import babelParser from '@babel/eslint-parser';  // Import parser.

...

export default [
{
  languageOptions: {
    globals: {
      ...globals.browser,
      ...globals.jest,
      ...globals.node
    },
    ecmaVersion: 2024,
    parser: babelParser,  // Assign parser.
    parserOptions: {
      requireConfigFile: false,
      sourceType: 'module',
      babelOptions: {
        babelrc: true  // Continue using Babel config file.
      }
    },
    sourceType: 'module'
  },