インストール

npmかyarnでインストールします

1
2
3
4
5
// npmの場合
npm -g install js-beautify

// yarnの場合
yarn global add js-beautify

使い方

この時点で、3つコマンドが通るようになってます。オプションなしでは標準出力に出力されます

1
2
3
4
5
6
7
8
9
10
11
// jsの場合
$ js-beautify [ファイル]

// cssの場合
$ css-beautify [ファイル]

// htmlの場合
$ html-beautify [ファイル]

// ファイルを直接置き換える(-r)
$ js-beautify -r [ファイル]

オプションなど

基本的には--helpして出てくるBeautifier Optionsあたりを頑張って翻訳すればなんとかなるんですが、こちらにあるとおり、外部のJSONファイルとしてBeautifier Optionsをまとめておくほうがポピュラーな使い方だと思います

ここでは、~/.jsbeautifyrcとして、js-beautify(css,htmlも同様)実行時に勝手に読み込んでもらうようにします。.jsbeautifyrcのサンプルはこちらから拝借しました

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
$ cat ~/.jsbeautifyrc
{
  "html": {
    "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "dust"],
    "brace_style": "collapse",
    "end_with_newline": true,
    "indent_char": " ",
    "indent_handlebars": true,
    "indent_inner_html": false,
    "indent_scripts": "keep",
    "indent_size": 2,
    "max_preserve_newlines": 0,
    "preserve_newlines": true,
    "unformatted": ["a", "span", "img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6"],
    "wrap_line_length": 0
  },
  "css": {
    "indent_char": " ",
    "indent_size": 2,
    "indent_with_tabs": false,
    "allowed_file_extensions": ["css", "scss", "sass", "less"],
    "end_with_newline": false,
    "newline_between_rules": true,
    "selector_separator_newline": false,
    "selector_separator": " "
  },
  "js": {
    "indent_size": 2,
    "indent_char": " ",
    "indent_level": 0,
    "indent_with_tabs": false,
    "preserve_newlines": true,
    "space_in_paren": false,
    "space_after_anon_function": false,
    "brace_style": "collapse",
    "break_chained_methods": false,
    "keep_array_indentation": false,
    "keep_function_indentation": true,
    "space_before_conditional": true,
    "unescape_strings": false,
    "wrap_line_length": 0,
    "end_with_newline": false,
    "comma_first": false
  }
}