解决prettier格式化代码时结束标签＞折行的问题

最新推荐文章于 2024-04-11 16:08:28 发布
最新推荐文章于 2024-04-11 16:08:28 发布
阅读量2.1k 收藏 4
点赞数 4
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xjtarzan/article/details/130763004
版权
文章讲述了如何修改Prettier的配置，具体增加了两个设置：将`htmlWhitespaceSensitivity`设为`ignore`以忽略HTML中的空白敏感性，以及将`bracketSameLine`设为`true`，使括号在同一行显示，以优化代码格式化效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

修改prettier的配置文件，增加下面设置：

"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.bracketSameLine": true,
VSCode 代码格式化
代码青春
06-29 689
VSCode 代码格式化
借助prettier插件统一团队代码规范
weixin_43841400的博客
07-29 490
借助prettier统一团队代码规范
关闭prettier插件格式化 ‘＞‘会单独成一行
shd_0310的博客
10-14 5131
关闭prettier插件格式化标签 >会单独成一行 使用prettier进行格式化的时候发现，标签内有文字，尾标签>会单独成一行，如下所示 即使设置了"jsxBracketSameLine": true,也无效？ 别急，是你prettier插件版本较高，原来的尾标签属性无效了，新的属性是 "bracketSameLine": true 成了。全部配置属性的链接 ...
vscode 如何格式化vue(template)html代码 , 保持标签属性不换行
qq_17108919的博客
11-27 3181
百度看了好多文章，但是设置完了，还是会换行 今天终于自己摸索出来不会换行 1.vscode->文件->首选项->设置 2.选择工作区->找到settings.json(滚动找到settings.json) 3.设置如下，就ok了 "settings": { "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions":{ "js-bea
【Vscode】Prettier 插件格式化操作后，结束标签＞跑到下一行的问题
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
12-02 772
vscode 设置 htmlWhitespaceSensitivity 配置文件 .prettierrc { "semi": false, "singleQuote": true, "htmlWhitespaceSensitivity": "ignore" } 参考文章 解决格式化插件Prettier，格式化操作后，结束标签>跑到下一行的问题 ...
格式化-function与小括号间留空格。链式调用不换行.zip
01-08
格式化-function与小括号间留空格。链式调用不换行 文章链接https://editor.csdn.net/md/?articleId=103597199
WebStorm 中 prettier标签尾部＞被换行
u013297881的专栏
09-27 2034
我是新手 项目中 建立 这个文件 VS Code Prettier + ESlint 格式化Vue代码及遇到问题 - 知乎 文件内容为 { "printWidth": 200, // 最大打印宽度，超出将换行 "singleQuote": false, // 默认单引号 ，false 默认使用双引号 "bracketSpacing": true, "jsxBracketSameLine": true, "htmlWhitespaceSensitivi..
关于vscode中使用插件prettier，html文件代码各种乱换行的问题
热门推荐
qq_42968232的博客
03-06 1万+
关于vscode中使用插件prettier，html文件代码各种乱换行的问题 一开始搞不明白真的头大，找了一晚上都不好使，看着一行代码换了4,5行真的要崩溃了，但最后终于找到问题所在了，网上的文章感觉都是一个抄一个，基本解决方案都是这张图 但这个设置其实是在设置vue项目中template里的html代码样式，自己创建的html文件里根本不好使，而真正设置的地方就是直接在setting.json里设置，如下 "[html]": { "editor.defaultFormatter": "esb
解决格式化插件Prettier，格式化操作后，结束标签＞跑到下一行的问题。
qq_36800701的博客
01-12 4344
htmlWhitespaceSensitivity: “ignore”
解决Prettier HTML闭合标签总是另起一行的问题
♀我爱摇滚，更爱金属乐♀
05-20 1万+
1. 问题描述 Prettier在格式化HTML的时候存在一个“问题”，比如我们期望得到这种结果： <v-text-field dense v-model="foo" label="bar"> </v-text-field> 但Prettier会输出成： <v-text-field dense v-model="foo" label="bar" > &
prettier - vscode 保存代码自动格式化插件安装与配置项备注
_
04-02 4734
目录 prettier - vscode 保存代码自动格式化插件 配置保存文件时自动格式化 配置保存时HTML标签不自动换行（2020.12.03 13:58 再更新） 我的改动 关于配置项 项目代码格式化 部分 prettier 配置及注释 部分 eslint 配置及注释 vetur 插件配置截图（针对 .vue 文件） prettier - vscode 保存代码自动格式化插件 安装自行百度，只需要在 vscode 插件里搜索 prettier，
prettier自动格式化去换行的实现代码
10-14
主要介绍了prettier自动格式化去换行的实现代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
项目中保存自动格式化代码
weixin_43969517的博客
05-25 262
安装依赖 yarn add husky@^3.1.0 -D yarn add lint-staged@^9.2.3 prettier@^1.18.2 修改package.json "husky": {     "hooks": {       "pre-commit": "lint-staged"     } }, "lint-stag
关于使用prettierrc格式化代码后代码中HTMl的标签 ‘＞‘ 另起一行显示的问题解决
m0_71206130的博客
04-11 444
在.prettierrc中新增。
prettier格式化 ,好使但不习惯
u011307015的博客
12-07 774
{ "workbench.startupEditor": "none", "files.associations": { "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "emmet.includeLanguages": { "wxml": "html" }, "minapp-vscode.disableAutoConfig": true, "[jav...
解决格式化插件Prettier，格式化操作后，结束标签＞跑到下一行。
zzll1216的博客
06-15 2088
解决格式化插件Prettier结束标签>跑到下一行
prettier的一些简单配置
xy1580的博客
06-13 4117
prettier基本配置
在 Vue 单文件组件中，使用 Prettier 使多属性元素每个属性换行书写
zhengh513的博客
02-15 1万+
值为 80，当行位置超过此值时，代码会自动换行。多个 attribute 的元素应该分多行撰写，每个 attribute 一行。该选项将强制在 HTML、Vue 和 JSX 中每行执行一个属性。在使用 Prettier 进行代码格式化时，将根据。属性设置的值来决定是否换行。
vscode代码格式化 代码少了括号
最新发布
01-09
### 解决 VSCode 代码格式化后丢失括号的问题 当遇到 VSCode 代码格式化之后括号丢失的情况，通常是因为配置文件设置不当或是使用的扩展程序存在兼容性问题。为了有效解决问题并确保代码风格的一致性和可读性，建议采取以下措施： #### 配置 Prettier 或 ESLint 插件 对于 JavaScript/TypeScript 等前端开发语言来说，Prettier 和 ESLint 是常用的代码格式化工作者。如果当前项目已经集成了这些工具，则需确认其配置项是否合理。 - **检查 `.prettierrc` 文件**：确保 `bracketSpacing` 设置为 true[^4]。 ```json { "semi": true, "singleQuote": false, "trailingComma": "es5", "bracketSpacing": true } ``` - **ESLint 规则调整**：如果有启用 ESLint 的话，在项目的根目录下找到 `.eslintrc.js` 并修改相应规则来保持一致的行为。 ```javascript module.exports = { env: { browser: true, es6: true, }, extends: [ 'airbnb-base', ], rules: { 'space-before-function-paren': ['error', { anonymous: 'always', named: 'never' }], ... } }; ``` #### 安装或更新相关插件 有时旧版本的插件可能会引发意想不到的问题，因此定期检查是否有可用的新版也很重要。前往官方市场下载最新稳定发布的插件包可以减少此类情况的发生概率[^1]。 #### 自定义用户级或工作区级别的编辑器选项 通过自定义 JSON 格式的设置对象来自定义某些行为模式，比如自动插入结束标签、保留空白行数等特性。这有助于防止意外删除必要的符号结构[^2]。 ```json { "[html]": { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }, } ``` 以上方法能够帮助恢复因格式化而消失的大括号等问题，同时维持良好的编程习惯和团队协作效率。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值