0

0

vscode保存后怎么自动格式化

心靈之曲

心靈之曲

发布时间:2026-03-10 13:59:48

|

222人浏览过

|

来源于php中文网

原创

vscode开启“format on save”无反应,是因为未为对应语言设置editor.defaultformatter;必须在settings.json中按语言显式配置,如"[javascript]": {"editor.defaultformatter": "esbenp.prettier-vscode"},全局配置无效。

vscode保存后怎么自动格式化

为什么开了“Format On Save”却没反应?

VSCode 默认不格式化,不是开关没开,而是它根本不知道“该叫谁来干这事”。editor.formatOnSave 只是个触发器,真正干活的是你指定的格式化程序——没配 editor.defaultFormatter,哪怕装了 Prettier、Black 或 ESLint,保存时也完全静音。

常见错误现象:

  • 右下角状态栏显示 “None”(而不是 “Prettier” 或 “Black”)
  • 右键 → “Format Document With…” 列表为空或全是灰色
  • Ctrl+Shift+P 输入 “Format Document”,提示 “No formatter available”

实操建议:

  • 先确认已安装对应扩展:如 JavaScript/TypeScript 装 esbenp.prettier-vscode,Python 装官方 Python 扩展(内置 Black 支持)或单独装 ms-python.black-formatter
  • 必须为语言显式设置默认格式化器,例如在 settings.json 中加:
    "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
  • 不要只写全局 editor.defaultFormatter,VSCode 会忽略它对特定语言的约束力;语言专属配置才真正生效

JavaScript/TypeScript 怎么让 ESLint 修复 + Prettier 格式化一起跑?

想保存时既修 semiquotes,又调 Prettier 统一缩进和换行,得靠两层配合:ESLint 负责语义修复,Prettier 负责样式美化。顺序错了容易互相覆盖。

使用场景:

  • 项目已有 .eslintrc.js,且用了 eslint-config-prettier 关闭冲突规则
  • 不希望每次手动跑 npx eslint --fixnpx prettier --write

实操建议:

  • 开启 ESLint 自动修复:"eslint.run": "onSave""editor.codeActionsOnSave": { "source.fixAll.eslint": true }
  • 确保 Prettier 是默认格式化器,且 editor.formatOnSavetrue
  • 关键细节:VSCode 默认先执行 codeActionsOnSave(即 ESLint 修复),再走 formatOnSave(Prettier 格式化)。这个顺序不能颠倒,否则 Prettier 可能抹掉 ESLint 刚加上的 return 或重命名

Python 用 Black 格式化,但保存后没变化?

Black 在 VSCode 中不是装上就自动接管的。Python 扩展本身支持多种格式器(autopep8、yapf、Black),但必须明确告诉编辑器:“这个项目,就用 Black”。

同程联盟景点门票动态程序 beta1.0
同程联盟景点门票动态程序 beta1.0

经过一段时间的开发,以及内部测试,同程网联盟景区新版程序正式发布推出,感谢广大联盟会员一直以来的支持与关注! 同程网联盟景区新版程序新功能介绍:1.统一的页面风格。页面风格将与随后推出的度假线路、酒店、机票以及融合版联盟程序风格保持一直;2.新增后台管理系统。可更加方便快捷的对网站进行个性化设置;3.动态与伪静态切换。后台操作,简单便捷;4.缓存管理。新增缓存,提高网站访问速度,后台可定期清理;5

下载

常见错误现象:

  • 保存后缩进没变、括号没换行、字符串引号没统一
  • Ctrl+Shift+P → “Format Document With…” 里选了 Black,但没勾“设为默认”
  • 项目根目录有 pyproject.toml,但 VSCode 没读到(比如工作区没打开在项目根)

实操建议:

  • 在项目级 .vscode/settings.json 中写:
    "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.formatOnSave": true
    }
  • 确保 Black 已通过 pip 安装在当前 Python 环境:pip install black
  • 如果用 conda 或虚拟环境,务必在 VSCode 右下角选择正确的 Python 解释器(带 Black 的那个)

XML / Markdown / JSON 文件怎么启用保存自动格式化?

这些非编程语言文件的格式化,依赖专用扩展,且 VSCode 不会自动关联——即使你装了 XML Tools 或 Markdown All in One,也得手动绑定语言和格式化器。

使用场景:

  • 编辑 package.xmlconfig.xml 时想自动缩进和换行
  • 写 Markdown 时希望标题对齐、列表缩进统一
  • 修改 tsconfig.json 后自动美化结构

实操建议:

  • XML:装 DotJoshJohnson.xml,然后加配置:
    "[xml]": {
    "editor.defaultFormatter": "DotJoshJohnson.xml"
    }
  • Markdown:推荐 yzane.markdown-pdf 不行,要用 vscode.markdown-language-features(VSCode 内置)或 bierner.markdown-preview-github-styles(仅预览),真正能格式化的其实是 esbenp.prettier-vscode(需在 .prettierrc 中启用 proseWrap: "always" 等)
  • JSON:VSCode 内置格式器足够,直接设:"[json]": { "editor.defaultFormatter": "vscode.json-language-features" }

配置这件事,从来不是“开个开关”就完事。最常被跳过的一步,是忘记为语言单独指定 editor.defaultFormatter ——它不像插件安装那样有视觉反馈,但缺了它,formatOnSave 就只是个摆设。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

46

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

189

2026.02.25

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

454

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

546

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

334

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

82

2025.09.10

pip安装使用方法
pip安装使用方法

安装步骤:1、确保Python已经正确安装在您的计算机上;2、下载“get-pip.py”脚本;3、按下Win + R键,然后输入cmd并按下Enter键来打开命令行窗口;4、在命令行窗口中,使用cd命令切换到“get-pip.py”所在的目录;5、执行安装命令;6、验证安装结果即可。大家可以访问本专题下的文章,了解pip安装使用方法的更多内容。

373

2023.10.09

更新pip版本
更新pip版本

更新pip版本方法有使用pip自身更新、使用操作系统自带的包管理工具、使用python包管理工具、手动安装最新版本。想了解更多相关的内容,请阅读专题下面的文章。

434

2024.12.20

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

4

2026.03.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
go语言零基础开发内容管理系统
go语言零基础开发内容管理系统

共34课时 | 2.7万人学习

第二十三期_前端开发
第二十三期_前端开发

共98课时 | 8.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号