1.下载安装Vetur插件

在这里插入图片描述

2.打开配置json文件

【File】-【Preference】-【Settings】-【Extensions】-【Vetur】-【Edit in settings.json】

在这里插入图片描述在这里插入图片描述

3.将下列内容追加到 settings.json 文件中:

	"vetur.format.defaultFormatterOptions": {
        "prettyhtml": {
            "tabWidth": 4, // 这里可以根据各个formatter进行细分设置
        }
    },
    "vetur.format.options.tabSize": 4,
    "vetur.format.options.useTabs": false,
    "vetur.format.defaultFormatter.html": "prettyhtml",
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.postcss": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.sass": "sass-formatter",
    "vetur.format.defaultFormatter.less": "prettier",
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.ts": "prettier"

4.在需要格式化的vue文件中,右键选择【Format Document】,见证奇迹~(无需重启VSCode)

在这里插入图片描述

参考资料:
https://vuejs.github.io/vetur/formatting.html#formatters

以上。

Logo

前往低代码交流专区

更多推荐