争逐

主题

VS Code 插件 Beautify 和 Vetur 中的 js-beautify-html 配置项

简介 ​

  • Beautify 是格式化代码的插件
  • 可美化 JS.JSON.CSS.Sass.HTML(其他类型的文件不行)

配置规则 ​

1. 适合所有文件类型的规则 ​

设置适用描述
indent_size所有[Int] 缩进大小, 默认:4
indent_char所有[String] 缩进字符, 默认:" "
eol所有[String] 行结束符, 默认:"\n"
end_with_newline所有[Bool] 确保最后一行是新行, 默认:false
indent_with_tabs所有[Bool] 用 Tab 缩进, 会覆盖 indent_size 和 indent_char, 默认:false
preserve_newlines所有[Bool] 留原有的多余空行, 默认:true
json
{
  "indent_char": " ",
  "indent_size": 0,
  "eol": "\n",
  "end_with_newline": false,
  "indent_with_tabs": false,
  "preserve_newlines": true
}

2. 适合 JS.HTML 的规则 ​

设置适用描述
max_preserve_newlinesJS.HTML[Int] 最多能保留的空行, 默认:10
wrap_line_lengthJS.HTML[Int] 在 N 个字符后换行, 默认:0(忽略)
json
{
  "max_preserve_newlines": 10,
  "wrap_line_length": 0
}

3. 适合 HTML 的规则 ​

设置适用描述
extra_linersHTML[Array] 数组内定义的标签, 在它们之前有一个换行符, 默认 ["head", "body", "html"]
indent_body_inner_htmlHTML[Bool] 缩进 < body> 中的元素, 默认:true
indent_head_inner_htmlHTML[Bool] 缩进 < head> 中的元素, 默认:true
indent_inner_htmlHTML[Bool] 缩进 < head > 和 < body > 中的元素 (head 和 body 也会缩进), 默认:false
indent_scriptsHTML[String] 缩进 < script> 标签里的代码, 有三个值:"keep"(对齐 < script > 标签)."separate"(对齐左边界)."normal"(正常缩进), 默认:"normal"
wrap_attributesHTML[String] 将属性换到新行, 有 5 个值:"auto"(不换行)."force"(第 2 个起换行). "force-aligned"(第 2 个起换行, 与第 1 个属性对齐). "force-expand-multiline"或"align-multiple"(两个效果一样, 所有属性都换行), 默认:"auto"
wrap_attributes_indent_sizeHTML[Int] 属性换行缩进大小, 默认:indent_size
unformattedHTML[Array] 数组中的标签不会重新格式化, 默认:[]
content_unformattedHTML[Array] 数组中标签的内容不会重新格式化, 默认:["pre","textarea"]
json
{
  "extra_liners": ["head", "body", "/html"],
  "indent_body_inner_html": true,
  "indent_head_inner_html": true,
  "indent_inner_html": false,
  "indent_scripts": "normal",
  "wrap_attributes": "auto",
  "wrap_attributes_indent_size": 2,
  "unformatted": [],
  "content_unformatted": ["pre","textarea"]
}

4. 适合 CSS 的规则 ​

设置适用描述
newline_between_rulesCSS[Bool] 规则之间添加换行符, 默认:false
selector_separator_newlineCSS[Bool] 选择器之间添加换行符, 默认:true
space_around_combinatorCSS[Bool] 选择器和样式规则周围添加空格, 默认:false
json
{
  "newline_between_rules": false,
  "selector_separator_newline": false,
  "space_around_combinator": false,
}

5. 适合 JS 的规则 ​

设置适用描述
comma_firstJS[Bool] 将逗号放在新行的开头, 默认:false
indent_levelJS[Int] 缩放级别, 即距离左边界多远开始, 默认:0
keep_array_indentationJS[Bool] 保留数组缩进, 默认:false
keep_function_indentationJS[Bool] 保留函数缩进, 默认:false
space_after_anon_functionJS[Bool] 匿名函数与括号之间添加空格, 默认:false
space_after_named_functionJS[Bool] 函数名与括号之间添加空格, 默认:false
space_before_conditionalJS[Bool] 条件语句和括号之间添加空格, 默认:true
space_in_empty_parenJS[Bool] 空括号中保留空格, 默认:false
space_in_parenJS[Bool] 括号内添加填充空格, 如 f( a, b ), 默认:false
json
{
  "comma_first": false,
  "indent_level": 0,
  "keep_array_indentation": false,
  "keep_function_indentation": false,
  "space_after_anon_function": false,
  "space_after_named_function": false,
  "space_before_conditional": false,
  "space_in_empty_paren": false,
  "space_in_paren": false
}

运行 ​

  • Shift+Alt+F(不同的电脑可能不一样)

补充 ​

有些规则没有补充完整, 理解不是很清楚, 更多详细内容可参考 https://github.com/HookyQR/VSCodeBeautify/blob/master/Settings.md