本文主要介绍如何在 Vue CLI 3+ 中配置 ESLint 和 Prettier。
为什么要使用 ESLint 和 Prettier？
在现代前端开发中，代码的质量越来越受到重视。为了保证代码的一致性和可读性，我们通常会采用 ESLint 和 Prettier 来进行代码格式化和检查。ESLint 是一款常用的 JavaScript 代码检查工具，可以检查出代码中的潜在问题和错误。Prettier 则是一款格式化工具，可以自动将代码格式化为一致的风格。
配置 ESLint
安装依赖
首先，我们需要在项目中安装 ESLint 的依赖：
--- ------- ------ ----------
配置文件
在项目根目录下新建一个 .eslintrc.js 文件，用来配置 ESLint。Vue CLI 3+ 会默认加载这个文件。
-------------- - -
----- -----
---- -
----- ----
--
-------- -
-----------------------
---------------
--
-------------- -
------- --------------
--
------ -
------------- -------------------- --- ------------ - ------ - ------
-------------- -------------------- --- ------------ - ------ - -----
-
-上面的配置文件中，我们使用了 @vue/standard 规则，这是 Vue 官方推荐的规则。同时，我们也可以根据项目的需要自定义规则。
集成到开发流程中
对于使用 Vue CLI 3+ 的项目，我们可以把 ESLint 集成到开发流程中。
首先，在 package.json 中添加如下命令：
-
---------- -
------- ------- ----- -------- ----
-
-这个命令会检查 src 目录下的 .js 和 .vue 文件。
接着，在编写代码的时候，我们可以在编辑器中使用 ESLint 插件来帮助代码规范化和检查。比如，在 VS Code 中，我们可以安装 ESLint 插件，并设置保存文件时自动格式化代码：
-
---------------------- -----
--------------------------- -
----------------------- ----
-
-这样，每次保存文件的时候，就会自动格式化和检查代码。如果有不符合规则的地方，会在编辑器中提示和标记出来。
示例代码
在这里，我们编写一个简单的 Vue 组件，来演示 ESLint 的功能：
----------
-----
------- ------------------------ -----------
----- ----- ------
------
-----------
--------
------ ------- -
---- -- -
------ -
------ -
-
--
-------- -
--------- -- -
------------
-
-
-
---------这个组件实现了一个点击按钮时增加计数器的功能。但是，如果我们在 VS Code 中保存文件，就会发现它提示了一个错误：
-------- ----------- ------ ----- -------- --------- --------------
这是因为在 ESLint 的规则中，箭头函数应该包含括号。我们可以将 increment() 方法的定义改为：
---------- -- -- - ------------ -
这样，在保存文件时，就不会再提示错误了。
配置 Prettier
安装依赖
在项目中安装 Prettier 的依赖：
--- ------- -------- ----------
配置文件
在项目根目录下新建一个 .prettierrc.js 文件，用来配置 Prettier。
-------------- - - ------------ ----- ----- ----- -
上面的配置文件中，我们启用了单引号模式和去掉分号模式。同时，我们也可以根据项目的需要来进行自定义的配置。
集成到开发流程中
同样地，我们可以将 Prettier 集成到开发流程中，在每次保存文件时自动进行代码格式化。
首先，在 package.json 中添加如下命令：
-
---------- -
--------- --------- ------- --------------- -----------------
-
-这个命令会格式化 src 目录下的 .js 和 .vue 文件。
接着，在编写代码的时候，我们可以在编辑器中使用 Prettier 插件来帮助代码格式化。比如，在 VS Code 中，我们可以安装 Prettier 插件，并设置保存文件时自动格式化代码：
- ---------------------- ---- -
这样，每次保存文件的时候，就会自动进行格式化。
示例代码
为了演示 Prettier 的功能，我们可以对上面的组件进行一些格式上的调整。
在 data() 方法中，我们可以将对象的属性写成多行形式：
---- -- -
------ -
------ -
-
-如果我们使用了 VS Code 的自动格式化功能，它就会将这一行：
------ -
改为两行：
------ --
这样，就会符合 Prettier 的要求。同时，我们也可以使用 " 双引号替代 ' 单引号，这样就能同时满足 ESLint 和 Prettier 的要求了。
总结
在本文中，我们介绍了如何在 Vue CLI 3+ 中配置 ESLint 和 Prettier，并将它们集成到开发流程中。通过这样的配置，我们可以保证代码质量，提高开发效率。同时，我们还给出了一些示例代码，来演示 ESLint 和 Prettier 的具体功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6502d9e995b1f8cacd00eaa2