Sublime Text 3 ：HTML-CSS-JS Prettify でJSONを展開する設定
HTML-CSS-JS Prettify でJSONを展開する設定
とても便利なのですが、デフォルト設定では、一行JSONを展開してくださいません。
設定を変更すると展開してくださいます。
設定で解決
Preference > Package Setting > HTML/CSS/JS Prettify > Set Prettiry Preference
jsのbrace_styleのデフォルト設定がcollapse-preserve-inlineとなっておりますのでcollapseに変更します。
{
・・・
"js": {
・・・
//"brace_style": "collapse-preserve-inline",
"brace_style": "collapse",
・・・
}
}
補足：collapse-preserve-inline
説明にも書いてありますが、ES6の分割代入構文等が展開されてしまう問題に対応したものみたいです。
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
- collapse
var o = {
p: 42,
q: true
};
var {
p,
q
} = o;
console.log(p); // 42
console.log(q); // true
たしかにこれだと読みづらくなってしまいますね。
- 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を展開してくれるので、デフォルト値大好きな僕としてはこのハックが好きです。
{ "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"] } }
このままだと展開されないので、適当に改行を入れます。
{ "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します。
{
"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"]
}
}
まあ、これで実用的には問題無いですね。
Author And Source
この問題について(Sublime Text 3 ：HTML-CSS-JS Prettify でJSONを展開する設定), 我々は、より多くの情報をここで見つけました https://qiita.com/ysti/items/98ec7d2cba91ff1053e3著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .