VS Code中 vue文件HTML代码格式化

最新推荐文章于 2024-08-15 11:01:12 发布
最新推荐文章于 2024-08-15 11:01:12 发布
阅读量5.6k 收藏
点赞数 1
分类专栏： Vue 前端 文章标签： Vue Vetur
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Loya0813/article/details/79442217
版权

问题：一般用Shift+Alt+F，可以格式化JS和CSS的部分，但template部分没反应。

1. 在应用商店中搜索并安装 “Vetur” 插件


2. 配置。文件 -> 首选项 -> 设置，在编辑框加上这两句

"prettier.tabWidth": 4,
"vetur.format.defaultFormatter.html": "prettier"



3. 最后按格式化快捷键 Shift+Alt+F 

海贼8023
关注
专栏目录
vscode 如何格式化vue(template)html代码 , 保持标签属性不换行
qq_17108919的博客
11-27 2691
百度看了好多文章，但是设置完了，还是会换行 今天终于自己摸索出来不会换行 1.vscode->文件->首选项->设置 2.选择工作区->找到settings.json(滚动找到settings.json) 3.设置如下，就ok了 "settings": { "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions":{ "js-bea
VSCode 设置vue 保存自动格式化代码
weixin_30723433的博客
08-22 4474
设置保存自动格式化代码，开发效率大大提升！ 操作如下： 安装VSCodeeslint插件 如下配置setting.json文件： { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSi...
如何使用vscode进行代码格式化设置
最新发布
qq_67572731的博客
08-15 681
【代码】如何使用vscode进行代码格式化设置。
vscode 格式化 vue 代码
xiaomajia029的博客
03-06 5794
格式化 HTML：即 vue（template） 1. 安装 Vetur 拓展 2. 配置 setting.json 打开 [文件] -> [首选项] -> [设置] -> [拓展] -> [Vetur] vsCode 跟新过后设置变成下拉选择的方式来配置拓展，但是可以点击右上方的···按钮，选择选择打开 setting.json，即可添加用户设置 配置 template...
解决使用vscode格式化Vue文件会自动加分号问题
qq_34200636的博客
02-15 6031
在使用vscode开发vue项目时，通常都会装上Vetur插件。使用这个插件后vue文件会高亮显示，同时在shift+alt+f格式化时会自己加上分号，非常烦人。 所以我们要对vscode的配置文件进行配置支持vue的正确格式化 打开 文件–>首选项–>设置 (快捷键ctrl+，) 在常用设置里往下滑，找到在settings.json中编辑 打开它 在json中添加以下配置，就...
vscode编辑器 格式化 vue文件代码
逆水行舟，不进则退
07-14 5723
1. 安装vetur，安装ESlint2. 修改配置  file -> preferences->settings3. Shift+Alt+F 格式话代码（vscode自带格式化）4. ESlint格式化代码，把js代码格式化为ESlint格式6. save保存即可...
Vue项目HTML代码格式化
生活不止眼前的枸杞， 还有蜂蜜和咖啡！
07-05 1537
.eslintrc文件配置 eslint-plugin-vue 插件 解析器使用vue-eslint-parser，注意babel-eslint必须写在parserOptions里面，配置如下： parser: “vue-eslint-parser”, parserOptions: { parser: ‘babel-eslint’, sourceType: ‘module’ }, 插件使用vue，配置如下： plugins: [ “vue” ], eslint-plugin-vue插件有三种
vue实现codemirror代码编辑器中的SQL代码格式化功能
10-16
本文将详细介绍如何在Vue应用中集成CodeMirror，并利用sql-formatter插件实现SQL代码的格式化功能。 1. 安装sql-formatter插件 要在Vue项目中使用sql-formatter，首先需要通过npm安装该插件。打开终端或者命令行...
vue文件中HTML代码格式化方法.docx
11-22
在Vue.js开发过程中，我们经常会遇到...通过安装Vetur并指定HTML的默认格式化器，你可以轻松地使用VS Code内置的格式化快捷键对Vue文件中的HTML部分进行格式化，保持代码整洁有序，从而提升开发体验和团队协作效率。
详解VS Code使用之Vue工程配置format代码格式化
10-17
Vetur是一个专门为Vue.js开发优化的VS Code插件，它不仅提供了对.vue文件的语法高亮显示、智能代码提示等基础功能，还支持代码格式化。 要为Vue工程配置VS Code进行代码格式化，首先需要在VS Code中安装Vetur插件。...
vscode中，vue代码格式化配置
valentinelzt的博客
05-27 252
安装 eslint 和 vetur 插件 在setting.json中输入如下代码 // 添加进你的vscode的 setting.json "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript",{ "language": "vue", "autoFix": true },"html", "vue" ], ...
Vue-cli Eslint在vscode里代码自动格式化的方法
11-30
编辑器另外一个很重要的功能就是代码格式化了，VS Code默认提供常见文件的格式化，如.js,.html等。 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持。 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则： { "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier", "postcss": "prettier", "scss": "prettier", "less": "prettier",
vscode下的vue文件格式化问题
10-17
主要介绍了vscode下的vue文件格式化问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vscode格式化vue代码
weixin_43389084的博客
12-09 277
安装 vetur Prettier - Code formatter Beautify 三种插件 直接上图 3. //在settings.json写 { "editor.codeActionsOnSave": null, "workbench.colorTheme": "Solarized Dark", "workbench.iconTheme": "vscode-icons", "vetur.format.options.tabSize": 4, "[vue]": { .
【VScode】工具中【Vue】代码格式化及配置
热门推荐
qq_37219845的博客
04-18 1万+
VScode工具中Vue代码格式化及配置 效果 换行空格：2个；组件标签内属性自动换行 插件 安装Vetur插件 配置 打开setting.json文件 1.方法一：快捷键：ctrl+shift+p 2.方法二：通过VScode中【文件】→【首选项】→【设置】：找到“在setting.json中编辑” 主要配置vetur中的相关属性 ...
VSCode格式化代码Vue配置
suncsf的博客
03-21 236
VSCode格式化Vue时，Typescript代码单引号总是变成双引号 在根目录新建文件 .prettierrc.json { "singleQuote": true, "semi": false } 再次格式化就不会单引号变双引号了 ...
vscode设置vue3代码格式化
qq_23858785的博客
11-14 7452
vscode设置vue3代码格式化
vue vscode settings代码格式化配置
weixin_46919365的博客
12-14 924
/ "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中。// "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置。// "prettier.parser": "babylon", // 格式化的解析器，默认是babylon。// "prettier.printWidth": 100, // 超过最大值换行。
vscode-vue项目格式化
startyangu的博客
08-21 2118
PrettierVeturESLint
vue中codemirror怎么格式化代码
05-30
在 Vue 中使用 CodeMirror 可以通过两种方式：使用官方的 Vue 组件或者手动在 Vue 中创建 CodeMirror 实例。 无论哪种方式，都可以通过 CodeMirror 提供的 `autoFormatRange` 函数对文本进行格式化。下面以使用官方的 Vue 组件为例来说明如何在 Vue 中使用 CodeMirror 并格式化代码。 首先，在 Vue 项目中安装 CodeMirror 和 CodeMirror 的 Vue 组件： ``` npm install codemirror vue-codemirror --save ``` 然后，在 Vue 中注册 CodeMirror 组件： ```javascript import Vue from 'vue' import VueCodemirror from 'vue-codemirror' import 'codemirror/lib/codemirror.css' // 引入 CodeMirror 样式文件 import 'codemirror/theme/material.css' // 引入 CodeMirror 主题文件 import 'codemirror/mode/javascript/javascript.js' // 引入 JavaScript 语法模式文件 Vue.use(VueCodemirror) ``` 在组件中使用 CodeMirror： ```html <template> <div> <codemirror v-model="code" :options="options"></codemirror> </div> </template> <script> export default { data () { return { code: '', options: { tabSize: 2, // Tab 缩进大小为 2 mode: 'javascript', // 指定语言为 JavaScript theme: 'material' // 指定主题为 Material } } }, methods: { format () { const editor = this.$refs.myCodeMirror.getCodeMirror() const from = editor.getCursor(true) const to = editor.getCursor(false) editor.autoFormatRange(from, to) } } } </script> ``` 以上代码中，`options` 是 CodeMirror 的配置项，`format` 方法中调用了 `autoFormatRange` 函数对文本进行格式化。需要注意的是，需要通过 `this.$refs.myCodeMirror.getCodeMirror()` 获取 CodeMirror 实例才能调用 `autoFormatRange` 函数。 当然，以上只是一个简单的示例，实际使用中可能需要根据具体需求进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值