vscode格式化Vue的HTML失败

最新推荐文章于 2025-05-13 10:39:18 发布

芋头小棒槌

最新推荐文章于 2025-05-13 10:39:18 发布

阅读量914

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41834059/article/details/82378628

本文介绍如何在 Vetur 中更改默认的 HTML 格式化工具为 js-beautify-html，通过简单修改配置文件即可实现更美观的代码格式。

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

在首选项的设置中找到"vetur.format.defaultFormatter.html": "none",将其在右边改为"vetur.format.defaultFormatter.html": "js-beautify-html"即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

芋头小棒槌

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解决vscode 中保存后html自动格式化的问题

12-28

最近几天更新了 vsCode 的版本，目前所用的版本号为：1.43。其实每次更新 vsCode 版本号并没有感受到有什么明显的变化，只是日常顺手更新而已。而这一次 vsCode 真的是帮了我一个“大忙”。众所周知我们写 html 页面经常会在元素上绑定很多属性或者是事件什么的，如果不换行就比较难看，所以我的日常做法是每个属性单独一行，就像这样： <nz nzPageIndex]=2 nzTotal]=500 ></nz-pagination

vsCode html文件格式化

weixin_34038293的博客

03-17

1万+

第一步：下载两个插件： ESLint vetur 第二步：打开code-> preference-> setting页面配置settings.json 配置文件如下 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.t...

参与评论您还未登录，请先登录后发表或查看评论

vs code 配置自动格式化代码

jkzyx123的博客

05-13

2806

在VSCode中配置自动格式化，首先需要安装Prettier和ESLint扩展。接着，通过修改settings.json文件，设置保存时自动格式化、粘贴时自动格式化等选项，并指定默认的格式化工具为Prettier。此外，可以为不同文件类型配置特定的格式化器。如果项目中使用Prettier和ESLint，还需在项目根目录下安装相关依赖，并创建.prettierrc.json和.eslintrc.js文件进行配置。最后，通过保存文件验证自动格式化是否生效，确保代码能按照Prettier和ESLint的规则自动调

VSCode 设置vue 保存自动格式化代码

weixin_30723433的博客

08-22

4789

