前端代码格式化VSCode，插件Volar，配置默认格式化程序

已于 2022-02-15 12:55:34 修改
阅读量2w 收藏 4
点赞数 2
分类专栏： 大前端 Vue 文章标签： vscode 前端 编辑器
于 2022-02-15 12:04:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46037781/article/details/122941612
版权

一、概述

vscode复制代码十分乱格式，但是需要搭配一个好的格式化程序（插件），这里选择Volar（一个标签属性多了就会帮你自动换行。就很棒）

二、使用

  • 可以看到有两个Volar（Vue2选择下面的）在这里插入图片描述

  • Ctrl+Shift+F（格式化快捷键）

  • 配置默认（第一次选错了，通过这个操作重新配【爬坑的难受┭┮﹏┭┮】）
    在这里插入图片描述
    在这里插入图片描述

三、问题

  • 单引号变双引号，解决办法配置以下
    在这里插入图片描述
Program W
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
vs code 格式化；--》prettier
洪君的博客
05-23 340
vs code格式化 分号 商店：下载 prettier alt+shift+F 格式化 Ctrl+S 保存 settings.json { "git.ignoreMissingGitWarning": true, "files.autoSave": "off", "eslint.validate": [ "javascript",...
vscode 插件 volar
05-07
vscode 插件 volar
【VScode】超详细图片讲解下载安装、环境配置、编译执行、调试
最新发布
北地大熊的博客
05-26 1458
本篇文章讲解了VScode的安装方法和使用方法
vs code自动格式化代码
wnk1997的博客
08-01 1083
只需要vetur和eslint俩插件。setting.json里面添加即可。
vscode配置Volar对vue3的格式化支持
牧也の博客
01-12 7184
通过项目vscode编辑器配置通过volar来保存时自动进行格式化
vscode插件volar配置
哈
08-20 1009
安装 ref自动补全.value 拆分编辑器
vscode eslint+prettier+volar(vuter)代码自动格式化
热门推荐
yhy_的博客
04-22 4万+
{ "workbench.editor.enablePreview": false, //打开文件不覆盖 "search.followSymlinks": false, //关闭rg.exe进程 "liveServer.settings.donotShowInfoMsg": true, "files.autoSave": "afterDelay", "editor..
VSCode 插件离线下载地址解析
12-22
打开 VSCode 插件市场网址 Extensions for the Visual Studio family of product，输入你想要的插件名称。根据软件提示输入相应的信息即可获取到插件url
vscode插件离线安装包
08-30
1. **octref.vetur-0.37.3.vsix**: Vetur 是一个用于 Vue.js 开发的强大插件，提供了语法高亮、智能提示、格式化、自动完成、代码诊断等功能。它支持 Vue 单文件组件（SFC），使得 Vue 开发体验更加顺畅。 2. **...
VSCODE1.8X插件组合
01-23
1. **syler.sass-indented-1.8.28**：这是一个用于Sass（使用缩进语法）的插件，提供了语法高亮、代码补全和格式化等功能，帮助开发者更好地编写和管理Sass代码。 2. **misterj.vue-volar-extention-pack-1.1.8**：...
vscode 开发vue常用插件
06-05
通过安装并使用这些插件，VSCode将成为一个强大的Vue开发环境，具备高效的调试、代码格式化、智能提示、API测试等功能，让开发工作更加流畅和高效。同时，良好的代码组织和统一的风格也有助于团队间的合作，提高项目...
基于IDE插件Volar的Vue 3命令行类型检查工具。-JavaScript开发
05-26
vue-tsc --noEmit && vite构建vue-tsc vue-tsc --noEmit && vite构建基于IDE插件Volar的Vue 3命令行类型检查工具。 版本vue-tsc TypeScript Volar 0.0.20 4.2.3 0.23.2 0.0.19 4.2.3 0.23.0 0.0.18 4.2.3 0.22.26 0.0.17 4.2.3 0.22.24 0.0.16 4.2.3 0.22。 23 0.0.15 4.2.3 0.22.22 0.0.14 4.2.3 0.22.17 0.0.13 4.2.3 0.22.16 0.0.12 4.2.3 0.22.14 0.0.11 4.2.3 0.22.12 0.0.9 4.2 .3 0.22.11 0.0.8 4.2.2 0.22.4 0.0.1 4.2.2 0.21.20
volar::high_voltage:最快的Vue语言支持扩展
03-08
手掌 :high_voltage: 最快的Vue语言支持扩展 Volar是专门为Vue 3构建的语言支持插件。它基于@vue/reactivity ，可根据需要计算TypeScript以优化性能，使其接近本机TypeScript语言服务。 如果需要在命令行上进行类型检查，则可以使用 。 [] [] [] [] :hammer_and_wrench: 该项目仍在重构中，以使其更容易贡献。 快速开始 （基于 ） 使用 零件服务默认情况下，“本地组件”，“内置组件”，“本机html元素类型检查”处于活动状态。 对于全局组件，您需要具有__VLS_GlobalComponents接口定义或组件注册调用，例如： __VLS_GlobalComponents接口定义： // shims-volar.d.ts import { RouterLink , RouterView } from 'vue-router' declare global
vscode+配置文件-自用
09-01
vscode+配置文件-自用
VScode之setting.json文件——vue3插件之Vue Language Features (Volar) & 格式化插件之ESLint
m0_66557301的博客
03-01 2448
VScode之setting.json文件——vue3插件之Vue Language Features (Volar) & 格式化插件之ESLint vue3插件——Vue Language Features (Volar) 格式化插件——ESLint 设置-打开设置 { "editor.fontSize": 16, "[html]": { "editor.defaultFormatter": "HookyQR.beautify" }, "liveSe
安装了Volar插件vue文件没有显示Volar的图标
EchoLiner的博客
04-29 2496
备注：如果遇到语法无法高亮，应该把相关vue的插件都卸载了，重新安装这个插件即可。推荐使用Volar来替换Vetur。
【vue3】代码自动格式化和volar卡顿问题解决
当白的技术小窝 ( git : https://github.com/canwhite )
12-05 4795
代码自动格式化和volar卡顿
volar插件总显示$event情况
梧桐芊羽的博客
03-09 484
volar插件安装后出现$event=>问题
Vue 3.2 Released —— Vue3.2正式发布的五大特性
我是张跑跑
08-29 2024
8.10 Vue 3.2 带着 "Quintessential Quintuplets" 正式发布了，一起来看看都有那些新特性吧！！
vue3 vscode插件volar配置
04-22
对于vue3 vscode插件volar的配置，您可以按照以下步骤进行： 1. 首先，确保您的Vscode版本是1.61以上，因为volar需要使用Vscode API的更新版本。 2. 在Vscode中搜索并安装volar插件。 3. 在设置中搜索volar或者直接点击"Open Settings(JSON)"，在settings.json文件中添加以下设置： "vetur.experimental.templateInterpolationService": true, "vetur.experimental.templateInterpolation": true, "vetur.format.defaultFormatter.js": "volar", "vetur.format.defaultFormatter.css": "none", "vetur.format.defaultFormatter.postcss": "none", "vetur.format.defaultFormatter.scss": "none", "vetur.format.defaultFormatter.less": "none", "vetur.format.defaultFormatter.stylus": "none", "vetur.format.defaultFormatter.sass": "none" 4. 确保您的项目中的vue文件使用的是volar格式语言，您可以在Vscode的底部右下角的状态栏中进行更改。 5. 如果您遇到了任何问题，可以访问volar插件的GitHub页面或者Volar官方社区进行支持。 希望以上内容能够帮到您。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值