vscode emmet 代码格式化

vscode emmet 代码格式化

div.container>div.item.item$*9

<!-- div.container>div.item.item$*9 -->
<div class="container">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
    <div class="item item5"></div>
    <div class="item item6"></div>
    <div class="item item7"></div>
    <div class="item item8"></div>
    <div class="item item9"></div>
</div>

html行内元素换行

    "emmet.syntaxProfiles": {
        "html": {
            "inline_break": 2
         }
    }
### 推荐的扩展程序 为了更好地支持 Vue 项目中的代码格式化,建议安装以下 Visual Studio Code 扩展程序: - **ESLint**: 提供 JavaScript 和 Vue 文件的静态分析和错误检测功能[^1]。 - **Prettier - Code formatter**: 自动美化多种编程语言的代码风格,包括 HTMLCSS 及 JavaScript 等。 - **Vetur**: 集成对 Vue.js 的语法高亮显示、Emmet 支持以及智能感知等功能。 这些插件可以协同工作来帮助开发者保持一致性的编码标准并提高开发效率。 ### 设置配置文件 对于 `.vue` 文件中 ESLint 格式化的失效问题,可以在 `settings.json` 中做适当调整。具体来说是在 `"eslint.validate"` 数组内增加对 HTML 类型的支持,这样即使编辑器将 `.vue` 文件当作 HTML 来处理也能正常触发 ESLint 规则验证[^2]: ```json { "eslint.validate": [ "javascript", "javascriptreact", "vue", "html", // 添加此项以确保 .vue 文件被正确解析 { "language": "vue", "autoFix": true } ] } ``` 此更改使得 ESLint 能够更全面地覆盖到不同类型的源码片段上执行自动修复操作。 ### 解决常见格式化异常 当遇到 `<span>` 或其他标签内部结构被打乱的情况时,这可能是由于默认格式化工具有限制所引起的。为了避免这种情况发生,可以通过修改 Vetur 插件的相关选项来进行优化[^3]。尝试向用户的全局或工作区级别的 `settings.json` 加入下面的内容: ```json { "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" } }, "[vue]": { "editor.defaultFormatter": "octref.vetur" } } ``` 上述设置指定了使用 js-beautify 工具作为 HTML 片段的主要格式化引擎,并通过自定义参数控制属性换行方式,从而达到更好的视觉效果;同时也设定了在打开 `.vue` 文件时优先选用 Vetur 进行整体格式化处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Punkerwei

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值