VSCode 自动保存与 Prettier ESLint 配置教程

"VSCode 自动保存与 Prettier 及 ESLint 配置" VSCode（Visual Studio Code）是一款非常流行的源代码编辑器，它提供了丰富的可扩展性，允许用户根据自己的需求定制各种功能。在开发过程中，自动保存和代码格式化可以显著提高效率，避免手动保存和格式化带来的不便。本教程将指导你如何配置 VSCode 以实现自动保存，并结合 Prettier 和 ESLint 实现代码自动格式化和校验。 首先，确保你已经安装了以下两个关键的 VSCode 插件： 1. **Prettier**: 这是一个流行的代码格式化工具，支持多种编程语言，能按照预设规则自动美化代码。 2. **ESLint**: 这是一个静态代码分析工具，用于检查代码中的潜在错误和不符合编码规范的部分。 接下来，按照以下步骤进行配置： 1. **启用自动保存**： 在 VSCode 中，你可以通过按下 `Ctrl + ,` 快捷键打开设置界面。在搜索框中输入 `files.autoSave`，你会看到一个名为“自动保存”的设置项。选择 `onFocusChange` 选项，这意味着当焦点从当前编辑器切换到其他编辑器或窗口时，文件将自动保存。 2. **设置默认格式化器为 Prettier**： 再次在设置界面的搜索框中输入 `editor.defaultFormatter`。找到这个设置项后，将其值设置为 `Prettier`，这样每次保存时，VSCode 将使用 Prettier 进行代码格式化。 3. **开启 Prettier 的保存时自动格式化**： 搜索 `editor.formatOnSave`，勾选该设置项。这样，每次保存文件时，Prettier 将自动对代码进行格式化。 如果你还想在保存时应用 ESLint 校验和修复，继续以下步骤： 1. **安装 ESLint 插件**： 确保已安装 ESLint 插件，如果没有，请在 VSCode 市场中搜索并安装。 2. **配置 ESLint 保存时的代码行动**： 在设置界面搜索 `codeActionOnSave`，然后找到 `editor.codeActionsOnSave` 设置项。在这里，你需要添加一个新的 JSON 对象，关联 ESLint 插件，如下所示： ```json { "[javascript]": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }, "[typescript]": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }, // 如果你需要对其他语言应用 ESLint，例如 Vue，可以添加对应的配置 "[vue]": { "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" } } ``` 上述配置将使 ESLint 在保存 JavaScript 和 TypeScript 文件时自动应用所有修复。 3. **设置 ESLint 和 Prettier 的整合**： 为了使 Prettier 和 ESLint 能够协同工作，你可能需要安装 `rvest.vs-code-prettier-eslint` 插件，它允许 Prettier 使用 ESLint 的规则进行格式化。确保在 `[vue]` 配置中指定了 `rvest.vs-code-prettier-eslint` 作为默认格式化器。 完成以上配置后，每次你在 VSCode 中保存文件时，不仅会自动保存，而且 Prettier 将对代码进行格式化，同时 ESLint 会执行代码校验并修复潜在问题。这种自动化流程可以大大提高你的开发效率，保持代码整洁一致。记得定期更新这些插件，以获取最新的特性和修复。