ESLint 报错：Parsing error: Unexpected token import 解决方法

前言：在使用 ES6 模块化的时候，使用 ESLint 会经常遇到 Parsing error: Unexpected token import 的报错，本文将详细介绍这个报错的原因和解决方法。

问题描述

在使用 ES6 模块化的时候，如果使用了 import/export 语句，ESLint 会报错：

import Vue from 'vue';

export default {
  name: 'app',
  components: {
    Vue
  }
}

报错信息为：

Parsing error: Unexpected token import

问题原因

这个报错的原因是因为 ESLint 默认使用的是 ES5 的语法解析器，而 ES6 的 import/export 语句是 ES5 不支持的语法，所以会出现解析错误。

解决方法

解决这个问题的方法有两种：

方法一：使用 babel-eslint

babel-eslint 是一个 ESLint 的插件，可以让 ESLint 使用 babel 的语法解析器，从而支持 ES6 的语法。

1. 安装 babel-eslint：

npm install babel-eslint --save-dev

1. 在 .eslintrc.js 中添加 parserOptions 配置项：

module.exports = {
  parserOptions: {
    parser: 'babel-eslint'
  }
}

1. 重新运行 ESLint：

eslint yourfile.js

方法二：使用 eslint-plugin-import

eslint-plugin-import 是一个 ESLint 的插件，可以让 ESLint 支持 import/export 语句。

1. 安装 eslint-plugin-import：

npm install eslint-plugin-import --save-dev

1. 在 .eslintrc.js 中添加 plugins 和 rules 配置项：

-- -------------------- ---- -------
-------------- - -
  -------- -
    --------
  --
  ------ -
    ----------------------- --------
    --------------- --------
    ----------------- --------
    ------------------- -------
  -
-

1. 重新运行 ESLint：

eslint yourfile.js

总结

ESLint 报错：Parsing error: Unexpected token import 的问题是因为 ESLint 默认使用的是 ES5 的语法解析器，而 ES6 的 import/export 语句是 ES5 不支持的语法，解决这个问题的方法有两种：使用 babel-eslint 或者使用 eslint-plugin-import。在使用 ESLint 进行代码检查的时候，需要根据项目实际情况选择合适的解决方法，从而避免出现不必要的报错。

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