解决vscode写vue代码受eslint限制不自动格式化问题

vue组件写代码提示慢，受eslint限制，不自动格式化为eslint匹配的配置方法

配置步骤

第一步：下载插件

	vueter，pretitter，eslint，FormattingToggle

第二部：在setting.json中配置

{
	"window.zoomLevel": 2,
	"workbench.colorCustomizations": {
		//护眼主题
		"[Atom One Light]": {
			"editor.background": "#C7EDCC",
			"sideBar.background": "#C7EDCC",
			"activityBar.background": "#d0f0d4",
			"editor.lineHighlightBackground": "#e7e6e6a4",
			"tab.activeForeground": "#666",
			"tab.inactiveBackground": "#d0f0d4",
			"tab.activeBackground": "#bae9c0",
			"badge.background": "#ff8800",
			"tab.inactiveForeground": "#999",
			"sideBarSectionHeader.background": "#d0f0d4",
			"editor.findMatchBackground": "#CCFF66",
			"editor.rangeHighlightBackground": "#CCFF66",
			"statusBar.background": "#a5dfad",
			"editor.selectionBackground": "#ccc",
		},
	},
	//背景配置
	"background.customImages": [
		// "file:///E:/图片/189844.jpg"
	],
	"background.style": {
		"margin": "0",
		"padding": "0",
		"content": "''",
		"pointer-events": "none",
		"position": "fixed", //图片位置
		"top": "0",
		"left": "0",
		"width": "100%",
		"height": "100%",
		"z-index": "99999",
		"background.repeat": "no-repeat",
		"background-size": "100%,100%", //图片大小
		"opacity": 0.03, //透明度
	},
	"background.useFront": true,
	"background.useDefault": false, //这里如果为true，则自己设置的图片不起作用，改为false,图片才能出来哦
	//编辑器配置
	"editor.wordWrap": "on",
	"editor.insertSpaces": false,
	"editor.mouseWheelZoom": true,
	"editor.wrappingIndent": "indent",
	"workbench.commandPalette.preserveInput": true,
	"emmet.triggerExpansionOnTab": true,
	"editor.tabCompletion": "on",
	"editor.minimap.enabled": false,
	"workbench.activityBar.visible": true,
	"workbench.statusBar.visible": true,
	"breadcrumbs.enabled": false,
	"editor.suggestSelection": "first",
	"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
	"workbench.colorTheme": "Atom One Light",
	"workbench.iconTheme": "material-icon-theme",
	// "[html]": {
	// 	"editor.defaultFormatter": "HookyQR.beautify"
	// },
	// "[javascript]": {
	// 	"editor.defaultFormatter": "HookyQR.beautify"
	// },
	"editor.detectIndentation": false,
	"prettier.useTabs": true,
	"editor.autoClosingBrackets": "always",
	// "files.autoSave": "onWindowChange",
	"files.autoSaveDelay": 10,
	"editor.autoClosingQuotes": "always",
	"editor.hover.enabled": false,
	"editor.hover.delay": 0.01,
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	},
	"gitlens.advanced.messages": {
		"suppressLineUncommittedWarning": true
	},
	"editor.formatOnPaste": false,
	"editor.formatOnSave": false,
	"editor.formatOnType": false,
	"editor.fontSize": 16,
	"editor.parameterHints.enabled": false,
	"javascript.updateImportsOnFileMove.enabled": "always",
	"editor.tabSize": 2,
	//配置vue文件
	"emmet.includeLanguages": {
		"wxml": "html",
		"vue-html": "html",
		"vue": "html"
	},
	"emmet.syntaxProfiles": {
		"vue-html": "html",
		"vue": "html"
	},
	//配置vetur的
	"vetur.format.defaultFormatter.html": "js-beautify-html",
	"vetur.format.defaultFormatterOptions": {
		//配置prettirr
		"prettier": {
      "semi": false,
      "singleQuote": true
		},
		"js-beautify-html": {
			"wrap_attributes": "force-aligned",
			"wrap_line_length": 120
		}
	},
	//vue 提示慢配置，vue文件转换为html
	"files.associations": {
		"*.vue": "vue"
	},
	//配置eslint
	"files.autoSave": "off",
	"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
		//eslint 代码自动检查相关配置
	"eslint.enable": true,
	"eslint.run": "onType",
	"eslint.options": {
		"eslint.autoFixOnSave": true,
		"extensions": [".js", ".vue"],
		"eslint.validate":[
			"javascriptreact",
			"javascript",
			{
				"language": "vue",
				"autoFix": true
			},
			"html",
			{
				"language": "html",
				"autoFix": true
			}
		]
	},	
}

以上是我个人的vscode用户设置全部配置，关于vue框架组件的配置是以下一部分

"emmet.includeLanguages": {
		"wxml": "html",
		"vue-html": "html",
		"vue": "html"
	},
	"emmet.syntaxProfiles": {
		"vue-html": "html",
		"vue": "html"
	},
	//配置vetur的
	"vetur.format.defaultFormatter.html": "js-beautify-html",
	"vetur.format.defaultFormatterOptions": {
		//配置prettirr
		"prettier": {
      "semi": false,
      "singleQuote": true
		},
		"js-beautify-html": {
			"wrap_attributes": "force-aligned",
			"wrap_line_length": 120
		}
	},
	//vue 提示慢配置，vue文件转换为html
	"files.associations": {
		"*.vue": "vue"
	},
	//配置eslint
	"files.autoSave": "off",
	"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
		//eslint 代码自动检查相关配置
	"eslint.enable": true,
	"eslint.run": "onType",
	"eslint.options": {
		"eslint.autoFixOnSave": true,
		"extensions": [".js", ".vue"],
		"eslint.validate":[
			"javascriptreact",
			"javascript",
			{
				"language": "vue",
				"autoFix": true
			},
			"html",
			{
				"language": "html",
				"autoFix": true
			}
		]
	},	

配置完成

第三步：切换formating的开关

以上切换必须要下载formating Toggle的插件，切换为

保存会自动格式化为eslit支持的格式

第四步：再敲一个空格，切换formating保存

以上的配置有一点缺陷是函数的声明后没有空格
会报错

这时候需要在函数后敲一个空格，切换formating为关闭，如

然后保存，这时候就不会报错啦，函数前缺空格实在想不出来什么简便的方法了，只能如此啦，有谁有更快捷得方法，评论区见哦