新手解决VSCode之Vue文件代码无法格式化

vscode如果装了vetur 插件,Shift+Alt+F仍然无法格式化Vue文件。
解决办法:文件->首选项->设置,搜索 vetur.format.defaultFormatter.html,
将none修改为“js-beautify-html”


前端常用样式收集

1、Header
<mt-header fixed title="固定在顶部"></mt-header>
<mt-header title="标题过长会隐藏后面的内容啊哈哈哈哈">
  <router-link to="/" slot="left">
    <mt-button icon="back">返回</mt-button>
  </router-link>
  <mt-button icon="more" slot="right"></mt-button>
</mt-header>
----------------------------------------------------------
2、Tabbar
<nav class="mui-bar mui-bar-tab">
  <a class="mui-tab-item mui-active" href="#tabbar">
  	<span class="mui-icon mui-icon-home"></span>
  	<span class="mui-tab-label">首页</span>
  </a>
  <a class="mui-tab-item" href="#tabbar-with-chat">
  	<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span>
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 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. 如何查看已安装的快捷键映射?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值