欢迎光临南昌笑劳网络科技有限公司,我们是一家专注中小型企业营销推广服务的公司!

咨询热线:400 76543 55
南昌笑劳网络科技有限公司
最新资讯News
南昌笑劳网络科技有限公司

VSCode的Code Actions on Save:自动化代码修复与整理

作者:P粉986688829 | 点击: | 来源:P粉986688829
0301
2026
VSCode保存时自动执行代码操作需配置codeActionsOnSave:一、通过settings.json启用内建操作如fixAll;二、绑定ESLint实现规则修复;三、组合Prettier并禁用formatOnSave避免冲突;四、按语言ID单独配置;五、用Ruff扩展修复Python代码。...
VSCode 保存时自动执行代码操作需配置 codeActionsOnSave:一、通过 settings.json 启用内建操作如 fixAll;二、绑定 ESLint 实现规则修复;三、组合 Prettier 并禁用 formatOnSave 避免冲突;四、按语言 ID 单独配置;五、用 Ruff 扩展修复 Python 代码。

如果您在使用 VSCode 编辑代码时希望保存文件的同时自动执行格式化、修复问题或整理导入语句等操作,则需要正确配置 Code Actions on Save 功能。以下是实现该功能的多种方式:

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

一、通过 settings.json 启用内建代码操作

VSCode 提供了基于语言服务器协议(LSP)的内置保存时操作支持,可直接在用户或工作区设置中启用特定动作。这些动作依赖已安装的语言扩展(如 ESLint、Prettier、TypeScript 等)并需对应语言服务正常运行。

1、按下 Cmd + , 打开设置界面,点击右上角的“打开设置(JSON)”图标。

2、在 settings.json 中添加或修改 "editor.codeActionsOnSave" 对象。

3、插入以下配置项之一或多个:
"source.fixAll": true,
"source.organizeImports": true,
"source.addMissingImports": true。

4、保存 settings.json 文件,重新打开一个支持该语言的文件进行验证。

二、绑定 ESLint 自动修复

当项目中已集成 ESLint 且安装了官方 ESLint 扩展时,可通过保存触发 ESLint 的自动修复能力。该方式仅对 ESLint 规则报告的问题生效,不覆盖其他格式化行为。

1、确保项目根目录下存在 .eslintrc.js 或 .eslintrc.json 配置文件。

2、在 settings.json 中添加:
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}。

3、确认 ESLint 扩展已启用,并在命令面板(Cmd + Shift + P)中执行 ESLint: Enable ESLint

4、保存任意 JS/TS 文件,观察控制台输出是否显示 ESLint 修复日志。

三、组合 Prettier 与 Format On Save 冲突规避

若同时启用了 "editor.formatOnSave" 和 "editor.codeActionsOnSave",可能引发重复格式化或冲突。推荐禁用 formatOnSave,将格式化逻辑统一交由 codeActionsOnSave 控制,以避免样式覆盖或光标跳动问题。

1、在 settings.json 中设置 "editor.formatOnSave": false。

2、安装 Prettier 扩展并确保其为默认格式化工具:
"editor.defaultFormatter": "esbenp.prettier-vscode"。

3、在 "editor.codeActionsOnSave" 中添加:
"source.fixAll.prettier": true。

4、重启 VSCode 窗口,打开一个 .ts 文件并保存,检查是否触发 Prettier 格式化且无报错提示。

四、按语言单独配置保存动作

不同语言可能需要差异化的保存行为,例如 TypeScript 需要组织导入和修复全部,而 Markdown 仅需整理 frontmatter。VSCode 支持按 language ID 细粒度覆盖全局设置。

1、在 settings.json 中添加 "editor.codeActionsOnSave" 的 language-specific 配置块。

2、插入如下结构:
"[typescript]": {
  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
    "source.fixAll": true
  }
}。

3、同样可为 "[javascript]"、"[python]" 等添加独立配置。

4、确保对应语言扩展已安装并激活,例如 Python 扩展需启用 Pylsp 或 Ruff 支持。

五、使用 Ruff 快速修复 Python 代码

Ruff 是高性能 Python Linter,其 VSCode 扩展支持在保存时执行 fix 操作。该方法不依赖本地 Python 环境中的 ruff CLI,但要求扩展版本 ≥ 0.7.0 且已启用 Ruff 服务。

1、安装 Ruff 官方扩展(charliermarsh.ruff-vscode)。

2、在 settings.json 中添加:
"[python]": {
  "editor.codeActionsOnSave": {
    "source.fixAll.ruff": true
  }
}。

3、确保工作区根目录存在 pyproject.toml 并包含 [tool.ruff] 配置节。

4、编辑一个 .py 文件,在未修复的语法错误行保存后,观察是否自动插入缺失的 import 或修正缩进。


# javascript  # python  # java  # vscode  # js  # markdown  # json  # typescript 

我要咨询做网站
成功案例
建站流程
  • 网站需
    求分析
  • 网站策
    划方案
  • 页面风
    格设计
  • 程序设
    计研发
  • 资料录
    入优化
  • 确认交
    付使用
  • 后续跟
    踪服务
  • 400 76543 55
    sale#ncxiaolao.cn
Hi,Are you ready?
准备好开始了吗?
那就与我们取得联系吧

咨询送礼现在提交,将获得笑劳科技策划专家免费为您制作
价值5880元《全网营销方案+优化视频教程》一份!
下单送礼感恩七周年,新老用户下单即送创业型空间+域名等大礼
24小时免费咨询热线400 76543 55
合作意向表
您需要的服务
您最关注的地方
预算

直接咨询