AtomエディタでJSONオブジェクトを見易くしてくれるプラグイン「json-level-color」の紹介です。

今やJSONフォーマットは、
言語を問わず データオブジェクトの1つとして広く使われており、様々なプロジェクトで目にすることがあります。

PHPであればcomposerの" composer.json "、node.jsであればnpmの" package.json "、その他、bowerのパッケージを管理するのにもJSONファイル使われています。

JSONは定義ファイルとして使うのにも便利ですが、階層が深いと可視性が悪くなります。

テキストエディタのシンタックスハイライトでも型単位( Integer, boolean, string) や " key -> value " 単位で色分けしてくれるのもありますが、
Atomエディタで、JSONファイルを更に見易くしてくれるプラグインが「json-level-color」です。

" json-level-color "はkey->valueだけでなく、オブジェクトの階層単位で色分けしてくれます。

json-level-color


json-level-colorのインストール 〜 使い方 

" json-level-color "のインストールは メニュー内のSettingのinstallから'  json-level-color 'と入力して検索するか、コンソール上からインストールする場合はapmコマンドを使います。

# apmコマンドでインストール
apm install json-level-color


json-level-colorの使い方は説明が必要ないぐらい簡単で、プラグインをインストールすると下記のように自動的に階層単位で色分けしてくれます。

* json-level-colorを自身の環境に導入し、Before -> Afterを比べてみました ( PHPのfast-routeのcomposerファイル )

また、plugin setting -> json-level-colorの'Colors'セッティングからハイライトされる色の変更。( cssのhexコードで変更 )
'Maximum Depth'から何階層まで色分けするのか設定が可能です。( デフォルトでは10階層まで )

Setting -> json-level-color

 

Summary

JSONファイルを直接編集する機会はそこまで多くありませんが、
確認の為に目を通す機会は沢山あるので、かなり便利に使えるプラグインだと思います。

気になった人は是非チェックしてみてください!

Atom Packages : json-level-color

 

この記事のカテゴリ

プログラミング

この記事のタグ

ATOMエディタ , 開発ツール , javascript

Socialシェアボタン

スポンサーリンク