VS Code 上一键格式化代码的小秘密

1. 准备工作

1.1. 安装 VSCode

首先，你需要确保你的电脑上已经安装了 VSCode。如果没有，请前往 VSCode 官网下载并安装。

1.2. 安装 ESLint 和 Prettier 插件

接下来，你需要在 VSCode 中安装 ESLint 和 Prettier 插件。你可以通过以下步骤进行安装：

1. 打开 VSCode，按 Ctrl + Shift + X 打开扩展面板。
2. 在搜索框中输入 ESLint，然后点击安装按钮。
3. 再搜索 Prettier - Code formatter 并安装。

2. 配置 ESLint 和 Prettier

2.1. 配置 ESLint

在 VSCode 中，按 Ctrl + Shift + P 打开命令面板。然后输入 ESLint: Configure ESLint 并回车。

在弹出的对话框中，选择 Use a recommended configuration。然后点击 Save 按钮。

2.2. 配置 Prettier

在 VSCode 中，按 Ctrl + Shift + P 打开命令面板。然后输入 Prettier: Configure 并回车。

在弹出的对话框中，选择 Use a recommended configuration。然后点击 Save 按钮。

3. 使用 ESLint 和 Prettier 格式化代码

现在，你就可以使用 ESLint 和 Prettier 格式化代码了。

要格式化当前文件，你可以按 Ctrl + Shift + F。

要格式化整个项目，你可以按 Ctrl + Alt + F。

4. 其他设置

4.1. 自动保存格式化

如果你想在保存文件时自动格式化代码，你可以在 VSCode 的设置中启用此功能。

在 VSCode 中，按 Ctrl + ， 打开设置面板。然后搜索 editor.formatOnSave。将此设置的值改为 true。

4.2. 自定义格式化规则

如果你想自定义 ESLint 和 Prettier 的格式化规则，你可以在各自的配置文件中进行修改。

ESLint 的配置文件通常位于 .eslintrc 文件中。Prettier 的配置文件通常位于 .prettierrc 文件中。

你可以根据自己的需要修改这些配置文件中的规则。

5. 结语

以上就是如何在 VSCode 中使用 ESLint 和 Prettier 格式化代码的方法。通过使用 ESLint 和 Prettier，你可以提高代码的可读性和一致性，从而使你的代码更加易于维护。