vs code中Vue代码格式化的问题

最新推荐文章于 2024-08-24 19:42:15 发布
最新推荐文章于 2024-08-24 19:42:15 发布
阅读量4w 收藏 13
点赞数 7
分类专栏： vue Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/twodogya/article/details/80728262
版权
vue 同时被 2 个专栏收录
13 篇文章 1 订阅
订阅专栏
Vue
11 篇文章 1 订阅
订阅专栏

本文即将迁移至个人网站  程序员导航站 - 博客栏 无任何广告，用户体验极好，观感极佳。欢迎各位大哥将其设为首页。

求您了，设个浏览器首页吧！====》 https://iiter.cn

VSCode自从更新之后，vue文件的html代码格式化就失效了，而且vue文件中的js ,css格式化样式都变了，原因在于都采用了 prettier 来格式化，而配置文件中 vetur.format.defaultFormatter.html 这个配置项的值为"none"，我们需要对它重新进行设置。

哦对了，首先确保你安装了vetur扩展插件。如下图，扩展里直接搜索vetur，安装第一个即可，安装完之后点击重新加载。

打开Vs Code，文件->首选项->设置，搜索vetur，按如下图示将vetur插件的 vetur.format.defaultFormatter.html 的值修改成 js-beautify-html，然后保存即可

打开一个Vue文件，Alt+Shift+F即可对vue文件进行格式化，或者点击鼠标右键，格式化文件即可

这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头
前端入坑全套教学视频
扫二维码加为好友就完事了！安排~
扫码加群哦

