vscode 插件Vetur解决代码高亮和格式化问题

最新推荐文章于 2025-10-04 08:46:40 发布

原创最新推荐文章于 2025-10-04 08:46:40 发布 · 7.4k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

js基础专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何在VSCode中配置Vue项目，包括使用Vetur插件解决代码高亮问题，调整settings.json设置以优化HTML和JS代码格式，以及如何通过Prettier-Codeformatter插件进一步定制代码风格。

在用vscode打开vue项目的时候，通常会这样
在这里插入图片描述
后来找到了一个插件Vetur

下载后重新加载页面，页面就比较舒服了，解决了代码高亮问题

但是我们发现，vue文件html代码无法格式化，这样就比较难受，后来在设置settings.json中添加设置

	// 更改vue的html格式，根据需求设置
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // 保存时自动格式化
    "editor.formatOnSave": true,

这样保存之后，我们发现html标签属性强制换行

在这里插入图片描述
如果不喜欢这样的样式，可以在settings.json中添加设置

"vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto",
        }
    },

注： // 对属性进行换行。
// - auto: 仅在超出行长度时才对属性进行换行。
// - force: 对除第一个属性外的其他每个属性进行换行。
// - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
// - force-expand-multiline: 对每个属性进行换行。
// - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
保存结果
在这里插入图片描述

然后我就发现vue里js代码又出现了问题，原代码是这样
在这里插入图片描述
保存以后

本来不加双引号和分号就是为了简单，这样就又有问题了，后来在设置settings.json中添加设置，之后重启编辑器

	// 更改vue的js格式
    "vetur.format.defaultFormatter.js": "vscode-typescript",

保存以后
在这里插入图片描述
这样双引号是双引号，分号是分号，但还有一种强制转换，安装插件Prettier - Code formatter，在设置settings.json中添加设置

	// 控制尾随分号
    "prettier.semi": false,
    // 强制单引号
    "prettier.singleQuote": true,

原代码
在这里插入图片描述
保存以后

总结：安装Vetur，在seetings.json中添加

	// 更改vue的html格式，根据需求设置
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // 更改vue的js格式
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    // 保存时自动格式化
    "editor.formatOnSave": true,
    // 取消html标签属性强制换行
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto",
        }
    },