可在VSCode中通过启用ESLint与Prettier的保存时运行配置、使用saveBeforeRun配合任务定义、配置language-specific保存行为三种方式实现保存时自动代码检查与格式化。

如果您在VSCode中编辑代码时希望保存文件的同时自动执行代码检查与格式化,则可能是由于相关扩展未启用或配置项未正确设置。以下是实现该功能的多种方法:
本文运行环境:MacBook Air,macOS Sequoia。
一、启用ESLint与Prettier的保存时运行配置
通过VSCode内置的“保存时运行”机制,结合ESLint和Prettier扩展,可在保存时触发代码校验与格式化。需确保已安装对应扩展并配置工作区设置。
1、打开VSCode,进入 设置(Cmd + ,),切换到“工作区”选项卡。
2、在搜索框中输入 "format on save",勾选 Editor: Format On Save。
3、继续搜索 "eslint.enable",确认其值为 true。
4、在项目根目录创建 .vscode/settings.json 文件,写入以下内容:
{"editor.formatOnSave": true, "eslint.autoFixOnSave": true, "prettier.requireConfig": false}
二、使用saveBeforeRun配合任务定义
VSCode支持在保存前运行自定义任务,适用于需调用CLI工具(如tsc、stylelint)的场景。该方式不依赖扩展自动修复能力,而是通过任务系统控制执行时机。
1、按下 Cmd + Shift + P,输入并选择 Tasks: Configure Task。
系统功能强大、操作便捷并具有高度延续开发的内容与知识管理系统,并可集合系统强大的新闻、产品、下载、人才、留言、搜索引擎优化、等功能模块,为企业部门提供一个简单、易用、开放、可扩展的企业信息门户平台或电子商务运行平台。开发人员为脆弱页面专门设计了防刷新系统,自动阻止恶意访问和攻击;安全检查应用于每一处代码中,每个提交到系统查询语句中的变量都经过过滤,可自动屏蔽恶意攻击代码,从而全面防止SQL注入攻击
2、选择 Create tasks.json file from template,再选 Others。
3、在生成的 .vscode/tasks.json 中,添加一个带有 "isBackground": false 和 "problemMatcher": [] 的任务,并设置 "group": "build"。
4、在 settings.json 中添加:{"emerald.saveBeforeRun": ["build"]}(需先安装Save Before Run扩展)。
三、配置language-specific保存行为
不同语言可能需要差异化处理,例如TypeScript需优先运行tsc --noEmit检查,而Markdown仅需Prettier。VSCode允许按语言单独设定保存动作。
1、打开设置界面,搜索 "editor.formatOnSave",点击右侧 + Add Language Specific Setting。
2、在弹出的语言列表中选择 typescript,然后将 editor.formatOnSave 设为 false。
3、在同一语言设置下,新增键 "editor.codeActionsOnSave",值设为:{"source.fixAll.eslint": true}。
4、对 markdown 语言重复步骤1–3,但将值设为:{"source.fixAll.prettier": true}。