WebCandy
关注
专栏目录
vue实现codemirror代码编辑器中的SQL代码格式化功能
10-16
本文将详细介绍如何在Vue应用中集成CodeMirror，并利用sql-formatter插件实现SQL代码的格式化功能。 1. 安装sql-formatter插件 要在Vue项目中使用sql-formatter，首先需要通过npm安装该插件。打开终端或者命令行...
详解VS Code使用之Vue工程配置format代码格式化
10-17
要为Vue工程配置VS Code进行代码格式化，首先需要在VS Code中安装Vetur插件。可以通过VS Code的扩展市场搜索并安装Vetur。安装完成后，需要对VS Code的设置进行配置以启用Vetur的格式化功能。 在VS Code的设置中，...
vscode下的vue文件格式化问题
12-08
我相信基本上每一个在vscode上面码Vue代码的都会下载Vetur插件用来格式化等操作，今天Vetur更新了 0.14.2 版本，最近在使用的时候，感觉格式化总是出问题，去Vetur上面看了下，发现Vetur的配置做了下面的改动，看到几个社区都没有人说明，我就先说下，默认的格式化配置是： { "vetur.format.defaultFormatter.html": "prettyhtml", "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.postcss": "prett
vscode Vue项目 ESlint 风格格式化配置
Qanx的博客
03-03 1715
vscode Vue项目 ESlint 风格格式化配置
Visual Studio Code搭建VUE开发环境
Nicky's blog
08-07 2575
Vue.js 是一款易学易用，性能出色，适用场景丰富的 Web 前端框架。它基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档
vue vscode settings代码格式化配置
weixin_46919365的博客
12-14 923
/ "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中。// "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置。// "prettier.parser": "babylon", // 格式化的解析器，默认是babylon。// "prettier.printWidth": 100, // 超过最大值换行。
【VScode】工具中【Vue】代码格式化及配置
qq_37219845的博客
04-18 1万+
VScode工具中Vue代码格式化及配置 效果 换行空格：2个；组件标签内属性自动换行 插件 安装Vetur插件 配置 打开setting.json文件 1.方法一：快捷键：ctrl+shift+p 2.方法二：通过VScode中【文件】→【首选项】→【设置】：找到“在setting.json中编辑” 主要配置vetur中的相关属性 ...
Vue项目配置Vscode配置格式化
10-17 632
/ 更改vue的html格式，根据需求设置。// 取消html标签属性强制换行。// 更改vue的js格式。// 保存时自动格式化。
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
10-17
使用vue-cli3创建Vue项目及配置VS Code自动代码格式化和Vue语法高亮问题涉及了多个知识点和步骤，主要包括vue-cli3的基本使用、VS Code的插件安装和配置、ESLint和Prettier的安装和配置以及VS Code用户设置的修改。...
vue3-ts：husky + prettier / 代码格式化工具
snowball的博客
08-07 1098
Prettier是一个流行的代码格式化工具，它的主要作用是帮助开发者自动规范化代码的格式，提高代码的可读性和一致性。Prettier通过解析代码并使用自己的规则重新打印它，以确保代码风格的一致性和符合预设的格式化标准。
Vue项目配置代码格式化工具
yuanfanlove的博客
08-04 529
直接说上干货
vscode自动格式化失效
qq_51111632的博客
02-27 1268
vscode自动格式化失效问题
关于vscode格式化失效的问题
最新发布
hemaolin的博客
08-24 200
如果已经安装好prettier但是保存没有格式化，可能是有多个格式化工具，vscode不知道用哪个，可以直接右键选择“格式化文件”，vscode会提示你用那个工具。
Vue第 43 篇，Vscode第4篇，Vue代码使用格式化文档无效，Vscode使用格式化文档无效
热门推荐
weixin_65793170的博客
04-11 1万+
⭐最近在写代码的时候，Vscode使用格式化文档不管用，原因竟是单页面使用大量element组件和html代码导致，Vscode识别不了。具体解决思路，请看
vscode prettier eslint 插件格式化不生效的问题
花开富贵的博客
12-27 2412
这么奇葩个问题居然没人遇到过，vscode插件下边这个，突然失效。
解决VSCode保存代码自动格式化无效
qq_25741071的博客
06-28 1万+
！！！重点：如果保存依然没有反应，或者想自己选择插件进行格式化，可以把（上图）标红两段代码删掉，然后在需要格式化的任意一个页面Shift+Alt+F。（注意：如果删除了vue的代码需要在vue页面，删除javascript的代码需要在js页面），然后会弹出（下图），点击配置，选择想设置的插件就行了， 我这里vue文件选的vetur，js文件用的prettier。...
vscode 无法格式化python代码、无法格式化C++代码（vscode格式化失效）另一种解决办法：用外部工具yapf格式化（yapf工具）（autopep8）
Dontla的博客
07-15 8213
神马情况，我的vscode死活不能格式化python代码，还有C++代码也不能格式化，json代码都能格式化，为啥到python、C++就不行了。实际使用时可选择只格式化单个文件，格式化某个目录，或者递归格式化某个目录下所有文件。只能用外部工具解决了，就是麻烦点。搞了个外部工具yapf来格式化python代码。（格式化python代码）（格式化json代码）
vscode中vue代码格式化快捷键
06-19
在 Visual Studio Code (VSCode) 中，Vue.js 代码格式化通常不是内置的，但你可以安装第三方插件来实现这一功能。Vue官方推荐的插件是 `Prettier` 和 `vetur` 组合，它们提供了 Vue.js 的代码格式化支持。 要设置 Vue.js 的代码格式化快捷键，你需要按照以下步骤操作： 1. 安装插件：打开VSCode的命令面板（可以通过 `Ctrl+Shift+P` 或 `Cmd+Shift+P` 快捷键），搜索并安装 "Prettier" 和 "vetur" 插件。 2. 配置格式化：在设置文件 (`settings.json`) 中添加或编辑以下内容： ```json { "editor.formatOnSave": true, // 自动格式化保存文件 "vetur.format.defaultFormatter.html": "prettier", // 设置HTML预处理器为Prettier "vetur.format.defaultFormatter.js": "prettier", // 设置JS预处理器为Prettier "vetur.format.defaultFormatter.vue": "prettier", // 设置Vue预处理器为Prettier } ``` 3. 设置快捷键：你可以在 `"keybindings.json"` 文件中自定义快捷键。例如，设置格式化代码的快捷键： ```json { "key": "cmd+k,cmd+i", // Mac "mac": "cmd+k,cmd+i", "command": "editor.action.formatDocument", "when": "editorTextFocus && extensionKind === 'web'" } ``` 这里假设你想要使用 `Command + K, Command + I` 进行格式化，`extensionKind === 'web'` 确保只有在处理Vue项目时触发格式化。 相关问题： 1. 如何在VSCode中安装插件？ 2. 我如何找到和编辑VSCode的设置文件？ 3. 如何查看已安装的快捷键映射？
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值