Sublime Text 2を使用してHTMLコードを再フォーマットするにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/8839753

質問

フォーマットされていない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/css/js prettify, 、 それは実際に動作します。

インストール後、コードを選択して押します Ctrl+Shift+H。.

終わり!

ただの一般的なヒント。 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というプラグインがあります。

https://github.com/welovewordpress/sublimehtmltidy

私にとって、 HTML Prettify 解決策は非常にシンプルでした。私はに行きました HTML PRETTIFYページ.

  1. 必要でした Sublime Package Manager
  2. パッケージマネージャーをインストールするための指示に従いました ここ
  3. タイプしました CMD + Shift + p メニューを表示します
  4. タイプしました prettify
  5. 選択しました HTML prettify メニューの選択

ブーム。終わり。素晴らしく見える

に行くだけです

編集 - >タグ - >ドキュメントの自動フォーマットタグ

呼ばれるパッケージを作成しました htmlbeautify それはHTMLを再フォーマットするというまともな仕事をします。私は1997年に見つけたPerlスクリプトに基づいていました。私はそれを更新し、すべての新しいFangled Modernタグで動作しました。 :)

それをチェックして、あなたの考えを教えてください!

https://github.com/rareyman/htmlbeautify

私はまだコメントする特権を持っていないので、これは単に @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プラグイン, 、それはすべて、それがすべてシングルラインであっても、汚いコードを美化することができます。

これがあなたが探しているものだと思います:

https://github.com/victorporof/sublime-htmlprettify

私は使用しています 几帳面 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 } }

詳細を参照してください ここ.

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top