Sublime Text 2を使用してHTMLコードを再フォーマットするにはどうすればよいですか?
-
27-10-2019 - |
質問
フォーマットされていないHTMLコードがあり、再フォーマットしたいと思います。 Sublime Text 2でHTMLコードを自動的に再フォーマットするコマンドはありますか?
解決
これを行うにはプラグインは必要ありません。すべての行を選択するだけです(Ctrl a)そして、メニューから[編集]→[行]→[Reindent]を選択します。これは、htmlを含む拡張機能でファイルが保存されている場合に機能します .html
また .php
.
これを頻繁に行うと、このキーマッピングが役立つと思われる場合があります。
{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }
ファイルが保存されていない場合(たとえば、スニペットで新しいウィンドウに貼り付けただけです)、メニュービュー→構文→を選択して、インデントの言語を手動で設定できます→ language of choice
Reindentオプションを選択する前に。
他のヒント
崇高なHTMLをフォーマットする方法は半ダースほどあります。最も人気のあるプラグインのそれぞれをテストしました(を参照してください 私は自分のブログでやった記事 詳細については)が、最も人気のあるオプションのいくつかの簡単な概要を次に示します。
Reinkentコマンド
長所:
- 崇高な船舶があるため、プラグインをインストールする必要はありません
短所:
- 余分な空白行を削除しません
- マイニフィングされたHTML、複数のオープンタグ付きの行を処理できません
- 適切にフォーマットしません
<script>
ブロック
鬼ごっこ
長所:
- ST2/ST3をサポートします
- 余分な空白線を削除します
- バイナリ依存関係はありません
短所:
- PHPタグでチョーク
- 処理しません
<script>
正しくブロックします
htmltidy
長所:
- PHPタグを処理します
- フォーマットを調整するためのいくつかの設定
短所:
- PHPが必要です(ウェブサービスに戻る)
- ST2のみ
- 放棄された?
htmlbeautify
長所:
- ST2/ST3をサポートします
- シンプルでビナライの依存関係はありません
- OS X、Win、Linuxのサポート
短所:
- インラインコメントで少し窒息します
- 最小化/圧縮コードを展開します
HTML-CSS-JS PRETTIFY
長所:
- ST2/ST3をサポートします
- HTML、CSS、JSを処理します
- Sublimeのメニューとの素晴らしい統合
- 高度にカスタマイズ可能
- プロジェクトごとの設定
- 保存]オプションのフォーマット
短所:
- node.jsが必要です
- 埋め込まれたPHPには良くありません
どちらが一番いいですか?
HTML-CSS-JS Prettifyは私の本の勝者です。多くの素晴らしい機能、文句を言うことはあまりありません。
私が見つけることができた唯一のパッケージはです 鬼ごっこ.
パッケージコントロールを使用してインストールできます。 https://sublime.wbond.net
パッケージ制御をインストールした後。パッケージコントロールに移動します(環境設定 -> パッケージ制御)次に入力します install
, 、 打つ 入力. 。次に、入力します tag
そしてヒット 入力.
タグをインストールした後、テキストを強調表示し、ショートカットを押します Ctrl+alt+f.
ただの一般的なヒント。 HTMLをAuto-Tidyにして、パッケージhtml_tidyをインストールしてから、次のキーバインディングをデフォルトの設定(私が使用する)に追加することでした。
{ "keys": ["enter"], "command": "html_tidy" },
これにより、ENTERごとにHTML Tidyが実行されます。これには欠点があるかもしれませんが、私は自分自身を崇高にするのは非常に新しいですが、それは私が望むことをしているようです:)
質問はhtmlのためです、私はさらに、方法についての情報を提供したいと思います 崇高なテキスト2のJavaScriptコード2を自動形成します;
すべてのコードを選択できます(Ctrl + a)そして、アプリ内機能、reindent(Edit
-> Line
-> Reindent
)またはJSFormatフォーマットプラグインを使用できます Sublime Text 2
Sublime Textのデフォルトのタブ/インデント設定に追加するためにコードをフォーマットする方法について、よりカスタマイズ可能な設定が必要な場合。
https://github.com/jdc0589/jsformat
簡単にインストールできます jsformat パッケージコントロールを使用して(Preferences
-> Package Control
)その後、パッケージ制御を開きます インストール、ヒットします 入力. 。次に、入力します js format
そしてヒット 入力, 、あなたは終わった。 (パッケージコントローラーには、の成功とエラーがあるインストールのステータスが表示されます。 Sublime
)
キーバインディングに次の行を追加します(Preferences
-> Key Bindings User
)
{ "keys": ["ctrl+alt+2"], "command": "js_format"}
私は使用しています Ctrl + alt + 2, 、このショートカットキーを何でも変更できます。ここのところ、 JsFormat
良いプラグインです。試してみる価値があります!
これが誰かを助けることを願っています。
Sublimehtmltidyというプラグインがあります。
私にとって、 HTML Prettify
解決策は非常にシンプルでした。私はに行きました HTML PRETTIFYページ.
- 必要でした
Sublime Package Manager
- パッケージマネージャーをインストールするための指示に従いました ここ
- タイプしました CMD + Shift + p メニューを表示します
- タイプしました
prettify
- 選択しました
HTML prettify
メニューの選択
ブーム。終わり。素晴らしく見える
に行くだけです
編集 - >タグ - >ドキュメントの自動フォーマットタグ
呼ばれるパッケージを作成しました htmlbeautify それはHTMLを再フォーマットするというまともな仕事をします。私は1997年に見つけたPerlスクリプトに基づいていました。私はそれを更新し、すべての新しいFangled Modernタグで動作しました。 :)
それをチェックして、あなたの考えを教えてください!
私はまだコメントする特権を持っていないので、これは単に @peter'sに関連する追加情報です 答え 上の答え。
IEの場合、HTMLが予想どおりに整列していないことがわかりました 条件付きコメント ヘッダーには、左にフラッシュされた例:完全にインラインではありませんでした。
<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
素敵なオープンソースがあります Codeformatterプラグイン, 、それはすべて、それがすべてシングルラインであっても、汚いコードを美化することができます。
これがあなたが探しているものだと思います:
私は使用しています 几帳面 HTMLを軽化するためのカスタムビルドシステムとともに。
パッケージ/ユーザー/ディレクトリにhtmltidy.sublime-buildがあります。
{
"cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}
および同じディレクトリ内のtidy_config.cfgファイル:
indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0
構築システム]を選択して[押します]を押します Ctrl+b また CMD+b ファイルコンテンツを再フォーマットします。それに関する小さな問題の1つは、ST2がファイルを自動的にリロードしていないため、他のファイルとバック(または他のアプリケーションとバック)に切り替える必要がある結果を確認することです。
MacでMacPortsを使用してTidyをインストールしました。Windowsで自分でダウンロードし、Build Systemのワーキングディレクトリを指定する必要があります。
"working_dir": "c:\\HTMLTidy\\"
または、パスに追加します。
ショートカットキーを設定できます F12 簡単!!!
{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }
詳細を参照してください ここ.