読者です 読者をやめる 読者になる 読者になる

サラリーマンIT技術者の調査レポート

日々の業務で気付いた当たり障りのない技術的なあれこれを綴ります。

jsFiddleのTidyUpでインデントが崩れる問題と対応方法

jsFiddleJavaScriptで特定のパターンを入力するとインデントが崩れます(2014/02/25現在)。 が、自然な感じで上手くインデントを揃える方法を発見しましたので共有しようと思います(たいした話ではありませんが)。

背景

jsFiddleのメニューに「TidyUp」というのがあります。

これはいわゆるソースコードフォーマッターというもので、ソースコードを自動的に綺麗な感じに整形する機能なのですが、JavaScriptでときどきインデントが崩れてしまうことがあります。

そこで、インデントが崩れる条件と、その対応方法を調査してみました。

問題

JavaScriptでは、オブジェクト初期化子(オブジェクトリテラル)のプロパティ名を識別子・文字列リテラル・数値リテラルで指定することができます

オブジェクトリテラルのプロパティの2つ目以降で、文字列リテラルを使ってプロパティ名を指定した場合に、インデントが1段余計についてしまいます。

f:id:k_aruga:20140225162132p:plain

インデントが崩れるサンプル

対応方法

(インデントが崩れたプロパティの)直前のプロパティの最後にコメントを付けるとインデントが正常になります。

具体的には以下のようになります。

プロパティ名に文字列リテラルを使ったオブジェクト初期化子

Gistだと崩れていませんが(というかインデントは自分で設定できるので)、jsFiddleで実際にインデントが崩れているのはこちらで確認できます。インデントが崩れるサンプル

最後に

ひょっとすると既にjsFiddleが直っているかもしれません。あしからず。