介绍
在前端开发中，代码的规范性和可读性是非常重要的。对于 Vue 项目来说，我们通常可以选择使用 ESLint 和 Prettier 来帮助我们统一代码风格和保证代码质量。本文将介绍如何使用 ESLint 和 Prettier 优化你的 Vue 项目代码。
ESLint
什么是 ESLint？
ESLint 是一个插件化的 JavaScript 代码检测工具，由 Nicholas C. Zakas 于2013年5月创建，用于可组装的规则和插件管理。其中规则包括语法、代码风格、代码逻辑等等。
安装 ESLint
可以使用 NPM 安装 ESLint，在项目根目录下输入以下命令：
npm i eslint --save-dev
配置 ESLint
在项目根目录下创建一个名为 .eslintrc.js 的配置文件，内容如下：
-- -------------------- ---- -------
-------------- - -
----- -----
---- -
----- ----
--
-------- ------------------------ -----------------
------ -
------------- -------------------- --- ------------ - ------ - ------
-------------- -------------------- --- ------------ - ------- - -----
--
-------------- -
------- --------------
-
--以上代码配置了 ESLint 使用 Vue 的 essential 插件和 Prettier 插件。同时禁止在生产环境下使用 console 和 debugger。
检测代码
我们可以以 --fix 参数检测并修复代码：
eslint src --fix
该命令可以检测 src 目录下的所有 JavaScript 文件。
Prettier
什么是 Prettier？
Prettier 是一个代码格式化工具，它可以使你的代码始终保持一致和整洁，并具有风格一致性和易读性。
安装 Prettier
可以使用 NPM 安装 Prettier，在项目根目录下输入以下命令：
npm i prettier --save-dev
配置 Prettier
在项目根目录下创建一个名为 .prettierrc.js 的配置文件，内容如下：
module.exports = {
singleQuote: true,
semi: true,
useTabs: false,
tabWidth: 2,
trailingComma: "none",
bracketSpacing: true
};以上代码配置了 Prettier 为单引号模式，强制使用分号，使用空格缩进（而不是 tab），空格缩进为 2，没有尾随逗号，括号间有空格。
格式化代码
我们可以使用 prettier 命令来格式化代码：
prettier --write src/**
以上命令可以格式化 src 目录下的所有文件的代码。
在 Vue 项目中使用 ESLint+Prettier
在 Vue 的项目中使用 ESLint 和 Prettier，我们只需要在上面介绍的基础之上进行微调即可。
安装插件
可以使用 NPM 安装 eslint-plugin-vue 和 @vue/eslint-config-prettier：
npm i eslint-plugin-vue @vue/eslint-config-prettier --save-dev
配置 ESLint
在 .eslintrc.js 文件 extends 属性中添加 "plugin:vue/recommended" 即可：
extends: ["plugin:vue/recommended", "@vue/prettier"]
避免冲突
在 Vue 的项目中，ESLint 和 Prettier 会有一些规则冲突，需要添加一些设置来解决：
在 .eslintrc.js 文件中添加如下规则：
-- -------------------- ---- -------
------ -
-------------------- -
--------
-
------------ -----
----- ----
-
--
----------------------------------- -
--------
-
----------- --------
---------- --------
-
--
---------------------------------------------- -
--------
-
----------------------- -----
---------------- -----
------------------- -----
-
--
------------------------------ -
--------
-
----------- --
---------- -
---- --
--------------- -----
-
-
-
-以上代码添加了一些 Prettier 的规则和 Vue 项目中常见的规则解决方案。
结语
通过本文的介绍，相信大家已经学会了如何在 Vue 项目中使用 ESLint 和 Prettier 来规范你的代码风格和提升代码质量。希望本文能对大家在前端开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67822b5d935627c900fabe98
