在前端开发中，我们经常会使用 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 的一个规则集。在开发过程中，如果某个规则与我们的代码不兼容，我们可以直接将这个规则禁用掉。
-- -------------------- ---- -------
-------------- - -
-- ---
-------- -
-----------------------
---------------------
---------------
--
-- ---
-- ----
------ -
----------------- -----
-
-在 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 插件的配置，来改变代码的格式化规则。下面是一份示例配置：
-- -------------------- ---- -------
-------------- - -
-- ---
-------- -
-----------------------
---------------------
---------------
--
-------- -
----------
--
------ -
-------------------- -
--------
-
------------ -----
----- -----
-
-
-
-其中，我们需要注意以下两点：
- 在
extends属性中，我们需要添加@vue/prettier规则集，以便使用 prettier 。 - 在
rules属性中，我们需要添加"prettier/prettier": ["error", {...}]规则，来配置 prettier 的格式化规则。其中，{...}代表要格式化的规则，比如上面的示例中，我们将semi属性设置为了false，表示需要清除行末分号。
修改预处理器与样式规则
有时候，我们可能需要使用预处理器或者自定义样式规则，这时，我们就需要修改 .eslintrc.js 文件，来适应我们的需求。
修改示例（开启 Pug）：
-- -------------------- ---- -------
----- ---- - ---------------
-------------- - -
-- ---
-------- -
-----------------------
---------------------
---------------
--
-------- -
----------
--
------ -
-- --- --- --
--------------------------- ------
-- --------
-------------------- -
--------
---------
-
--- --------
---- --------
---- ------- -- -- ---
-
-
--
--------- -
------------------ -
-------- -
------- -
-------- -
----------- ------- ------- -------- ------- -- -----
--
------ -
----- ----------------------
---- ----------------------- ---------
---- ----------------------- --------------- -- ----
-
-
--
-
-
-上面的示例中，我们开启了 Pug，以及追加了扩展名的规则。对于 Pug，我们需要在 extensions 属性中定义 .pug 扩展名即可。
解决 Import 引入组件报错
有时候，在新建 Vue 组件时，我们可能会遇到 Import 引入组件报错的问题。这时，我们需要在.eslintrc.js 文件中进行配置，如下：
-- -------------------- ---- -------
-------------- - -
-- --
-------- -
-----------------------
---------------------
---------------
--
------ -
-- --- ------ -----
------------------------------- ------
-- --- --- -------
------------------------------------ ------
-- --------- ---
-------------------- -
--------
---------
-
-- ----- ------- ------------- --- -----------
--- --------
---- --------
-
--
--
-- ---
-在这里，我们需要注意以下这个规则。
'import/extensions': ['error', 'always', {...}]配置，在这里，{...}中的vue: 'never'表示，我们引入的 Vue 组件不需要加后缀；同理，如果你的项目中有.tsx或.jsx文件，你也可以在这里配置。
通过以上配置，我们就可以解决 Import 引入组件报错的问题了。
总结
本文主要介绍了如何解决使用 Vue CLI 时 ESLint 报错的问题。我们首先介绍了 ESLint 的基本概念和原理，然后详细阐述了两种解决方法：禁用 ESLint 检查和修改 ESLint 配置。最后，我们解决了 Import 引入组件报错的问题。通过本文的介绍，相信大家已经对这些问题有了更加深入和全面的认识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6546ecda7d4982a6eb15469a