0

0

vscode代码格式化怎么把代码换行了

碧海醫心

碧海醫心

发布时间:2026-03-08 18:58:03

|

950人浏览过

|

来源于php中文网

原创

prettier 保存自动换行是因 printwidth 默认值(80/100)触发的正常行为;修改 .prettierrc 中 printwidth 可调整,局部禁用用 // prettier-ignore,需避免 eslint 与 prettier 规则冲突。

vscode代码格式化怎么把代码换行了

为什么 prettier 一保存就自动换行?

VS Code 默认启用的代码格式化工具(比如 Prettier)会根据配置项强制折行,不是 bug,是它在“尽职”。关键参数是 printWidth,默认值通常是 80100,只要某行字符数超过这个值,就会被拆成多行。

常见错误现象:写了一行简洁的 const result = getData().filter(x => x.id > 5).map(x => x.name);,保存后变成四行;或者 JSX 中一个 div 套了几个 props 就全摊开了。

  • printWidth 是主因,改它最直接;设为 120150 能显著减少折行
  • 如果用的是 Prettier,必须改 .prettierrcprettier.config.js,改 VS Code 设置里的 prettier.printWidth 不生效(插件优先读项目配置)
  • 某些场景下 arrowParenstrailingComma 也会间接影响换行策略,但它们不直接控制是否折行

怎么关掉「自动换行」但保留其他格式化?

不能全局关格式化,但可以精准压制换行行为。最稳妥的方式是局部禁用:在不想被折行的代码前加 // prettier-ignore 注释。

使用场景:一行链式调用、长正则、内联 JSX 属性、SQL 拼接字符串等明显需要视觉连贯性的片段。

海外代购系统源码
海外代购系统源码

该软件是一个以asp+access进行开发的代购企业网站源码。代购优势:随着经济全球化与互联网的发展,带动了许多新新行业,也不缺少成功的案例,淘宝只是其中的一个。而在物流行业中,像代购网站和转运网站都是非常有发展潜力的,消费者可以通过代购网站买到在国内买不到的东西,并且价格也会相对便宜,这些都是代购的优势。代购方式包括有:代购、直购、团购、秒杀、拼单等,首先由客户提交代购订单,然后进行物流选择,可

下载
  • 注释必须紧贴上一行代码,中间不能有空行,否则无效
  • 只对紧跟着的那一条语句生效,不影响后续代码
  • 别滥用——整文件都加 // prettier-ignore 等于放弃格式统一,协作时容易出问题
const url = `https://api.example.com/v1/users?limit=${limit}&offset=${offset}&sort=${sort}`; // prettier-ignore

ESLint + Prettier 冲突导致换行更乱?

eslint-plugin-prettier@typescript-eslint/eslint-plugin 同时启用,且规则重叠(比如 max-lenprintWidth),VS Code 可能反复格式化、越改越碎。

典型表现:保存一次,换行;再保存一次,又缩回去一点;第三次又展开——像在拉锯。

  • 确保 max-len 的 ESLint 规则关闭,或设为 off,让 printWidth 单一负责行宽
  • 检查 editor.formatOnSave 是否和 editor.codeActionsOnSave 中的 source.fixAll 同时开启,这会导致双重格式化
  • 推荐只开 editor.formatOnSave,关掉 source.fixAll,避免 ESLint 覆盖 Prettier 的换行决策

换行逻辑还受语言扩展影响?

是的。Prettier 本身对不同语言有内置换行启发式规则,比如对 JavaScript 更倾向保留单行链式调用,但对 TypeScript 接口定义或 React JSX 默认更激进地拆分 props。

如果你发现 .tsx 文件比 .js 文件更容易被拆开,大概率是 Prettier 的 TypeScript 解析器在起作用,而不是配置错了。

  • 升级到 Prettier 3.0+ 能改善部分 JSX 换行判断,旧版本对 spread props 处理较生硬
  • 不用强行统一所有语言的换行风格——JSX 适当换行其实可读性更好,重点是别让一行变三行却只为了塞进 printWidth
  • 如果团队用 Vue SFC,注意 script setup 区块也走 JS 规则,但 template 区块由 Vue 插件控制,和 Prettier 无关
换行不是格式化失控,而是多个配置项在后台悄悄投票。真正难调的不是改数字,是搞清哪条规则在当前文件里说了算——尤其当项目里同时存在 .prettierrcpackage.json 里的 prettier 字段、VS Code 工作区设置,还有语言特定的覆盖配置。

热门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

数据分析工具有哪些
数据分析工具有哪些

数据分析工具有Excel、SQL、Python、R、Tableau、Power BI、SAS、SPSS和MATLAB等。详细介绍:1、Excel,具有强大的计算和数据处理功能;2、SQL,可以进行数据查询、过滤、排序、聚合等操作;3、Python,拥有丰富的数据分析库;4、R,拥有丰富的统计分析库和图形库;5、Tableau,提供了直观易用的用户界面等等。

1133

2023.10.12

SQL中distinct的用法
SQL中distinct的用法

SQL中distinct的语法是“SELECT DISTINCT column1, column2,...,FROM table_name;”。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

340

2023.10.27

SQL中months_between使用方法
SQL中months_between使用方法

在SQL中,MONTHS_BETWEEN 是一个常见的函数,用于计算两个日期之间的月份差。想了解更多SQL的相关内容,可以阅读本专题下面的文章。

381

2024.02.23

SQL出现5120错误解决方法
SQL出现5120错误解决方法

SQL Server错误5120是由于没有足够的权限来访问或操作指定的数据库或文件引起的。想了解更多sql错误的相关内容,可以阅读本专题下面的文章。

2109

2024.03.06

sql procedure语法错误解决方法
sql procedure语法错误解决方法

sql procedure语法错误解决办法:1、仔细检查错误消息;2、检查语法规则;3、检查括号和引号;4、检查变量和参数;5、检查关键字和函数;6、逐步调试;7、参考文档和示例。想了解更多语法错误的相关内容,可以阅读本专题下面的文章。

380

2024.03.06

oracle数据库运行sql方法
oracle数据库运行sql方法

运行sql步骤包括:打开sql plus工具并连接到数据库。在提示符下输入sql语句。按enter键运行该语句。查看结果,错误消息或退出sql plus。想了解更多oracle数据库的相关内容,可以阅读本专题下面的文章。

1642

2024.04.07

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

59

2026.03.06

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
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号