Sublime Text 3でHTMLコードを書いているときに質問があります。HTMLの自動インデント形式を設定したいだけです。たとえば、コードの下でpタグを記述すると、インデントはそのように機能します。
<p>
Hello world!
</p>
しかし、上記の代わりにコードの下で書きたいと思います。
<p>
Hello world!
</p>
また、pタグだけでなく、ul、olなども含まれます。
Sublime Text 3でHTMLの自動インデント形式を設定するにはどうすればよいですか?
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>
キーバインドでSublimeテキスト3に自動インデントするには
設定>キーバインド-ユーザー
そして、角括弧の間にこのコードを追加します
{"keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false}}
設定する shift + alt + f フルページの自動インデントになります。
ソース ここ
注:これが正しく機能しない場合は、インデントをタブに変換する必要があります。また、コード内のコメントは、コードを間違ったインデントレベルにプッシュする可能性があり、手動で移動する必要がある場合があります。
これは上記の答えを修正したものですが、より完全でなければなりません。
明確にするために、これは、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*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>batchDecreaseIndentPattern</key>
<string>(?x)
^\s*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>increaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>batchIncreaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>bracketIndentNextLinePattern</key>
<string><!DOCTYPE(?!.*>)</string>
</dict>
</dict>
</plist>
次に、ファイルをHTML.sublime-package
として再圧縮し、既存のHTML.sublime-package
を作成したファイルに置き換えます。
Sublime Text 3を閉じて開き、完了です!
これは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*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>batchDecreaseIndentPattern</key>
<string>(?x)
^\s*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>increaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>batchIncreaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>bracketIndentNextLinePattern</key>
<string><!DOCTYPE(?!.*>)</string>
</dict>
</dict>
</plist>