HBuliderX开发Vue，代码格式化重排，不符合eslint的格式解决方法_hbuilderx重排代码格式没用

步骤1

先点击 工具-》设置-》插件配置-》jsbeautifrc.js进行配置

步骤2

修改该文件：

module.exports = {
	// 这里是设置哪种种后缀的文件以一个key的形式给options中配置
	parsers: {
		".js": "js",
		".json": "js",
		".njs": "js",
		".sjs": "js",
		".wxs": "js",
		".css": "css",
		".nss": "css",
		".wxss": "css",
		".acss": "css",
		".ttss": "css",
		".qss": "css",
		".html": "html",
		".ux": "html",
		".wxml": "html",
		".nml": "html",
		".vue": "html",
		".nvue": "html",
		".axml": "html",
		".swan": "html",
		".ttml": "html",
		".qml": "html"
	},
	// 这里是设置代码格式
	options: {
		"indent_size": "1",
		"indent_char": "\t",
		"indent_with_tabs": false, //使用tab缩进
		"eol": "\r\n", //行结束符
		"end_with_newline": false, //使用换行结束输出
		"indent_level": 0, //起始代码缩进数
		"preserve_newlines": true, //保留空行
		"max_preserve_newlines": null, //最大连续保留换行符个数。比如设为2，则会将2行以上的空行删除为只保留1行
		"space_in_paren": false, //括弧添加空格 示例 f( a, b )
		"space_in_empty_paren": false, //函数的括弧内没有参数时插入空格 示例 f( )
		"jslint_happy": false, //启用jslint-strict模式
		"space_after_anon_function": false, //匿名函数的括号前加空格。
		"brace_style": "none,preserve-inline", //代码样式， "collapse", "expand", "end-expand", "none", "collapse,preserve-inline", "expand,preserve-inline", "end-expand,preserve-inline", or "none,preserve-inline"
		"unindent_chained_methods": false, //不缩进链式方法调用
		"break_chained_methods": false, //在随后的行中断开链式方法调用
		"keep_array_indentation": false, //保持数组缩进
		"unescape_strings": false, //使用xNN符号编码解码可显示的字符
		"wrap_line_length": 120,
		"e4x": false, //支持jsx
		"comma_first": false, //把逗号放在新行开头，而不是结尾
		"operator_position": "before-newline",
		"unformatted": ["wbr"],
		// 这里是对应parsers后缀中html类型的文件的代码格式化
		"html": {
			"indent_handlebars": true,
			"indent_inner_html": true,
			"indent-scripts": "normal", //[keep|separate|normal]
			"extra_liners": [], //配置标签列表，需要在这些标签前面额外加一空白行
			// 查看手册：https://github.com/HookyQR/VSCodeBeautify/blob/master/Settings.md
			"indent_scripts": "separate", // "keep", "separate" 这个不会加空格, or "normal"
			"js": {
				// 在命名函数的括号之前添加一个空格，即。function example ()。
				"space_after_named_function": true,
				// 在匿名函数的括号之前添加一个空格，即。function ()
				"space_after_anon_function": true
			}
		},
		// 在命名函数的括号之前添加一个空格，即。function example ()。
		"space_after_named_function": true,
		// 在匿名函数的括号之前添加一个空格，即。function ()
		"space_after_anon_function": 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

格式化后的效果

这样的js代码就符合eslint格式了，编译可以通过了！！！

修改原理

查看手册：https://github.com/HookyQR/VSCodeBeautify/blob/master/Settings.md
里面有配置不同代码格式的方法
在上面的修改方法中几个重要的配置

在命名函数的括号之前添加一个空格，即。function example ()。

"space_after_named_function": true
1

在匿名函数的括号之前添加一个空格，即。function ()

"space_after_anon_function": true
1

这个不会给vue的script标签里面开头的js代码加空格

"indent_scripts": "separate"
1

这个是设置json数组格式化

"brace_style": "none,preserve-inline", //代码样式， "collapse", "expand", "end-expand", "none", "collapse,preserve-inline", "expand,preserve-inline", "end-expand,preserve-inline", or "none,preserve-inline"
1

后续如果有其它代码格式需要修改，可以参考配置手册配置