解决使用 Vue CLI 时 ESLint 报错的问题-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会使用 Vue CLI 来进行项目搭建和管理。而在 Vue CLI 中，为了保证代码规范和风格的一致性，通常会使用 ESLint 进行代码检查。但有时候，在使用 Vue CLI 进行开发的过程中，可能会遇到 ESLint 报错的问题。那么，该如何解决这些问题呢？本文将为大家详细介绍解决该问题的方法。

问题描述

在使用 Vue CLI 进行开发时，我们可能会遇到以下问题：

在开发过程中，会出现 ESLint 报错的情况。
在新建 vue 组件时，会出现 Import 引入组件报错的情况。

这些问题都与 ESLint 的配置有关。

ESLint

ESLint 是一个开源的 JavaScript 代码检查工具，可以用来检查代码是否符合规范，并给出指导意见。ESLint 是根据我们配置的规则集来检查代码的。

在 Vue CLI 中，默认集成了 ESLint。在项目初始化时，会自动生成 .eslintrc.js 文件，这个配置文件包含了 ESLint 的规则集，可以对代码进行规范检查。

解决方法

方法一：禁用 ESlint 检查

这种方式虽然可以解决 ESLint 报错的问题，但是不建议这样做。

在项目根目录下的 .eslintrc.js 文件里有一个 extends 属性，它指定了 ESLint 的一个规则集。在开发过程中，如果某个规则与我们的代码不兼容，我们可以直接将这个规则禁用掉。

// javascriptcn.com 代码示例
module.exports = {
  // ...
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/prettier'
  ],
  // ...
  // 禁用规则
  rules: {
    'no-unused-vars': 'off'
  }
}

在 rules 属性中添加一个要禁用规则的对象，对象中键为要禁用的规则，值为 "off"，表示将该规则禁用掉。

方法二：修改 ESlint 检查规则

如果上述方法不可行，我们还可以通过修改 ESLint 规则集来解决问题。在修改规则之前，我们需要了解 ESLint 的规则集和配置。

预处理器

在修改规则之前，我们需要先了解一下 Vue 中的预处理器。预处理器是指在 Vue 中，可以使用类 HTML 语法的模板和 CSS 预处理器（如 Sass、Less 等）进行前端开发的方式。Vue 中内置了两种预处理器：

Pug（原名 Jade）：是一种 HTML 模板语言。
Stylus：是一种类似 CSS 的预处理器。

在使用 Vue CLI 开发项目时，可以自行选择是否选择预处理器。在新建 vue 项目时，默认没有启用预处理器。

样式格式化

在 Vue CLI 中，默认启用了 TypeScript 和 Prettier：TypeScript 是一种 JavaScript 的超集，是 Vue.js 的核心语言，而 Prettier 是一种代码格式化工具，可以自动对我们的代码进行格式化，保证代码风格的一致性。

在 .eslintrc.js 文件中，我们可以修改 eslint-plugin-prettier 插件的配置，来改变代码的格式化规则。下面是一份示例配置：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/prettier'
  ],
  plugins: [
    'prettier'
  ],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: false
      }
    ]
  }
}

其中，我们需要注意以下两点：

在 extends 属性中，我们需要添加 @vue/prettier 规则集，以便使用 prettier 。
在 rules 属性中，我们需要添加 "prettier/prettier": ["error", {...}] 规则，来配置 prettier 的格式化规则。其中，{...} 代表要格式化的规则，比如上面的示例中，我们将 semi 属性设置为了 false，表示需要清除行末分号。

修改预处理器与样式规则

有时候，我们可能需要使用预处理器或者自定义样式规则，这时，我们就需要修改 .eslintrc.js 文件，来适应我们的需求。

修改示例（开启 Pug）：

// javascriptcn.com 代码示例
const path = require('path')

module.exports = {
  // ...
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/prettier'
  ],
  plugins: [
    'prettier'
  ],
  rules: {
    // 不检查 jsx 语法
    'vue/no-unused-components': 'off',
    // 追加扩展名的规则
    'import/extensions': [
      'error',
      'always',
      {
        js: 'never',
        vue: 'never',
        pug: 'never' // 开启 pug
      }
    ]
  },
  settings: {
    'import/resolver': {
      webpack: {
        config: {
          resolve: {
            extensions: ['.js', '.vue', '.json', '.pug'] // 追加扩展名
          },
          alias: {
            vue$: 'vue/dist/vue.esm.js',
            '@': path.resolve(__dirname, './src'),
            '~': path.resolve(__dirname, './src/assets') // 别名配置
          }
        }
      },
    }
  }
}

上面的示例中，我们开启了 Pug，以及追加了扩展名的规则。对于 Pug，我们需要在 extensions 属性中定义 .pug 扩展名即可。

解决 Import 引入组件报错

有时候，在新建 Vue 组件时，我们可能会遇到 Import 引入组件报错的问题。这时，我们需要在.eslintrc.js 文件中进行配置，如下：

// javascriptcn.com 代码示例
module.exports = {
  // ..
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/prettier'
  ],
  rules: {
    // 抛出未 export error
    'import/prefer-default-export': 'off',
    // 不能从 SRC 下引入别的层级
    'import/no-relative-parent-imports': 'off',
    // 不能无后缀或结尾是 .js
    'import/extensions': [
      'error',
      'always',
      {
        // NOTE: 这里可以不用加 .vue，因为应该都是引入 vue 文件的，按照以前的规范
        js: 'never',
        vue: 'never'，
      }
    ],
  },
  // ...
}

在这里，我们需要注意以下这个规则。

'import/extensions': ['error', 'always', {...}] 配置，在这里，{...} 中的 vue: 'never' 表示，我们引入的 Vue 组件不需要加后缀；同理，如果你的项目中有 .tsx 或 .jsx 文件，你也可以在这里配置。

通过以上配置，我们就可以解决 Import 引入组件报错的问题了。

总结

本文主要介绍了如何解决使用 Vue CLI 时 ESLint 报错的问题。我们首先介绍了 ESLint 的基本概念和原理，然后详细阐述了两种解决方法：禁用 ESLint 检查和修改 ESLint 配置。最后，我们解决了 Import 引入组件报错的问题。通过本文的介绍，相信大家已经对这些问题有了更加深入和全面的认识。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6546ecda7d4982a6eb15469a