0

0

vscode怎么保存的时候格式化换行

心靈之曲

心靈之曲

发布时间:2026-03-10 13:04:05

|

744人浏览过

|

来源于php中文网

原创

vs code 保存时自动格式化换行不生效,首要确认 editor.formatonsave 是否开启;换行行为由 prettier 等格式化器及其配置(如 printwidth、endofline)决定,非 vs code 自身控制;需避免多格式化器冲突,并检查项目级配置覆盖。

vscode怎么保存的时候格式化换行

VS Code 保存时自动格式化换行不生效?先看 editor.formatOnSave 是否真开启

很多人以为开了“格式化”就等于换行自动调整,其实不是。VS Code 的保存格式化(editor.formatOnSave)默认是 关闭 的,即使你装了 Prettier 或 ESLint 插件,它也不会自动触发——除非手动打开这个开关。

实操建议:

  • 打开设置(Ctrl+,Cmd+,),搜 format on save,勾选 Editor: Format On Save
  • settings.json 中确认有这一行:"editor.formatOnSave": true
  • 如果只对某类文件启用(比如只对 .js 文件),要用 [javascript] 语言专属配置,否则全局设置可能被覆盖

换行风格由格式化工具决定,不是 VS Code 自己管

VS Code 本身不决定换行是 \n 还是 \r\n,也不决定对象属性要不要换行、函数参数要不要折行——这些全看当前文件用的是哪个格式化器(prettiereslint --fixtypescript-eslint 等),以及它的配置。

常见错误现象:

  • 保存后缩进变了,但换行没动 → 格式化器没配 printWidthsemi 类规则
  • JSX 里长属性还是挤在一行 → prettierprintWidth 设得太大(默认 80),或没启用 jsxBracketSameLine(已废弃,新版用 bracketSameLine
  • 保存后换行符变成 \r\n(Windows 风格),但团队用 \n → 要检查 files.eol 设置和格式化器是否强制覆盖了换行符

关键参数示例(以 prettier 为例):

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

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

下载
"prettier.printWidth": 80,
"prettier.tabWidth": 2,
"prettier.bracketSameLine": true,
"prettier.endOfLine": "lf"

多个格式化器冲突时,VS Code 不知道该听谁的

如果你同时装了 PrettierESLint,又都设成保存时运行,VS Code 可能只执行其中一个,或者顺序错乱,导致换行被反复改写甚至报错 Cannot find module 'prettier'

实操建议:

  • editor.defaultFormatter 显式指定每种语言的主力格式化器,例如:"[javascript]": "esbenp.prettier-vscode"
  • 关掉另一个的保存钩子:比如让 ESLint 只做校验(eslint.enable 开,eslint.run 设为 onType),不参与保存格式化
  • 检查右下角状态栏的语言模式图标旁有没有「格式化器」提示,点开确认当前生效的是哪个

换行相关配置容易被工作区或项目级配置覆盖

用户级 settings.json 开了 formatOnSave,但项目根目录有 .prettierrc.editorconfig,就可能让换行行为和预期不符——尤其是 .editorconfig 里的 end_of_line=lf 和 Prettier 的 endOfLine 冲突时,VS Code 会优先读 .editorconfig,但 Prettier 可能无视它。

排查要点:

  • 打开命令面板(Ctrl+Shift+P),运行 Developer: Toggle Developer Tools,看控制台有没有格式化器加载失败或配置冲突警告
  • 在文件中右键 → Format Document With... → 看列出的选项里哪个打钩,点进去看它实际加载的是哪份配置
  • 临时删掉项目里的 .prettierrc.editorconfig,测试是否恢复预期换行行为

最常被忽略的一点:格式化器的配置文件(比如 prettier.config.js)里如果导出了函数,而 VS Code 启动时没加载成功,就会退回到默认值——这时候你以为配了 printWidth: 60,实际生效的是 80。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

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

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

45

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

format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

887

2023.07.31

python中的format是什么意思
python中的format是什么意思

python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

459

2024.06.27

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

24

2026.03.09

热门下载

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

精品课程

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

共34课时 | 2.7万人学习

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

共98课时 | 8.2万人学习

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

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