VSCode外掛之Beautify

一燈發表於2019-01-18
VSCode

簡介

  • Beautify是格式化程式碼的外掛
  • 可美化JS、JSON、CSS、Sass、HTML（其他型別的檔案不行）
  • 在資料夾根目錄下建立 .jsbeautifyrc 檔案

配置規則

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 
{
  "indent_char": " ",
  "indent_size": 0,
  "eol": "\n",
  "end_with_newline": false,
  "indent_with_tabs": false,
  "preserve_newlines": true
}
複製程式碼

2.適合JS、HTML的規則

設定 適用 描述
max_preserve_newlines JS、HTML [Int] 最多能保留的空行，預設：10
wrap_line_length JS、HTML [Int] 在N個字元後換行，預設：0（忽略） 
{
  "max_preserve_newlines": 10,
  "wrap_line_length": 0
}
複製程式碼

3.適合HTML的規則

設定 適用 描述
extra_liners HTML [Array] 陣列內定義的標籤，在它們之前有一個換行符，預設["head", "body", "/html"]
indent_body_inner_html HTML [Bool] 縮排 < body> 中的元素，預設：true
indent_head_inner_html HTML [Bool] 縮排 < head> 中的元素，預設：true
indent_inner_html HTML [Bool] 縮排< head>和< body>中的元素（head和body也會縮排），預設：false
indent_scripts HTML [String] 縮排< script> 標籤裡的程式碼，有三個值："keep"(對齊< script>標籤)、"separate"(對齊左邊界)、"normal"(正常縮排)，預設："normal"
wrap_attributes HTML [String] 將屬性換到新行，有5個值："auto"(不換行)、"force"(第2個起換行)、 "force-aligned"(第2個起換行，與第1個屬性對齊)、 "force-expand-multiline"或"align-multiple"(兩個效果一樣，所有屬性都換行)，預設："auto"
wrap_attributes_indent_size HTML [Int] 屬性換行縮排大小,預設：indent_size
unformatted HTML [Array] 陣列中的標籤不會重新格式化，預設：[]
content_unformatted HTML [Array] 陣列中標籤的內容不會重新格式化，預設：["pre","textarea"] 
{
  "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_rules CSS [Bool] 規則之間新增換行符，預設：false
selector_separator_newline CSS [Bool] 選擇器之間新增換行符，預設：true
space_around_combinator CSS [Bool] 選擇器和樣式規則周圍新增空格，預設：false 
{
  "newline_between_rules": false,
  "selector_separator_newline": false,
  "space_around_combinator": false,
}
複製程式碼

5.適合JS的規則

設定 適用 描述
comma_first JS [Bool] 將逗號放在新行的開頭，預設：false
indent_level JS [Int] 縮放級別，即距離左邊界多遠開始，預設：0
keep_array_indentation JS [Bool] 保留陣列縮排，預設：false
keep_function_indentation JS [Bool] 保留函式縮排，預設：false
space_after_anon_function JS [Bool] 匿名函式與括號之間新增空格，預設：false
space_after_named_function JS [Bool] 函式名與括號之間新增空格，預設：false
space_before_conditional JS [Bool] 條件語句和括號之間新增空格，預設：true
space_in_empty_paren JS [Bool] 空括號中保留空格，預設：false
space_in_paren JS [Bool] 括號內新增填充空格，如f( a, b )，預設：false 
{
  "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(不同的電腦可能不一樣)

補充

有些規則沒有補充完整，理解不是很清楚，更多詳細內容可參考 github.com/HookyQR/VSC…

相關文章