VSCode - Beautify插件配置

Posted on | In

1.使用Beautify插件配置 自动格式化按如下步骤设置

  • 在工作目录下建立.jsbeautifyrc文件.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
      "brace_style": "none,preserve-inline",
      "indent_size": 2,
      "indent_char": " ",
      "jslint_happy": true,
      "unformatted": [""],
      "css": {
        "indent_size": 2
      }
    }

注释

  • brace_style，格式风格，详见官方说明（为避免和eslint默认检查冲突，建议此属性设置为 none,preserve-inline）
  • indent_size，缩进长度（为避免和eslint默认检查冲突，建议此属性设置为 2）
  • indent_char，缩进填充的内容（充满♂）
  • jslint_happy:true，若你要搭配jslint使用，请开启此选项
  • unformatted:[“a”,”pre”]，这里放不需要格式化的标签类型。注意 template 也是默认不格式化的，.vue 的template 标签如果需要格式化请在 .jsbeautifyrc 重新定义不带 template 的声明属性

2.启用保存时自动

在VSCode的配置文件里添加 editor.formatOnSave:true 即可实现保存时自动格式化

3.快捷键

在 VS Code 的键盘快捷方式文件里添加

1
2
3
4
5
{
  "key": "cmd+b", // 自己定键位
  "command": "HookyQR.beautify",
  "when": "editorFocus"
}

4.单独配置vue

  • 文件-> 设置 -> settings.json 中添加属性
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    "beautify.language": {
          "js": {
              "type": [
                  "javascript",
                  "json"
              ],
              "filename": [
                  ".jshintrc",
                  ".jsbeautify"
              ]
          },
          "css": [
              "css",
              "scss"
          ],
          "html": [
              "htm",
              "html",
              "vue"  //< 这条给vue配置
          ]
      }

插件备份（自己研究）

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
{
  // The plugin looks for a .jsbeautifyrc file in the same directory as the
  // source file you're prettifying (or any directory above if it doesn't exist,
  // or in your home folder if everything else fails) and uses those options
  // along the default ones.


  // Details: https://github.com/victorporof/Sublime-HTMLPrettify#using-your-own-jsbeautifyrc-options
  // Documentation: https://github.com/einars/js-beautify/
  "html": {
    "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg","aspx","jsp"],
    "brace_style": "collapse", // [collapse|expand|end-expand|none] Put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line, or attempt to keep them where they are
    "end_with_newline": false, // End output with newline
    "indent_char": "\t", // Indentation character
    "indent_handlebars": false, // e.g. {{#foo}}, {{/foo}}
    "indent_inner_html": false, // Indent <head> and <body> sections
    "indent_scripts": "keep", // [keep|separate|normal]
    "indent_size": 1, // Indentation size
    "max_preserve_newlines": 10, // Maximum number of line breaks to be preserved in one chunk (0 disables)
    "preserve_newlines": true, // Whether existing line breaks before elements should be preserved (only works before elements, not inside tags or for text)
    "unformatted": ["a", "span", "img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6"], // List of tags that should not be reformatted
    "wrap_line_length": 0 // Lines should wrap at next opportunity after this number of characters (0 disables)
  },
  "css": {
    "allowed_file_extensions": ["css", "scss", "sass", "less"],
    "end_with_newline": false, // End output with newline
    "indent_char": "\t", // Indentation character
    "indent_size": 1, // Indentation size
    "newline_between_rules": true, // Add a new line after every css rule
    "selector_separator": " ",
    "selector_separator_newline": false // Separate selectors with newline or not (e.g. "a,\nbr" or "a, br")
  },
  "js": {
    "allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc","csslintrc"],


    // Set brace_style
    //  collapse: (old default) Put braces on the same line as control statements
    //  collapse-preserve-inline: (new default) Same as collapse but better support for ES6 destructuring and other features. https://github.com/victorporof/Sublime-HTMLPrettify/issues/231
    //  expand: Put braces on own line (Allman / ANSI style)
    //  end-expand: Put end braces on own line
    //  none: Keep them where they are
    "brace_style": "collapse",//"collapse-preserve-inline"


    "break_chained_methods": false, // Break chained method calls across subsequent lines
    "e4x": false, // Pass E4X xml literals through untouched
    "end_with_newline": false, // End output with newline
    "indent_char": "\t", // Indentation character
    "indent_level": 0, // Initial indentation level
    "indent_size": 1, // Indentation size
    "indent_with_tabs": true, // Indent with tabs, overrides `indent_size` and `indent_char`
    "jslint_happy": true, // If true, then jslint-stricter mode is enforced
    "keep_array_indentation": false, // Preserve array indentation
    "keep_function_indentation": false, // Preserve function indentation
    "max_preserve_newlines": 0, // Maximum number of line breaks to be preserved in one chunk (0 disables)
    "preserve_newlines": true, // Whether existing line breaks should be preserved
    "space_after_anon_function": false, // Should the space before an anonymous function's parens be added, "function()" vs "function ()"
    "space_before_conditional": true, // Should the space before conditional statement be added, "if(true)" vs "if (true)"
    "space_in_empty_paren": false, // Add padding spaces within empty paren, "f()" vs "f( )"
    "space_in_paren": false, // Add padding spaces within paren, ie. f( a, b )
    "unescape_strings": false, // Should printable characters in strings encoded in \xNN notation be unescaped, "example" vs "\x65\x78\x61\x6d\x70\x6c\x65"
    "wrap_line_length": 0 // Lines should wrap at next opportunity after this number of characters (0 disables)
  }
}