前言
作为前端开发人员，我们经常需要写出可读性高、规范、结构化的代码。这样有利于让其他人更快地了解代码含义，是一个好的开发习惯，能够提高项目的可维护性。ESLint 和 Prettier 是两个非常优秀的工具，它们能够规范代码格式，提高代码质量。
什么是 ESLint？
ESLint 是一个开源的 JavaScript 代码检查工具。它可以帮助我们在提供代码风格和错误检查方面建立一致的风格。ESLint 可以检查模板字符串中的代码，可以检查 JSX 语法中的代码。我们可以通过配置文件来自定义代码风格，也可以通过插件扩展 ESLint 的功能。
什么是 Prettier？
Prettier 是一个代码格式化工具，它可以格式化多种语言的代码，包括 JavaScript、CSS、HTML、Markdown 等等。与 ESLint 相比，Prettier 更专注于代码格式化方面。
为什么使用 ESLint 和 Prettier？
如果我们没有统一的代码规范，我们的代码会变得杂乱且难以维护，使得开发者无法快速理解代码。我们可以使用 ESLint 和 Prettier 来规范代码格式，提高代码质量，避免这种情况的发生。
同时，一些比较成熟的 JavaScript 代码库都已经支持 ESLint 和 Prettier。
如何配置 ESLint 和 Prettier？
安装
首先，我们需要将 ESLint 和 Prettier 安装为依赖。在本地项目上使用：
npm install eslint prettier -D
或使用 yarn：
yarn add eslint prettier -D
初始化 ESLint
接下来，我们可以使用 ESLint 的命令行初始化配置：
npx eslint --init
按照命令行的提示进行配置。这里我们可以选择使用 Airbnb 的 JavaScript 代码风格规范，ESLint 会生成对应的配置文件 .eslintrc.js。同时，我们可以通过 npm 安装对应的 ESLint 插件，例如 eslint-plugin-react、eslint-plugin-vue 等等。
配置 Prettier
Prettier 的配置基本做到了无配置。
在项目根目录下创建 .prettierrc.js 文件，我们可以添加一些配置项。
// .prettierrc.js
module.exports = {
semi: true, // 分号
singleQuote: true, // 使用单引号
trailingComma: 'all', // 多行时指定尾逗号的行为
};让 ESLint 和 Prettier 兼容
现在，默认情况下，ESLint 和 Prettier 的代码规范可能会冲突。为了让它们可以兼容，请安装 eslint-config-prettier 和 eslint-plugin-prettier。
npm install eslint-config-prettier eslint-plugin-prettier -D
或使用 yarn：
yarn add eslint-config-prettier eslint-plugin-prettier -D
在 .eslintrc.js 文件中添加：
module.exports = {
extends: ['plugin:prettier/recommended'],
plugins: ['prettier'],
...
}添加 VS Code 插件
我们可以添加 VS Code 插件以方便使用。VS Code 的插件将会在保存文件时自动运行 ESLint 和 Prettier。
在 VS Code 中，打开插件管理器，搜索并安装 ESLint 和 Prettier - Code formatter。
示例代码
我们可以使用以下命令来运行 ESLint 和 Prettier：
npx eslint src/**/*.js --fix
其中，--fix 标识表示运行 ESLint 并使用自动修复功能。
在保存文件时，Prettier 可以自动格式化你的文件。
结论
ESLint 和 Prettier 是两个非常强大的前端工具。使用它们可以帮助我们规范代码风格，提高代码质量，提高项目的可维护性。在项目开发过程中，我们需要及时运行它们，以使得代码的风格更加整洁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f6a519c5c563ced58ae2a9