解决VSCode保存代码自动格式化无效

zhuhy66

已于 2024-09-12 15:50:19 修改

阅读量1.2w

点赞数 9

文章标签： vue javascript vscode

于 2021-08-14 19:20:22 首次发布

本文链接：https://blog.youkuaiyun.com/m0_49090130/article/details/119704483

版权

首先需要安装ESLint、Prettier - Code formatter、Vetur插件。
在设置里搜索template找到 Vetur › Format › Default Formatter: HTML，修改选项值（下图）

在这里插入图片描述

然后点击（上图）右上角切换settings.json。设置如下（下图）。

在这里插入图片描述

{
	"vetur.format.defaultFormatter.html": "js-beautify-html",
	"vetur.format.defaultFormatterOptions": {
		"js-beautify-html": {
			"wrap_attributes": "auto"
		},
		"prettyhtml": {
			"printWidth": 100,
			"singleQuote": false,
			"wrapAttributes": false,
			"sortAttributes": false,
		}
	},
    "vetur.format.options.tabSize": 4,
    "prettier.tabWidth": 4,
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
	"[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
	},
    "editor.formatOnSave": true,
    "editor.detectIndentation": false
}

！！！重点：如果保存依然没有反应，或者想自己选择插件进行格式化，可以把（上图）标红两段代码删掉，然后在需要格式化的任意一个页面Shift+Alt+F。（注意：如果删除了vue的代码需要在vue页面，删除javascript的代码需要在js页面），然后会弹出（下图），点击配置，选择想设置的插件就行了，我这里vue文件选的vetur，js文件用的prettier。

在这里插入图片描述