破解老项目 EsLint 魔咒：从无到有，一键开启代码洁癖之旅

序言

EsLint 是 JavaScript 代码的强大守护神，它通过一系列可定制的规则，确保代码风格统一，杜绝低级错误，让开发过程事半功倍。然而，对于已有项目的开发者来说，将 EsLint 集成到现有的代码库中似乎是一项艰巨的任务。

本文将循序渐进地向你展示如何轻松地在老项目中启用 EsLint，即使你从未接触过它。准备好踏上代码洁癖之旅了吗？让我们开始吧！

安装 EsLint

首先，在你的项目目录下安装 EsLint：

npm install --save-dev eslint

创建 EsLint 配置文件

接下来，通过 EsLint 的 init 命令创建一个配置文件：

npx eslint --init

这将创建一个名为 .eslintrc 的 JSON 文件，其中包含基本的 EsLint 配置。

设置 VSCode 自动保存格式化

为了让 VSCode 在保存时自动格式化代码，你需要安装 eslint 和 eslint-config-airbnb 扩展：

• eslint ：官方 EsLint 扩展
• eslint-config-airbnb ：Airbnb 的 JavaScript 编码风格指南

安装完成后，在 VSCode 的设置中搜索 "EsLint"，并将 "Save" 设置为 "Format Document"：

步骤分解

1. 安装 EsLint

npm install --save-dev eslint

2. 创建 EsLint 配置文件

npx eslint --init

3. 设置 VSCode 自动保存格式化

• 安装 eslint 和 eslint-config-airbnb 扩展
• 设置 "Save" 为 "Format Document"

4. 修复代码中的错误和警告

EsLint 配置好后，你可能会看到一些代码错误和警告。使用 EsLint 的自动修复功能，或者手动修复它们。

5. 保存和享受

保存文件，VSCode 将自动格式化代码，让你的项目焕然一新。

结束语

现在，你已经成功地在你的老项目中集成了 EsLint。通过自动保存格式化功能，你的代码将始终保持整洁一致。拥抱代码洁癖，告别杂乱无章的过去。

记住，EsLint 是一个强大的工具，你可以根据自己的喜好对其进行定制。通过探索其各种规则和插件，你可以打造一个完全适合你团队和项目需求的自定义配置。

踏上代码洁癖之旅，让你的项目焕发新生，并享受高效愉快的开发体验！