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