HTML-CSS-JS Prettify でJSONを展開する設定

HTML-CSS-JS Prettify

とても便利なのですが、デフォルト設定では、一行JSONを展開してくださいません。
設定を変更すると展開してくださいます。

設定で解決

Preference > Package Setting > HTML/CSS/JS Prettify > Set Prettiry Preference

jsのbrace_styleのデフォルト設定がcollapse-preserve-inlineとなっておりますのでcollapseに変更します。

.jsbeautifyrc

{

   ・・・

  "js": {

       ・・・

    //"brace_style": "collapse-preserve-inline",
    "brace_style": "collapse",

       ・・・

  }
}

補足：collapse-preserve-inline

説明にも書いてありますが、ES6の分割代入構文等が展開されてしまう問題に対応したものみたいです。

before

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

collapse

after_collapse

var o = {
    p: 42,
    q: true
};
var {
    p,
    q
} = o;

console.log(p); // 42
console.log(q); // true

たしかにこれだと読みづらくなってしまいますね。

collapse-preserve-inline

after_collapse-preserve-inline

var o = { p: 42, q: true };
var { p, q } = o;

console.log(p); // 42
console.log(q); // true

これを踏まえると、collapse-preserve-inlineも捨てがたいですね。

現在JSの設定しかないですが、JSONの場合の設定を分けて設定できると嬉しいんですが。。。。

ハックで回避

ということで、ちょっと試行錯誤したところ、適当な階層で改行を入れてあげると、collapse-preserve-inline設定でもJSONを展開してくれるので、デフォルト値大好きな僕としてはこのハックが好きです。

onelined

{ "year": 2013, "title": "Turn It Down, Or Else!", "info": { "directors": ["Alice Smith", "Bob Jones"], "release_date": "2013-01-18T00:00:00Z", "rating": 6.2, "genres": ["Comedy", "Drama"], "image_url": "http://ia.media-imdb.com/images/N/O9ERWAU7FS797AJ7LU8HN09AMUP908RLlo5JF90EWR7LJKQ7@@._V1_SX400_.jpg", "plot": "A rock band plays their music at high volumes, annoying the neighbors.", "rank": 11, "running_time_secs": 5215, "actors": ["David Matthewman", "Ann Thomas", "Jonathan G. Neff"] } }

このままだと展開されないので、適当に改行を入れます。

separated-line

{ "year": 2013, "title": "Turn It Down, Or Else!", "info": { "directors": ["Alice Smith", "Bob Jones"], 
"release_date": "2013-01-18T00:00:00Z", "rating": 6.2, "genres": ["Comedy", "Drama"], "image_url": "http://ia.media-imdb.com/images/N/O9ERWAU7FS797AJ7LU8HN09AMUP908RLlo5JF90EWR7LJKQ7@@._V1_SX400_.jpg", "plot": "A rock band plays their music at high volumes, annoying the neighbors.", "rank": 11, "running_time_secs": 5215, "actors": ["David Matthewman", "Ann Thomas", "Jonathan G. Neff"] } }

Ctrl + Shift + Fでprettifyします。

after

{
    "year": 2013,
    "title": "Turn It Down, Or Else!",
    "info": {
        "directors": ["Alice Smith", "Bob Jones"],
        "release_date": "2013-01-18T00:00:00Z",
        "rating": 6.2,
        "genres": ["Comedy", "Drama"],
        "image_url": "http://ia.media-imdb.com/images/N/O9ERWAU7FS797AJ7LU8HN09AMUP908RLlo5JF90EWR7LJKQ7@@._V1_SX400_.jpg",
        "plot": "A rock band plays their music at high volumes, annoying the neighbors.",
        "rank": 11,
        "running_time_secs": 5215,
        "actors": ["David Matthewman", "Ann Thomas", "Jonathan G. Neff"]
    }
}

まあ、これで実用的には問題無いですね。