VS Code中 vue文件HTML代码格式化

最新推荐文章于 2024-06-07 16:11:02 发布
最新推荐文章于 2024-06-07 16:11:02 发布
阅读量5.6k 收藏
点赞数 1
分类专栏： Vue 前端 文章标签： Vue Vetur
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Loya0813/article/details/79442217
版权

问题：一般用Shift+Alt+F，可以格式化JS和CSS的部分，但template部分没反应。

1. 在应用商店中搜索并安装 “Vetur” 插件


2. 配置。文件 -> 首选项 -> 设置，在编辑框加上这两句

"prettier.tabWidth": 4,
"vetur.format.defaultFormatter.html": "prettier"



3. 最后按格式化快捷键 Shift+Alt+F 

海贼8023
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VSCode 设置vue 保存自动格式化代码
weixin_30723433的博客
08-22 4201
设置保存自动格式化代码，开发效率大大提升！ 操作如下： 安装VSCodeeslint插件 如下配置setting.json文件： { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSi...
vscode 如何格式化vue(template)html代码 , 保持标签属性不换行
qq_17108919的博客
11-27 2517
百度看了好多文章，但是设置完了，还是会换行 今天终于自己摸索出来不会换行 1.vscode->文件->首选项->设置 2.选择工作区->找到settings.json(滚动找到settings.json) 3.设置如下，就ok了 "settings": { "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions":{ "js-bea
vscode怎么对选定的代码格式化？ctrl+k,ctrl+f（格式化代码）shift+alt+f
Dontla的博客
04-19 3万+
然后按CTRL + K。
vscode格式化代码使html标签不换行
A_hapiness的博客
05-23 2153
1.打开Vscode,点击文件 —》首选项 —》设置—》搜索vetur —》 在setting.json中编辑—》输入以下代码（注意是json形式的，如果setting.json中为空，要自己在最外层加一个{}） "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaul...
如何使用vscode进行代码格式化设置.
最新发布
BradenHan的专栏
06-07 2239
TOC/TOC。
vscode代码格式化 保存时候自动修改为合规代码
丿灬安之若死
02-14 1371
安装这三个组件 windwos ctrl+,打开设置然后点击右上角这里 将一下内容粘贴并保存 { // tab 大小为2个空格 "editor.tabSize": 2, // 100 列后换行 "editor.wordWrapColumn": 100, // 保存时格式化 "editor.formatOnSave": true, // 开启 vscode 文件路径导航 "breadcrumbs.enabled": tr...
前端工程化：vscode格式化vue代码
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
09-17 311
步骤 安装 vscode 插件 vetur、stylelint 项目根目录创建文件 .vscode/settings.json 写入配置文件 // #每次保存的时候将代码按eslint格式进行修复，要在保存时运行的代码操作类型。保存时按照哪个规则进行格式化 "editor.codeActionsOnSave": { "source.fixAll": true, "source.fixAll.stylelint": true }, ...
vue实现codemirror代码编辑器中的SQL代码格式化功能
10-16
主要介绍了vue实现codemirror代码编辑器中的SQL代码格式化功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
详解VS Code使用之Vue工程配置format代码格式化
10-17
主要介绍了详解VS Code使用之Vue工程配置format代码格式化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vscode下的vue文件格式化问题
10-17
在使用Visual Studio Code (VSCode) 进行Vue开发时，常常会遇到文件格式化的问题。Vue文件（.vue）通常包含HTML、CSS、JavaScript等多个部分，因此正确的格式化至关重要。Vetur是一款针对Vue生态的VSCode插件，提供...
vscode代码格式化设置
weixin_55985591的博客
02-07 2390
vscode代码格式化设置
vscode 格式化代码双引号
不看一的博客
03-02 1183
{ "workbench.startupEditor": "newUntitledFile", "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", "vetur.format.defaultFormatterOptions": { "js-beautify-html":...
vscode代码格式化配置（前端）（纯代码-可直接拉取）
今天也要爱小姜的博客
12-20 820
打开vscode的设置，如图。
vue html 格式化,解决在写Vue时，格式化代码 属性自动换行的问题
weixin_42512356的博客
06-09 3403
参考来源特别说明，这些内容非本人原创，只是网络上说法很多，而这种我亲测有效，分享给大家感谢segmentfault网用户 Raymond 它拥有3.6k的点赞量感谢segmentfault网用户 陌上寒 它拥有1.8k的点赞量感谢segmentfault网用户 Jack_Chen 它拥有346的点赞量最近写Vue代码，发现template里的html代码，会因为标签内的属性稍有超出就出现换行，看着...
vscode 好用插件
suuntil的博客
02-18 750
Prettier 一键美化你的JavaScript/TypeScript/CSS代码 Color Highlight 直观展示你定义的颜色 CSS Peek 可以在HTML中通过CSS id或则class来定位到其定义 Auto Close Tag 修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改 Chinese 将界面转换为中文 open in browser 用浏览器打开你的文件 GBKtoUTF8 转换格式 Vetur Vue工具 npm Intellis
html代码格式化vscode,Vscode代码格式化
weixin_30695909的博客
06-09 4349
Vscode代码格式化Vscode代码格式化①首选项 → ② 设置③ 点击 这个小图标④ 然后把以下的代码复制进去。{"window.zoomLevel": 2, //设置窗口缩放级别"files.autoSave": "afterDelay", //自动保存代码"breadcrumbs.enabled": true, // 开启 vscode 文件路径导航"search.exclude": { ...
vs code 代码格式化整理
热门推荐
Latency の 博客
05-22 55万+
vs code格式化代码的快捷键如下：（来源于这里）On Windows Shift + Alt + FOn Mac Shift + Option + FOn Ubuntu Ctrl + Shift + I但是自带的格式化并不能满足我的需求，这个时候，不得不说插件大法好。1、代码格式化为eslint风格（参考自这里）需要插件：eslint在设置中添加："eslint.autoFixOnSave":...
html代码格式化vscode,vscode 代码格式化
weixin_29915703的博客
06-09 1453
最近开发Vue项目，由于前面的前端开发离职，写的代码混乱，没有统一的格式，于是想搞一套前端统一格式化的配置，方便以后代码查看，git提交等。然后我就查阅资料写了各种配置项{"explorer.confirmDelete": false，"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1...
VSCode不能格式化vue(template)html代码
cream66的博客
04-07 5767
今天用VSCode写vue代码的时候，发现自己的编辑器不能格式化html代码，每次写完必格式化的我表示很难受，修改一下设置就可以了，在这记录一下。 文件>首选项>设置 找到vetur.format.defaultFormatter.js，前提是装了 “vetur” 插件(没装可以装一下，开发vue很方便)，在右边对象中添加"vetur.format.defaultFormatter....
vue中codemirror怎么格式化代码
05-30
下面以使用官方的 Vue 组件为例来说明如何在 Vue 中使用 CodeMirror 并格式化代码。 首先，在 Vue 项目中安装 CodeMirror 和 CodeMirror 的 Vue 组件： ``` npm install codemirror vue-codemirror --save ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值