CodaとZen-Codingのショートカットまとめ。極めると早い。

by codechord. 1 Comment

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

コーディング時のエディタは何をつかっていますか?最近Vimでのコーディングが気になりだしています。

Vimをプラグインなどでカスタマイズしまくると、かゆいところに手が届くすばらしいエディタになるとのことで。でも覚えるのが大変。。。

コーディングを早くするコツ。

なぜ、Vimが優れているかといわれると。数少ないキータッチのコマンドで、あっと驚くようなことができてしまうということ。ですよね?

つまり、Vimに限らず、エディタの便利なコマンドを頭に叩き込めば、早くコーディングできるという逆転の発想です。

コーディングにかぎらず、PCのアプリケーションを使う作業は、ショートカットを覚えた数が、作業のスピードに比例すると自分は思っています。

ということで、CodaとZen-Codingのショートカットを極めたら、コーディングが結構早くなるんじゃないかなと思いました。

Coda+Zen-codingで出来る事。

ここでは、Zen-codingの醍醐味である、”「table>tr>td」でエキスパンドするとテーブルタグができるよ。”というような事は一切紹介しません。

選択した箇所を<strong>で囲いたい。とか、◯行目にジャンプしたいとか、そういうどちらかと言えば、オマケ的な機能です。

  • まずZen-codingが使えないと意味がないので、Zen-codingが使えるようにTea for Codaプラグインを追加してください。

さて本題です。前置きがながくなりましたが、以下が私が利用する、ショートカットの一覧です。
説明がヘタですがご了承ください。(個人的な使用頻度も五段階表示で付けました。)
(⌘:[Cmd]キーです)

入力・編集系

頻度 キー 説明
⌘ + [ インデントを減らす
⌘ + ] インデントを追加
★★★★★ [Ctrl] + [Return] <br />を入力
★★★ [Ctrl] + [Alt] + B 選択範囲を<storng></storng>で囲う
[Ctrl] + [Alt] + I(アイ) 選択範囲を<em></em>で囲う
★★★★★ [Ctrl] + [Shift] + W 選択範囲を任意のタグで囲う(タグ入力画面が表示)
★★★★★ [Ctrl] + [Shift] + L 選択範囲をAタグで囲う。
(あらかじめURLをクリップボードに入れておくと便利!。
クリップボードに日本語を入れてるとバグる(?))
[Ctrl] + [Shift] + A 選択中の要素に任意の親タグを追加(タグ入力画面が表示)
★★★ ⌘ + [Shift] + K カーソル上のタグを除去
★★★ ⌘ + [Alt] + .(ピリオド) 終了タグの入力
★★★ ⌘ + ¥ 選択範囲をコメントタグで囲う
⌘ + / 選択範囲をコメントタグで囲う
⌘ + [Shift] + J タグを分解or連結<br />⇔<br></br>

カーソル系

頻度 キー 説明
★★★★ ⌘ + [Shift] + B 選択中の行(複数行)をブロック編集モードへ
(Altキーを押しながら、マウスクリックした時と同じ事)
★★★★ [Ctrl] + W カーソルのワードを選択
★★★★★ [Ctrl] + B カーソルの親タグを選択
[Ctrl] + L カーソルの行を選択
★★★★★ [Ctrl] + [Alt] + → 次の入力場所へジャンプ
★★★★★ [Ctrl] + [Alt] + ← 前の入力場所へジャンプ
★★★★★ [Ctrl] + ⌘ + → 次の要素を選択
★★★★★ [Ctrl] + ⌘ + ← 前の要素を選択
★★★★ ⌘ + D 次の見出しへジャンプ
★★★★ ⌘ + [Shift] + D 前の見出しへジャンプ
★★★★ ⌘ + [Shift] + L 指定の行へ移動

閲覧系

頻度 キー 説明
★★★★★ ⌘ + [Ctrl] + C クリップ(スニペット)ウィンドウの表示
★★★ ⌘ + [Shift] + ] 次のタブ(ファイル)へ
★★★ ⌘ + [Shift] + [ 前のタブ(ファイル)へ
★★★ ⌘ + [Alt] + I(アイ) 不可視文字の表示切替
⌘ + [Alt] + L 行番号の表示切替

(これらの表は随時更新していきます。)

(10行下へカーソル移動。とかができればいいな。できるのかな?)

複雑なキータッチになるため、指がツリそうになりますが、頭のシワも増えるはずw
ガンガン、ショートカット覚えちゃいましょう。


CodaとZen-Codingのショートカットまとめ。極めると早い。 への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>