JS/CSS Formatter

ポイント

JS/CSSフォーマッタはPrettierのような言語パーサではなく、中括弧が開いて閉じる深さだけ数えて2スペースインデントを入れる基本整理器です。セミコロンに会うと行を変え、閉じ中括弧は1段階外側に合わせます。JavaScriptとスタイルシートモードは画面で分かれますがインデント規則は同じです。圧縮された1行ソースを人が読みやすく広げるときにJS/CSSフォーマッタが役立ちます。空行はなるべく減らし、内容がある行だけ深さに合わせて付け直すので、固まった下書きを広げてレビューするのに向きます。

文字列やテンプレートリテラルの中の中括弧まで構造と誤認することがあるので、複雑な文法は専用フォーマッタ結果の方が安定です。このJS/CSSフォーマッタはASTを作らないのでimport並べ替え、引用符統一、末尾カンマ規則は適用しません。ブラウザ内だけで動き、ソースをアップロードしません。圧縮ツールで短くしたスニペットを再び広げてレビューする補助段階として使うのが最も合います。整形結果は読み取り専用欄にだけ埋まるので、原文はそのまま置いて並べて比べられます。

例

ソースに .box{color:red;margin:0} を入れてCSSモードで整形すると、開き中括弧の次の行に宣言が2スペース入り、閉じ中括弧が元の深さに合います。JavaScriptモードで function a(){return 1;} を入れても同じ方式で中括弧の中が1段階入ります。結果コピーで整理されたコードをすぐ取れます。

関連: JS/CSS圧縮 · HTMLフォーマッタ · SQLフォーマッタ