HTMLテンプレート編集にweb-modeを使ってみる

web-modeはWebテンプレートを編集するためのメジャーモードです。web-modeのいいところは、他のメジャーモードではインデントが崩れてしまうテンプレートも正しくインデントしてくれるところです。JavaScriptやPHPのコードが埋め込まれたHTMLファイルもきれいにインデントしてくれます。対応しているテンプレートについては本家サイトに記載がありますのでそちらを参照してください。

目次

キーバインディング

一般

M-;

行のコメント化/コメント解除

C-c C-f

タグ/ブロックを折り畳む/展開する

C-c C-i

バッファ全体のインデントを実行する

C-c C-m

リージョンを拡張する

C-c C-s

スニペットを挿入する

C-c C-w

無効なホワイトスペースの表示/非表示を切り替える

HTMLタグ

C-c C-t a

属性をソートする

C-c C-t b

タグの先頭へ移動する

C-c C-t e

タグの末尾へ移動する

C-c C-t m

マッチする開始/終了タグへ移動する

C-c C-t n

次のタグへ移動する

C-c C-t p

前のタグへ移動する

C-c C-t s

タグを選択する

HTML要素

C-c C-e /

要素をクローズする

C-c C-e a

要素の内容を選択する

C-c C-e b

要素の先頭に移動する

C-c C-e c

要素のコピーを作成する

C-c C-e d

子要素へ移動する

C-c C-e e

要素の末尾へ移動する

C-c C-e f

子要素の折り畳む/拡げる

C-c C-e i

要素を挿入する

C-c C-e k

要素をキルする

C-c C-e m

子要素間のブランクをミュートする

C-c C-e n

次の要素へ移動する

C-c C-e p

前の要素へ移動する

C-c C-e r

要素をリネームする

C-c C-e s

要素を選択する

C-c C-e t

要素を入れ替える

C-c C-e u

親要素へ移動する

C-c C-e v

要素のタグを削除する(タグの上でコマンドを実行)

C-c C-e w

要素を囲むタグを挿入する

HTML属性

C-c C-a b

属性の開始へ移動する

C-c C-a e

属性の終わりに移動する

C-c C-a i

属性を挿入する

C-c C-a k

属性をキルする

C-c C-a n

次の属性へ移動する

C-c C-a p

前の属性へ移動する

C-c C-a s

属性を選択する

C-c C-a t

属性を置換する

ブロック

C-c C-b b

ブロックの先頭へ移動する

C-c C-b c<

ブロックをクローズする

C-c C-b e

ブロックの終わりに移動する

C-c C-b k

ブロックをキルする

C-c C-b n

次のブロックへ移動する

C-c C-b p

前のブロックへ移動する

C-c C-b s

ブロックを選択する

DOM

C-c C-d a

アポストロフィを置き換える?<

C-c C-d d

タグの不釣り合いを表示する

C-c C-d e

HTML実体に置き換える

C-c C-d n

ノーマライズする

C-c C-d q

dumb quotesを置き換える

C-c C-d t

ドムツリーをトラバースする

C-c C-d x

xpath

よかったらシェアしてね!
  • URLをコピーしました!
目次