vs code 设置.vue文件格式化setting.json配置

1、在vscode中,拷贝某个组件时,属性自动换行,导致一个文件千百行 ,代码看着很凌乱,如下:

解决方法:

1.vs 安装 vetur插件;

2.vetur->format->default formatter:html,这项将格式化模板选择为:js-beautify-html

3.设置好以后,往下滑找到Format:Default Formatter Option,在settings.json中,将以下代码放到settings.json

代码如下:

复制代码
{
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "explorer.confirmDelete": false,
    "vetur.format.options.tabSize": 4,   // 每个缩进级别的空格数,由所有格式化程序继承
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
             // - auto: 仅在超出行长度时才对属性进行换行
             // - force: 对除第一个属性外的其他每个属性进行换行
             // - force-aligned: 对除第一个属性外的其他每个属性进行换行,并保持对齐
             // - force-expand-multiline: 对每个属性进行换行
             // - aligned-multiple: 当超出折行长度时,将属性进行垂直对齐
             // - force-expand-multiline:属性折行对齐方式
            "wrap_attributes": "auto",
            "wrap_line_length": 1200, // 设置一行多少字符换行
            "semi": false, // 是否在每行末尾添加分号
            "singleQuote": true, // 使用单引号
        },
    },
    // 补充:script标签内 js 代码保存自动换行的问题
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.scriptInitialIndent": true,   // js部分是否有初始缩进
    "vetur.format.styleInitialIndent": true,    // style部分是否有初始缩进
} 
复制代码

效果展示:

 

posted @   半白半黑  阅读(2798)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示