AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

VScode格式化vue文件--避免html属性换行

2024-06-24 970
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： VScode格式化vue文件--避免html属性换行

前后对比

一、插件

安装Beautify和Vetur插件

二、编辑Beautify配置文件

html里边增"vue"

"beautify.language": {       
 
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "vue" //在这里加上vue
        ]
    }

三、将Beautify插件设置为默认格式化代码插件

Shift+Alt+F愉快地格式化编码吧

文章标签：
JavaScript
关键词：
vscode换行
vscode vue
vscode文件
vscode格式化
HTML vscode
好奇的菜鸟
目录
相关文章
众所周知
|
4月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展，代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具，可以确保代码风格一致，提升团队协作效率和代码质量。
众所周知
311 2
john散漫
|
4月前
|
JavaScript 前端开发 安全
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
【10月更文挑战第17天】Vue 指令是构建 Vue 应用的基础工具，掌握它们的特性和用法是成为一名优秀 Vue 开发者的重要一步。通过深入理解和熟练运用这些指令，可以打造出更加出色的前端应用。
john散漫
84 50
龙大吉
|
3月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码，包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展，代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码，包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具，可以显著提升编码效率和代码质量。
龙大吉
689 4
龙大吉
|
3月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展，代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具，可以确保代码风格一致，提高代码质量和可读性。
龙大吉
372 1
龙大吉
|
4月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码，提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展，代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码，提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier，以及设置 VSCode，实现代码实时检查和格式化，确保代码风格一致。
龙大吉
916 2
龙大吉
|
4月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码，提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码，提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier，实现代码规范检查和自动格式化，确保代码风格一致，提高可读性和维护性。
龙大吉
140 2
邹荣乐
|
4月前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略：html2canvas与jspdf联手，中文乱码与自动换行难题攻克
Vue生成PDF文件攻略：html2canvas与jspdf联手，中文乱码与自动换行难题攻克
邹荣乐
357 0
六卿
|
5月前
|
JavaScript 前端开发
react字符串转为dom标签，类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法，类似于Vue中的`v-html`指令，通过使用`dangerouslySetInnerHTML`属性实现。
六卿
134 0
react字符串转为dom标签，类似于Vue中的v-html
html的七十二变
|
5月前
|
搜索推荐 索引 SEO
HTML 文本格式化对于搜索引擎优化（SEO）
HTML文本格式化是搜索引擎优化（SEO）的关键，合理的格式化有助于搜索引擎理解网页内容，提升排名。主要技巧包括：使用正确的标题标签、组织段落和列表、自然融入关键词、优化图像及链接，并使用语义化标签和Meta标签。遵循这些最佳实践，可以显著提高SEO效果，吸引更多访客。
html的七十二变
76 5
Liuqz2009
|
6月前
|
资源调度 JavaScript 应用服务中间件
HTML、WebStrom和Vue使用
HTML、WebStrom和Vue使用
Liuqz2009
32 3

热门文章

最新文章

  • 1
    python安装、vscode安装、conda安装：一文搞定Python的开发环境（史上最全）
  • 2
    抛弃node和vscode，如何用记事本开发出一个完整的vue前端项目
  • 3
    超好看的404提示页面HTML源码
  • 4
    HTML在线扫雷游戏网页源码
  • 5
    【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
  • 6
    html实现的文字发散动画效果代码
  • 7
    html+js+css实现的建筑方块立体数字时钟源码
  • 8
    css3 svg制作404页面动画效果HTML源码
  • 9
    HTML5 SVG实现可爱的小鸟卡通动画3D特效
  • 10
    基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
  • 1
    html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
    163
  • 2
    HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发
    104
  • 3
    好看的html网站维护源码
    359
  • 4
    html+echars图表加日期检索
    76
  • 5
    html+echars的统计报表
    89
  • 6
    【CSDN创作优化1】个人简介优化 html font属性
    76
  • 7
    一种pug与html相互转换的工具
    135
  • 8
    android TextView HTML 的效果
    60
  • 9
    BeautifulSoup 是一个 Python 库，用于从 HTML 和 XML 文件中提取数据
    183
  • 10
    HTML5/CSS3粒子效果进度条代码
    88

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    阿里云上1分钟搞定幻兽帕鲁联机服务器搭建