vs code中Vue代码格式化

最新推荐文章于 2024-09-19 02:33:29 发布
最新推荐文章于 2024-09-19 02:33:29 发布
阅读量1k 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XIAO_YuBaby/article/details/103013842
版权

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

一.安装插件

扩展里边直接搜索Vetur插件，点击安装就可以
在这里插入图片描述

二.更改设置

文件->首选项->设置，搜索vetur，按如下图示将vetur插件的 vetur.format.defaultFormatter.html 的值修改成 js-beautify-html，然后保存即可
在这里插入图片描述
之后按住 alt+shift+f 就可以格式化代码啦

XIAO_YuBaby
关注
Vs Code 自动格式化 Vue 代码
一碗周
04-19 1920
{ //每行最多多少个字符换行 "printWidth": 100, // tab缩进大小,默认为2 "tabWidth": 4, // 使用tab缩进，默认false "useTabs": false, // 使用分号, 默认true "semi": false, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号) "singleQuote": false, // 行尾逗号,默认none,可选 none|
VSCode 设置vue 保存自动格式化代码
weixin_30723433的博客
08-22 4524
设置保存自动格式化代码，开发效率大大提升！ 操作如下： 安装VSCodeeslint插件 如下配置setting.json文件： { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSi...
Vue实战指南：Vue工具——CSS在线格式化
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-19 1132
本文将详细介绍如何使用在线工具来格式化CSS代码，并提供一系列示例代码和技巧，帮助你更好地管理和优化CSS样式。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过上述示例和技巧，你应该能够在Vue.js项目中更好地管理和格式化CSS代码。一旦我们有了格式化的CSS，就可以在Vue组件中使用它们。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，这样的插件后，每次保存文件时，IDE都会自动格式化CSS代码。
vscode-vue项目格式化
startyangu的博客
08-21 2215
PrettierVeturESLint
vscode设置vue3代码格式化
qq_23858785的博客
11-14 7888
vscode设置vue3代码格式化
vue 代码格式化（VS code）
qq_38210427的博客
04-03 2501
1、安装了vetur（Vue tooling for VS Code）扩展插件。在扩展中搜索vetur，然后点击安装。2、直接（或者 选中你想格式化的代码），右键，选择“格式化文档“，另外是直接快捷键”Shift+Alt+F”，即可。
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的设置中，...
vs-code里面 vue代码提示插件
03-14
同时，VS-Code 的生态系统中有许多其他优秀的 Vue 插件，如 Vetur，它提供了完整的 Vue 支持，包括语法高亮、智能感知、格式化等功能，可以与这些代码提示插件结合使用，打造一个高效且个性化的开发环境。
vscode格式化vue代码
lz的博客
04-10 2409
1.在vscode应用商店搜索vetur 安装vetur **2.配置** 1).1.打开File----->preferences------>settings 2).搜索vetur.format.defaultFormatter.html 3).打开如下图 点击编辑按钮，按照编辑器的提示 将node修改为js-beautify-html 4.然后...
Vue 3 项目，使用 VSCode 自动格式化 .vue 文件
2302_76314178的博客
07-17 2318
第一步，安装拓展 Prettier - Code formatter 和 Vue - Official。Volar 已经弃用了，现在改用 Vue - Official。第二步，打开设置，打开 settings.json 文件。第三步，修改 settings.json 文件。重启 VSCode ，即可。
vs code vue 格式化配置
01-11 846
首选项-设置 搜索vetur 找到setting.json "[vue]": { "editor.defaultFormatter": "octref.vetur" // 使用 vetur 格式化规则 }, "vetur.format.defaultFormatterOptions": { "prettier": { "semi": false, // 去掉分号 "singleQuote": true, // true 为使用单引号 .
【VScode】工具中【Vue】代码格式化及配置
热门推荐
qq_37219845的博客
04-18 1万+
VScode工具中Vue代码格式化及配置 效果 换行空格：2个；组件标签内属性自动换行 插件 安装Vetur插件 配置 打开setting.json文件 1.方法一：快捷键：ctrl+shift+p 2.方法二：通过VScode中【文件】→【首选项】→【设置】：找到“在setting.json中编辑” 主要配置vetur中的相关属性 ...
vue+vscode习惯性配置
qq_26632785的博客
03-29 313
tab=》4格空格 格式化属性不换行 取消vscode的eslint检查 内容为： { "editor.accessibilitySupport": "on", "workbench.tree.indent": 25, "html.format.endWithNewline": true, "html.format.wrapAttributes": "preserve", "html.format.wrapLineLength": 0, ".
ESLint 工具
编程菜鸟
03-18 2828
ESLint 可组装的 javaScript 和 JSX 检查工具。规范代码风格 官网：ESLint - 插件化的 JavaScript 代码检测工具 - ESLint中文文档 VSCode 自动格式化代码 ESLint安装 ① 项目创建时 配置 ESLint ② 配置 .eslintrc.js 配置文件 "off"或者0 //关闭规则关闭 "warn"或者1 //在打开的规则作为警告（不影响退出代码） "error"或者2 //把规则作...
VS Code + VUE 代码自动格式化配置
liviluo的博客
11-09 621
"javascript.format.insertSpaceBeforeFunctionParenthesis": false, // 函数名后增加空格。"typescript.preferences.quoteStyle": "single", // 使用单引号。"javascript.preferences.quoteStyle": "single", // 使用单引号。// - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。// 对属性进行换行。
VS Code使用之Vue工程配置format代码格式化
Joe的博客
06-19 2713
编辑器另外一个很重要的功能就是代码格式化了，VS Code默认提供常见文件的格式化，如.js,.html等。 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持。 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则： { "vetur.format.defaultFormatter": { "html": "pr...
Visual Studio Code 中 .vue文件代码格式化
weixin_34295316的博客
07-27 1059
为什么80%的码农都做不了架构师？>>> ...
Visual Studio Code mac 电脑格式化 显示vue 代码
m0_37678007的博客
12-14 472
【代码】Visual Studio Code mac 电脑格式化 显示vue 代码。
vscode中vue代码格式化快捷键
06-19
在 Visual Studio Code (VSCode) 中，Vue.js 代码格式化通常不是内置的，但你可以安装第三方插件来实现这一功能。Vue官方推荐的插件是 `Prettier` 和 `vetur` 组合，它们提供了 Vue.js 的代码格式化支持。 要设置 ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值