VSCode的Code Actions on Save:保存时自动修复代码

19次阅读

需配置vscode的Code Actions on Save功能实现保存时自动格式化与修复:一、启用内置代码操作,添加”source.organizeImports”和”source.fixAll”;二、通过ESLint扩展添加”source.fixAll.eslint”;三、配合Prettier添加”source.formatDocument”并禁用formatOnSave;四、按语言ID单独配置以支持多语言差异化处理。

如果您在使用 vscode 编辑代码时希望保存文件的瞬间自动应用格式化、修复缺失导入或修正语法问题,则需正确配置 code actions on save 功能。以下是实现该功能的具体步骤:

本文运行环境:macBook Air,macOS Sequoia。

一、启用内置代码操作自动执行

VSCode 提供了原生支持的 “editor.codeActionsOnSave” 设置,允许在保存时触发特定类型的代码修复动作,例如自动导入、类型检查修复等,无需额外扩展即可生效。

1、按下 Cmd + , 打开设置界面。

2、在右上角搜索框中输入 codeActionsOnSave

3、点击右侧的 Edit in settings.json 链接。

4、在打开的 settings.json 文件中添加如下配置项:

“editor.codeActionsOnSave”: {
“source.organizeImports”: true,
“source.fixAll”: true
}

二、通过 ESLint 扩展实现保存时修复

当项目已集成 ESLint 且安装了官方 ESLint 扩展时,可借助其提供的保存钩子完成更细粒度的修复,包括潜在错误修正与风格调整。

1、确保已安装 ESLint 扩展(by microsoft 并在工作区启用。

2、在工作区根目录下确认存在 .eslintrc.js 或等效配置文件。

3、在 settings.json 中添加以下内容:

“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: true
}

4、确保 ESLint 扩展的 eslint.enable 设置为 true。

三、使用 Prettier 配合保存动作格式化

Prettier 主要负责代码格式统一,虽不直接“修复”逻辑错误,但能修正缩进、引号、分号等格式类问题,并可与 Code Actions on Save 协同工作。

1、安装 Prettier – Code formatter 扩展。

2、在工作区创建 .prettierrc 配置文件并写入格式规则。

3、在 settings.json 中添加:

“editor.codeActionsOnSave”: {
“source.formatDocument”: true
}

4、同时设置 “editor.formatOnSave”: false 以避免重复触发。

四、按语言单独配置保存行为

不同语言可能需要差异化处理,VSCode 支持基于语言 ID 的精细化设置,防止全局规则干扰特定语言生态。

1、在 settings.json 中定位到 “[javascript]” 语言块,若不存在则手动添加。

2、在该语言块内嵌入 codeActionsOnSave 配置:

“[javascript]”: {
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: true,
“source.organizeImports”: true
}
}

3、对 typescriptpython 等其他语言,使用对应语言 ID(如 typescriptpython)重复上述结构。

text=ZqhQzanResources