web-dev-qa-db-ja.com

Sublime Text 3でHTML自動インデント形式を設定する方法は?

Sublime Text 3でHTMLコードを書いているときに質問があります。HTMLの自動インデント形式を設定したいだけです。たとえば、コードの下でpタグを記述すると、インデントはそのように機能します。

<p>
Hello world!
</p>

しかし、上記の代わりにコードの下で書きたいと思います。

<p>
  Hello world!
</p>

また、pタグだけでなく、ul、olなども含まれます。

Sublime Text 3でHTMLの自動インデント形式を設定するにはどうすればよいですか?

43
Originerd

1つのオプションは、[command] + [shift] + [p](またはそれに相当するもの)を入力してから、「インデント」と入力することです。一番上の結果は「Indendtation:Reindent Lines」です。 [Enter]を押すと、ドキュメントがフォーマットされます。

もう1つのオプションは、Emmetプラグイン( http://emmet.io/ )をインストールすることです。これにより、より優れたフォーマットだけでなく、他の無数の素晴らしい機能も提供されます。 Sublime Text 3とEmmetプラグインを使用して探している出力を取得するには、次のものが必要です。

p [tab][enter] Hello world!

「p [tab]」と入力すると、Emmetは次のように展開します。

<p></p>

[enter]を押すと、さらに次のように展開されます。

<p>

</p>

カーソルをインデントし、タグ間の行に配置します。テキストを入力すると次の結果になることを意味します。

<p>
    Hello, world!
</p>
67
jlbnjmn

キーバインドを作成する

キーバインドでSublimeテキスト3に自動インデントするには

設定>キーバインド-ユーザー

そして、角括弧の間にこのコードを追加します

{"keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false}}

設定する shift + alt + f フルページの自動インデントになります。

ソース ここ

注:これが正しく機能しない場合は、インデントをタブに変換する必要があります。また、コード内のコメントは、コードを間違ったインデントレベルにプッシュする可能性があり、手動で移動する必要がある場合があります。

65
Joe Lloyd

これは上記の答えを修正したものですが、より完全でなければなりません。

明確にするために、これは、HTMLファイルがSublime Textで開かれているときに、以前の自動インデント機能を再導入することです。そのため、タグを終了すると、次の要素のために自動的にインデントされます。

Windowsユーザー

C:\Program Files\Sublime Text 3\Packagesに移動しますHTML.sublime-packageをディレクトリへのZipファイルであるかのように抽出します。

Miscellaneous.tmPreferencesを開き、この内容をファイルにコピーします

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.Apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>name</key>
    <string>Miscellaneous</string>
    <key>scope</key>
    <string>text.html</string>
    <key>settings</key>
    <dict>
        <key>decreaseIndentPattern</key>
            <string>(?x)
            ^\s*
            (&lt;/(?!html)
              [A-Za-z0-9]+\b[^&gt;]*&gt;
            |--&gt;
            |&lt;\?(php)?\s+(else(if)?|end(if|for(each)?|while))
            |\}
            )</string>
        <key>batchDecreaseIndentPattern</key>
            <string>(?x)
            ^\s*
            (&lt;/(?!html)
              [A-Za-z0-9]+\b[^&gt;]*&gt;
            |--&gt;
            |&lt;\?(php)?\s+(else(if)?|end(if|for(each)?|while))
            |\}
            )</string>
        <key>increaseIndentPattern</key>
            <string>(?x)
            ^\s*
            &lt;(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^&gt;]*/&gt;)
              ([A-Za-z0-9]+)(?=\s|&gt;)\b[^&gt;]*&gt;(?!.*&lt;/\1&gt;)
            |&lt;!--(?!.*--&gt;)
            |&lt;\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
            |\{[^}"']*$
            </string>
        <key>batchIncreaseIndentPattern</key>
            <string>(?x)
            ^\s*
            &lt;(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^&gt;]*/&gt;)
              ([A-Za-z0-9]+)(?=\s|&gt;)\b[^&gt;]*&gt;(?!.*&lt;/\1&gt;)
            |&lt;!--(?!.*--&gt;)
            |&lt;\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
            |\{[^}"']*$
            </string>
        <key>bracketIndentNextLinePattern</key>
         <string>&lt;!DOCTYPE(?!.*&gt;)</string>
    </dict>
</dict>
</plist>

次に、ファイルをHTML.sublime-packageとして再圧縮し、既存のHTML.sublime-packageを作成したファイルに置き換えます。

Sublime Text 3を閉じて開き、完了です!

7
Jack

これはSublime Text 2の標準機能であったため、これも私を悩ませていましたが、HTMLファイルのSublime Text 3では何らかの形で自動インデントが機能しなくなりました。

私の解決策は、Sublime Text 2(%AppData%/ Roaming/Sublime Text 2/Packages/HTMLにあります)からMiscellaneous.tmPreferencesファイルを見つけ、それらの設定をST3の同じファイルにコピーすることでした。

これで、ST3のパッケージ処理がより難しくなりましたが、幸いなことに、ファイルを%AppData%/ Roaming/Sublime Text 3/Packagesフォルダーに追加するだけで、インストールディレクトリのデフォルト設定が上書きされます。このファイルを「%AppData%/ Roaming/Sublime Text 3/Packages/HTML/Miscellaneous.tmPreferences」として保存するだけで、ST2と同じように自動インデントが再び機能します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.Apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>name</key>
    <string>Miscellaneous</string>
    <key>scope</key>
    <string>text.html</string>
    <key>settings</key>
    <dict>
        <key>decreaseIndentPattern</key>
            <string>(?x)
            ^\s*
            (&lt;/(?!html)
              [A-Za-z0-9]+\b[^&gt;]*&gt;
            |--&gt;
            |&lt;\?(php)?\s+(else(if)?|end(if|for(each)?|while))
            |\}
            )</string>
        <key>batchDecreaseIndentPattern</key>
            <string>(?x)
            ^\s*
            (&lt;/(?!html)
              [A-Za-z0-9]+\b[^&gt;]*&gt;
            |--&gt;
            |&lt;\?(php)?\s+(else(if)?|end(if|for(each)?|while))
            |\}
            )</string>
        <key>increaseIndentPattern</key>
            <string>(?x)
            ^\s*
            &lt;(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^&gt;]*/&gt;)
              ([A-Za-z0-9]+)(?=\s|&gt;)\b[^&gt;]*&gt;(?!.*&lt;/\1&gt;)
            |&lt;!--(?!.*--&gt;)
            |&lt;\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
            |\{[^}"']*$
            </string>
        <key>batchIncreaseIndentPattern</key>
            <string>(?x)
            ^\s*
            &lt;(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^&gt;]*/&gt;)
              ([A-Za-z0-9]+)(?=\s|&gt;)\b[^&gt;]*&gt;(?!.*&lt;/\1&gt;)
            |&lt;!--(?!.*--&gt;)
            |&lt;\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
            |\{[^}"']*$
            </string>
        <key>bracketIndentNextLinePattern</key>
         <string>&lt;!DOCTYPE(?!.*&gt;)</string>
    </dict>
</dict>
</plist>
6