[JavaScript知识库] VSCode保存代码自动格式化

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> VSCode保存代码自动格式化 -> 正文阅读

[JavaScript知识库]VSCode保存代码自动格式化

首先需要安装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。

在这里插入图片描述