设置保存自动格式化代码，开发效率大大提升！操作如下：安装VSCodeeslint插件如下配置setting.json文件： { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSi...

vscode格式化html代码失效了,VSCode格式化代码功能失效的bug解决方法

weixin_28996083的博客

06-09

2690

VSCode格式化代码功能失效的bug解决方法前不久我装上了黑苹果，那么为了快速转移开发环境，我使用了VSCode(Visual Studio Code下面简称VSCode)的插件Settings Sync来同步个人设置和其他常用插件，如果不熟悉Settings Sync的可以参考之前我写的一篇文章《Visual Studio Code 设置同步到github的插件介绍及使用方法(Settings...

VSCode Vue文件格式化

weixin_33827965的博客

11-08

486

参考文档：https://vuejs.github.io/vetur/formatting.html 自从将VSCode更新之后，vue文件的html格式化就失效了，而且vue文件中的js ,css格式化样式都变了，原因在于都采用了prettier 来格式化，而配置文件中vetur.format.defaultFormatter.html 这个配置项的值为"none" 将vetur这个...

VSCode不能格式化vue(template)html代码

cream66的博客

04-07

5993

今天用VSCode写vue代码的时候，发现自己的编辑器不能格式化html代码，每次写完必格式化的我表示很难受，修改一下设置就可以了，在这记录一下。文件>首选项>设置找到vetur.format.defaultFormatter.js，前提是装了 “vetur” 插件(没装可以装一下，开发vue很方便)，在右边对象中添加"vetur.format.defaultFormatter....

vscode格式化html代码失效了,vscode对Vue文件的html部分格式化失效问题解决办法

weixin_30270715的博客

06-09

1156

string stack操作要注重细节问题A string S consisting of N characters is considered to be properly nested if any of the following co ...仪表盘 hostmap 新玩法让运维工作越玩越 highCloud Insight 第13次新品发布会现在开始,首先非常感谢大家前来看我们的新功能发布...

vsCode格式化html代码

热门推荐

dancer_mm的博客

11-04

1万+

vsCode格式化html代码 1.下载两个插件ESLint和vetur 2.打开code-> preference-> setting页面，搜索settings.json，将其配置 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor...

vscode格式化 标签

qq_43128392的博客

12-28

754

1、在设置中搜索vetur，找到对应位置，选择js-beautify-html。2、在setting.json中添加代码即可。

vscode vue代码格式化无效详细解决方案

weixin_55341181的博客

01-25

5620

右键格式化不管用，按快捷键也不行。原因就是可能vscode无法识别vue的<template>标签解决方案如下：第一步：点击设置第二步：点击右侧的图标会打开settings.json文件第三步：把一下代码粘贴上去即可 "editor.formatOnSave": true, "vetur.format.defaultFormatter.html": "js-beautify-html", "[vue]": { "edit...

vscode中使用prettier后html,css格式化不生效的问题

qq_45052616的博客

02-09

2651

例如这里我之前装上插件后当时只设置了HTML默认格式化程序，以为后面格式化其他文件就不用在设置了，然后今天写css的时候突然发现prettier格式化css不起作用，查了一会才突然想起来，好像css格式化也得再设置一下才能生效了。首先，先打开一个css文件，然后在设置里打开命令面板，然后输入格式化，点击使用格式化文档，然后再点击prettier就行了。vscode里装上prettier插件后格式化文件后不生效。

vscode对Vue文件的html部分格式化失效问题解决办法

weixin_30568591的博客

07-28

422

使用vscode编辑vue文件时发现突然格式化代码不会对<template></template>之间的html生效了，解决办法很简单文件 -->首选项 --->设置搜索 vetur.format.defaultFormatter.html （前提当然是你已经装了 "vetur"插件）可以看到值为 none ...

html代码格式化vscode,Vscode代码格式化

weixin_30695909的博客

06-09

4700

Vscode代码格式化Vscode代码格式化①首选项 → ② 设置③ 点击这个小图标④ 然后把以下的代码复制进去。{"window.zoomLevel": 2, //设置窗口缩放级别"files.autoSave": "afterDelay", //自动保存代码"breadcrumbs.enabled": true, // 开启 vscode 文件路径导航"search.exclude": { ...

html代码格式化vscode,vscode 代码格式化

weixin_29915703的博客

06-09

1535

最近开发Vue项目，由于前面的前端开发离职，写的代码混乱，没有统一的格式，于是想搞一套前端统一格式化的配置，方便以后代码查看，git提交等。然后我就查阅资料写了各种配置项{"explorer.confirmDelete": false，"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1...

vscode html 格式化_详解VSCode 格式化不符合预期的问题

weixin_39969257的博客

02-02

2041

一句话总结不同格式化程序执行时长不一样，导致文件格式好后和预期不符。请务必保持校验（Lint）规则和格式化（Format）规则一致，不然格式化后还是不符合预期是非常讨厌的。本篇主要讲解怎么调教VSCode的保存时格式化程序。适用人员本文用于解决各类格式化冲突问题，如何使用 vscode自带格式化/ESLint/TSLint/Prettier 不在本文讨论范围之内。看完本文你将收获：为什么格式化后依...

vscode html自动格式化,解决vscode 中保存后html自动格式化的问题

weixin_39633774的博客

06-09

1002

这篇文章主要介绍了vscode 中保存后html自动格式化的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下最近几天更新了 vsCode 的版本，目前所用的版本号为：1.43。其实每次更新 vsCode 版本号并没有感受到有什么明显的变化，只是日常顺手更新而已。而这一次 vsCode 真的是帮了我一个“大忙”。众所周知我们写 html 页面...

vscode自动格式化Setting（html短标签一行，长标签分段）

mmmmmmmmzw的博客

08-02

1656

自动格式化，html短标签一行，长标签分段

Vue第 50 篇，Vscode第 4 篇，Vue代码使用格式化文档无效，Vscode使用格式化文档无效

NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）

04-11

1万+

⭐最近在写代码的时候，Vscode 使用格式化文档不管用，原因竟然是单页面使用大量element 组件和 html 代码导致，Vscode识别不了该文件。简单记录一下

vscode显示格式化失败

最新发布

05-16

### 解决方案 VSCode 格式化失败可能是由多种原因引起的，以下是可能导致该问题的原因及其对应的解决方案： #### 1. 缺少必要的格式化工具如果未安装适用于特定文件类型的格式化工具，则 VSCode 的格式化功能会失效。例如，在处理 Vue 或 SCSS 文件时，需要确保已安装相应的扩展。 - **Vue 文件**：需安装 Vetur 扩展或其他支持 Vue 的插件[^2]。 - **SCSS 文件**：可尝试安装 Prettier 或其他专门针对 CSS 和 SCSS 的格式化工具。 ```json // settings.json 配置示例 { "[vue]": { "editor.defaultFormatter": "octref.vetur" }, "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } ``` #### 2. 错误的快捷键配置在 Mac 下，默认的格式化快捷键为 `Command + Option + F` 而非 Windows 上的 `Alt + Shift + F`。如果使用的是 Windows 键盘布局，可能会导致快捷键冲突或无法触发格式化操作[^1]。可以通过修改设置来调整快捷键绑定： ```javascript // keybindings.json 示例 [ { "key": "alt+shift+f", "command": "editor.action.formatDocument", "when": "editorHasDocumentFormattingProvider && editorTextFocus" } ] ``` #### 3. 设置中的错误配置某些全局或工作区级别的设置可能会影响格式化的正常运行。例如，启用 `"editor.formatOnSave"` 后仍可能出现格式化失败的情况。这通常是因为缺少合适的格式化器或者模式设置不当。建议检查并更新以下配置项： ```json { "editor.formatOnSave": true, "editor.formatOnSaveMode": "file", // 推荐改为 file 模式 "files.autoGuessEncoding": false, // 关闭自动猜测编码以防干扰 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } ``` #### 4. Clang-Format 版本过旧对于 C++ 类型的语言，Clang-Format 是常用的格式化工具之一。但如果使用的 clang-format.exe 版本较老，则可能导致兼容性问题，从而引发格式化失败[^4]。解决办法是升级至最新版本的 LLVM 工具链，并确认路径配置无误： ```bash # 升级命令（Linux/Mac） brew install llvm # 更新 PATH 变量 export PATH="/usr/local/opt/llvm/bin:$PATH" # 测试是否生效 clang-format --version ``` #### 5. 插件依赖缺失部分语言环境（如 Go）需要额外的手动安装依赖包才能正常使用其内置功能。当遇到类似 “The 'go-outline' command is not available.” 这样的提示时，应按照官方指南完成相关组件的下载和初始化过程[^3]。执行如下脚本来修复潜在缺陷： ```bash go get -u all go mod tidy ``` --- ### 总结通过以上分析可知，VSCode 格式化失败的主要成因可以归纳为以下几个方面——缺乏适配的格式化程序、按键映射偏差、参数设定失误以及外部依赖不足等问题。逐一排查这些环节即可有效解决问题。