在前端开发中，代码规范是非常重要的，它不仅可以提高代码的可读性，也可以减少 bug 的出现。而 eslint 就是一个非常流行的代码规范检查工具。然而，如果每次修改代码后都需要手动执行 eslint 检查，那么就会大大降低开发效率。本文将介绍如何在 Vue-cli4 中配置自动保存 eslint 修改，从而提高开发效率。
1. 安装 eslint-plugin-prettier 和 eslint-config-prettier
在开始配置之前，我们需要先安装两个依赖项：eslint-plugin-prettier 和 eslint-config-prettier。这两个依赖项可以让 eslint 和 prettier 配合使用，从而达到自动格式化代码的目的。
npm install eslint-plugin-prettier eslint-config-prettier --save-dev
2. 配置 .eslintrc.js 文件
在项目根目录下创建 .eslintrc.js 文件，并配置以下内容：
-- -------------------- ---- -------
-------------- - -
----- -----
---- -
----- -----
--
-------- ------------------------ --------------------- ------------
-------- -------------
-------------- -
------- ---------------
--
------ -
------------- -------------------- --- ------------ - ------- - ------
-------------- -------------------- --- ------------ - ------- - ------
-------------------- --------
--
--以上配置中，我们使用了 eslint:recommended 和 plugin:vue/essential 两个预设规则，同时也加入了 prettier 插件。其中，prettier/prettier 规则用于检查代码格式是否符合 prettier 的规范。
3. 配置 VS Code
在 VS Code 中，我们需要安装 eslint 和 prettier 插件。安装完成后，在 VS Code 的设置中搜索 eslint，并将 Auto Fix On Save 设置为 true。这样，每次保存代码时，eslint 就会自动检查并格式化代码。
4. 配置 Vue-cli4
在 Vue-cli4 中，我们需要修改 vue.config.js 文件。具体操作如下：
-- -------------------- ---- -------
-------------- - -
------------- -------- -- -
-------------
---------------
---------------------
------------------------
-------------- -- -
----------- - -----
------ --------
---
--
--以上配置中，我们使用了 chainWebpack 钩子来修改 webpack 配置。具体来说，我们添加了一个 eslint 规则，并将 options.fix 设置为 true。这样，每次保存代码时，eslint 就会自动检查并格式化代码。
5. 示例代码
下面是一个示例代码，你可以将其复制到你的项目中并进行修改：
-- -------------------- ---- -------
----------
-----
------ ----- -------
----- ------- ------
------
-----------
--------
------ ------- -
----- ------
------ -
------ -
------ ------- --------
-------- -------- -- -- ------
--
--
--
---------
------ ------------
-- -
------ ----
-
- -
---------- -----
-
--------6. 总结
通过本文的介绍，我们学习了如何在 Vue-cli4 中配置自动保存 eslint 修改。这样，我们就可以在开发过程中自动格式化代码，从而提高开发效率。同时，我们也学习了如何使用 eslint 和 prettier 配合使用，从而达到更好的代码规范。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650d57e895b1f8cacd70e83c