在 Visual Studio Code (VS Code) 中,你可以配置自动保存时自动格式化代码。这可以通过安装合适的扩展(如 Prettier 或 ESLint)和配置设置来实现。下面是详细步骤:
1. 安装 Prettier 扩展
- 打开 VS Code。
- 点击左侧的扩展图标(四个方块组成的图标)。
- 在搜索栏中输入 “Prettier - Code formatter”。
- 找到并点击 “Prettier - Code formatter”,然后点击 “安装” 按钮。
2. 配置 VS Code 自动格式化
-
打开 VS Code 设置:
- 点击左下角的齿轮图标,然后选择 “设置”。
- 或者按
Ctrl+,
快捷键打开设置。
-
在设置中搜索 “Format On Save”。
-
勾选 “Editor: Format On Save” 选项。
3. 配置 Prettier 作为默认格式化程序
- 在设置中搜索 “Default Formatter”。
- 找到 “Editor: Default Formatter” 选项,并选择 “esbenp.prettier-vscode”。
4. 添加 Prettier 配置文件(可选)
你可以在项目根目录中添加一个 .prettierrc
文件,定义 Prettier 的配置。以下是一个示例 .prettierrc
文件:
{
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
}
5. 安装 ESLint 扩展(可选)
如果你还想使用 ESLint 来格式化和检查代码,可以安装 ESLint 扩展:
- 打开 VS Code。
- 点击左侧的扩展图标。
- 在搜索栏中输入 “ESLint”。
- 找到并点击 “ESLint”,然后点击 “安装” 按钮。
6. 配置 ESLint 自动修复
- 打开 VS Code 设置。
- 在设置中搜索 “Eslint: Auto Fix On Save”。
- 勾选 “Eslint: Auto Fix On Save” 选项。
7. 添加 ESLint 配置文件(可选)
你可以在项目根目录中添加一个 .eslintrc
文件,定义 ESLint 的配置。以下是一个示例 .eslintrc
文件:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "single"]
}
}
8. 保存并格式化代码
现在,每当你保存文件时,VS Code 将自动格式化代码。如果 Prettier 和 ESLint 都安装并配置好,它们将协同工作,确保代码按照你定义的风格进行格式化和检查。
完整的配置示例
在 .vscode
目录下创建一个 settings.json
文件,以确保这些设置在项目级别生效:
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.autoFixOnSave": true
}
通过以上步骤,你可以在 VS Code 中实现自动保存时自动格式化代码的功能。