在编写前端代码时，我们经常需要关注代码的格式化问题。好的代码格式化能够提高代码的可读性和可维护性，让代码更易于理解和修改。本文将介绍如何使用 ESLint 和 Prettier 来自动化代码格式化，让我们能够专注于代码的逻辑和功能实现。
什么是 ESLint 和 Prettier？
ESLint 和 Prettier 都是 JavaScript 代码规范化的工具。它们可以帮助我们在编写代码时自动检查和修复代码风格问题。ESLint 主要关注代码质量和错误检测，它可以帮助我们找到可能的编码错误和一些不良习惯。而 Prettier 则主要关注代码格式化，它可以自动帮助我们修复代码的缩进、换行、空格等问题。使用这两个工具可以使我们的代码更规范、更易读、更易于维护。
安装和配置
首先我们需要全局安装 ESLint 和 Prettier。可以使用 npm 命令全局安装：
npm install -g eslint prettier
安装完成后，我们需要配置 ESLint 和 Prettier。ESLint 需要一个配置文件 .eslintrc 来告诉它应该如何检查代码风格。Prettier 也需要一个配置文件 .prettierrc 来告诉它应该如何格式化代码。在本文中，我们将使用一些默认配置和一些自定义配置来配合我们的代码风格。
首先，在项目的根目录下新建一个 .eslintrc.json 文件，并添加以下内容：
{ "extends": ["eslint:recommended"], "parserOptions": { "ecmaVersion": 2018, "sourceType": "module" }, "rules": {} }
在这个配置文件中，我们指定了使用 "eslint:recommended" 这个内置规则集来检查代码。这个规则集包含了一些常见的规则，可以作为一个良好的起点。我们还指定了使用 ECMAScript 2018 语法标准，并声明了代码是使用模块机制加载的。在 "rules" 中，我们可以指定一些规则的配置。例如：
{ "rules": { "semi": ["error", "always"], "quotes": ["error", "double"] } }
这个配置告诉 ESLint 代码中必须使用分号，字符串必须使用双引号。
接着，在项目的根目录下新建一个 .prettierrc 文件，并添加以下内容：
{ "trailingComma": "es5", "tabWidth": 2, "semi": true, "singleQuote": true }
在这个配置文件中，我们指定了代码缩进使用 2 个空格，同时添加了一些代码格式化的规则，例如在代码末尾添加逗号、代码结束使用分号、字符串使用单引号等。
使用
在配置好 ESLint 和 Prettier 之后，我们就可以开始使用这两个工具来检查和格式化代码了。
ESLint
在使用 ESLint 之前，我们需要安装一个 ESLint 插件。这个插件可以让我们在编写代码时实时检查代码风格。可以使用以下命令在项目中安装：
npm install eslint-plugin-prettier
安装完成后，在 ESLint 配置文件 .eslintrc 中添加以下内容：
{ "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } }
这个配置文件告诉 ESLint 在检查代码风格时使用 Prettier 格式化，当发现代码风格不符合规范时报错。
在配置好 ESLint 插件后，在项目的根目录下执行以下命令：
eslint --fix src/
这个命令可以检查并修复 src/ 目录下的所有代码风格问题。我们也可以在编辑器中配置自动化检查和修复功能，这样每次保存文件时就可以自动检查和修复代码风格问题。
Prettier
使用 Prettier 非常简单，我们只需要在项目的根目录下执行以下命令：
prettier --write src/
这个命令会自动格式化 src/ 目录下的所有文件，包括代码缩进、换行、空格等问题。我们也可以在编辑器中配置保存时自动格式化代码功能，这样每次保存代码时就可以自动格式化代码了。
示例代码
下面是一个例子，展示如何使用 ESLint 和 Prettier 自动化检查和修复代码风格问题。
-- -------------------- ---- ------- -------- ------ - -- --- - ------ - - -- - - ----- --- - -------- -- - ------------------ -------- --展开代码
在使用 ESLint 和 Prettier 之前，这段代码的缩进不规范，没有使用分号，字符串使用了双引号。使用 ESLint 和 Prettier 后，这段代码会自动格式化为以下样式：
-- -------------------- ---- ------- -------- ------ - -- --- - ------ - - -- - - ----- --- - ---------- - ------------------ -------- --展开代码
我们可以看到，代码的缩进和空格问题已经被修复，同时字符串也被自动转换为了单引号。这样的代码相比于原始代码更规范、更易于理解和修改。
结语
使用 ESLint 和 Prettier 可以让我们更专注于业务逻辑和功能实现，而不需要花费太多时间和精力来关注代码格式化问题。建议大家在编写前端代码时都要使用 ESLint 和 Prettier 进行代码风格检查和格式化，这样可以使我们的代码更规范、更易读、更易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bfbe100c976d473a48bfac
