解决vue中eslint的配置，组件代码提示慢问题_eslint 导致 vue 编码很卡

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

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

配置步骤

第一步：下载插件

	vueter，pretitter，eslint，FormattingToggle
1

第二部：在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
			}
		]
	},	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

以上是我个人的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
			}
		]
	},	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

配置完成

第三步：切换formating的开关

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

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

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

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

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

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