ESLint 报错解决：Unexpected token export-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常使用最新的 JavaScript 特性来提高代码的可读性和性能。但在使用 ES6 或以上版本的时候，有时会遇到 ESLint 报错：Unexpected token export，这意味着你的代码中使用了未被支持的语法。本文将介绍这个错误的一些常见原因和解决方法，同时提供一些示例代码和指导意义。

1. 常见原因

1.1 缺少 Babel 配置

Babel 是 JavaScript 编译器，可以将 ES6 或以上版本的代码编译成旧版 JavaScript 代码。如果你的项目中缺少 Babel 配置，那么你就无法使用一些新的语法特性。这时 ESLint 就会报错，提示你使用了未被支持的语法。

1.2 使用了未被支持的语法

即使你已经配置好了 Babel，仍然有些新的语法特性并没有被 Babel 支持。在这种情况下，ESLint 仍然会报错。你可以查看 ESLint 的文档，找到哪些语法特性被支持，哪些不被支持。

2. 解决方法

2.1 配置 Babel

为了让 ESLint 正确识别新的语法特性，你需要在项目中添加 Babel 配置文件。你可以使用官方推荐的 .babelrc 配置文件，或者使用 package.json 文件。下面是一个使用 .babelrc 配置文件的示例：

{
  "presets": [
    "@babel/preset-env"
  ]
}

这个配置文件告诉 Babel 使用 @babel/preset-env 这个预设，该预设包含了大部分 ES6 或以上版本的语法特性。

2.2 添加 ESLint 解析器

除了配置 Babel，你还需要告诉 ESLint 哪些新的语法特性是支持的。你可以使用 ESLint 的解析器，让它识别新的语法特性。下面是一个使用 babel-eslint 解析器的示例：

安装依赖：

npm install babel-eslint --save-dev

在 ESLint 配置文件中添加以下内容：

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2018
  }
}

这个配置告诉 ESLint 使用 babel-eslint 解析器，同时设置 ECMAScript 版本为 2018，以便支持更多的语法特性。

2.3 禁用 ESLint 规则

如果你仍然遇到了 Unexpected token export 错误，那么你可能需要禁用一些 ESLint 规则。这些规则可能不支持新的语法特性，导致 ESLint 报错。在禁用规则之前，你需要确定这些规则是不必要的或者可以被替代的。你可以通过在 .eslintrc 文件中添加以下内容来禁用规则：

{
  "rules": {
    "import/no-unresolved": "off",
    "node/no-missing-import": "off",
    "node/no-missing-require": "off"
  }
}

在这个示例中，我们禁用了三个规则。

3. 示例代码

下面是一个使用 import/export 语法的示例代码：

import { sayHello } from './utils';

export function sayHi() {
  console.log('Hi');
  sayHello();
}

这段代码使用了 import/export 语法。如果你没有配置 Babel 和 ESLint，那么 ESLint 会报错：Unexpected token export。

为了解决这个错误，你需要添加 .babelrc 配置文件和 babel-eslint 解析器。然后在 ESLint 配置文件中添加以下内容：

// www.javascriptcn.com code example
{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "import/no-unresolved": "off",
    "node/no-missing-import": "off",
    "node/no-missing-require": "off"
  }
}

4. 指导意义

ESLint 报错：Unexpected token export 是一个常见的错误，在日常开发中经常会遇到。这个错误的出现提示你需要配置 Babel 和 ESLint，以便支持更多的语法特性。更重要的是，这个错误提示我们学习最新的 JavaScript 语法特性，并在实践中使用它们。新的语法特性可以提高代码的可读性和性能，同时让我们的代码更加现代化。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67bcfa39a231b2b7edeef829

ESLint 报错解决：Unexpected token export