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

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

2024-06-24 954
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
关键词：
HTML vscode
HTML属性
vscode文件
HTML文件
vscode格式化
好奇的菜鸟
目录
相关文章
游客44yag4ft7nckq
|
2月前
|
移动开发 HTML5
HTML5 表单属性3
`<input>` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法，这些属性可覆盖 `<form>` 标签中的相应属性，并且主要适用于 `type="submit"` 和 `type="image"` 的输入类型。
游客44yag4ft7nckq
36 10
游客44yag4ft7nckq
|
1月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `<input>` 元素的值，适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
游客44yag4ft7nckq
36 7
游客44yag4ft7nckq
|
1月前
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `<input>` 标签中的数值或日期范围。例如，可以设置日期选择器的最早和最晚日期，或限制数字输入框的值范围。`multiple` 属性允许在 `<input>` 中选择多个值，适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
游客44yag4ft7nckq
34 7
游客44yag4ft7nckq
|
1月前
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `<input>` 标签中的 `image` 类型，定义图像的高度和宽度。
游客44yag4ft7nckq
34 6
游客44yag4ft7nckq
|
2月前
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性，用于 `<input>` 元素，指示该输入在表单提交时不需验证，可覆盖 `<form>` 元素的 `novalidate` 属性，常与 `type="submit"` 一起使用。示例中展示了如何通过两个提交按钮（一个使用验证，另一个不使用）实现不同的表单提交方式。
游客44yag4ft7nckq
35 7
游客44yag4ft7nckq
|
2月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性2
`novalidate` 是 HTML `<form>` 元素的布尔属性，用于禁用浏览器的默认表单验证功能。当此属性存在时，浏览器不会检查表单字段是否符合预设的验证规则，允许开发者通过 JavaScript 等手段自定义验证逻辑。
游客44yag4ft7nckq
26 6
游客44yag4ft7nckq
|
1月前
|
移动开发 数据安全/隐私保护 HTML5
HTML5 表单属性8
`required`属性确保表单提交前输入框不能为空，适用于多种类型的 `<input>` 标签，如文本、邮箱、密码等。`step`属性则用于指定输入域中合法数值的间隔，常与`max`和`min`属性配合使用，适用于数字、日期等类型。例如，设置`<input type="number" step="3">`可使输入值以3为单位递增或递减。
游客44yag4ft7nckq
28 1
游客44yag4ft7nckq
|
2月前
|
移动开发 UED HTML5
HTML5 表单属性1
HTML5为<form>和<input>标签引入了多个新属性，增强了表单的功能性和用户体验。其中，<form>新增了autocomplete和novalidate属性；<input>则增加了如autofocus、formaction、placeholder等13个新属性，支持更精细的表单控制和数据验证。例如，autocomplete属性允许表单或输入字段提供自动完成功能，提高用户填写效率。
游客44yag4ft7nckq
33 3
大树营养快线
|
2月前
|
搜索推荐 前端开发 UED
哪些 HTML 全局属性在 SEO 优化中比较重要？
【10月更文挑战第27天】这些HTML全局属性通过不同的方式为搜索引擎提供了更丰富、准确的页面信息，有助于提高页面的可索引性、相关性和用户体验，从而在SEO优化中发挥着重要的作用。开发者应充分重视并合理运用这些属性，以提升网站在搜索引擎中的排名和流量。
大树营养快线
47 12
大树营养快线
|
2月前
|
前端开发 搜索推荐 算法
SEO 优化中，如何避免 HTML 全局属性和局部属性的冲突？
【10月更文挑战第27天】
大树营养快线
56 2

热门文章

最新文章

  • 1
    Python 爬虫必备杀器，xpath 解析 HTML
  • 2
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
  • 3
    如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
  • 4
    HTML（HyperText Markup Language，超文本标记语言）
  • 5
    太便利了 ！通义灵码方便生成html页面
  • 6
    HTML5 新的 Input 类型2
  • 7
    HTML（HyperText Markup Language）和XML（Extensible Markup Language）
  • 8
    HTML5 元素2
  • 9
    高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
  • 10
    HTML与CSS在Web组件化中的核心作用及前端技术趋势
  • 1
    【GitHub】github学生认证，在vscode中使用copilot的教程
    1063
  • 2
    【vscode】在本地加载远端环境并开发
    361
  • 3
    vscode跟踪vue代码方法
    200
  • 4
    如何使用vscode启动Flask并实现无公网IP远程访问内网服务
    224
  • 5
    vscode 使用python无法导入库
    218
  • 6
    PHP基于B/S版 医院不良事件管理系统源码vscode+laravel8医院如何加强不良事件上报系统的管理 AEMS系统源码
    73
  • 7
    一个开源轻量级的C#代码格式化工具（支持VS和VS Code）
    235
  • 8
    【专栏：工具与技巧篇】使用代码编辑器（VS Code/Sublime Text）提升开发效率
    324
  • 9
    在 VS Code 中使用 OSS 进行 Markdown 文档编写
    324
  • 10
    VSCode快捷键使用教程：提高编码效率的利器
    1131

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月