コーディングを高速化！Sublime Text 3でよく使うショートカットキー

今回はSublime Text 3 のおすすめショートカットキーを紹介しようと思います。まだ Sublime Text を使っていない人のために少し紹介もしておきます。すでに使っている人は飛ばしても大丈夫です。

• Sublime Text 3を使ってみよう
• Sublime Text 3 のおすすめショートカット
  • コメントアウト
  • 字下げ
  • 検索
  • 置換
  • 画面の分割
  • サイドバーの表示・非表示
  • 補足

Sublime Text 3を使ってみよう

WEBサイトを作る時、プログラミングのコードを書く時、どのテキストエディタを使っていますか？私はSublime Text 3を使っています。

Sublime Text には便利な機能がたくさんありますが、パッケージ（いわゆるプラグイン）を使えばさらに便利になります（今回はショートカットキーの説明なのでパッケージの詳しい説明は省きます）。

最近HTMLやCSSを始めてみたって人は、ぜひSublime Textを使ってコーディングを高速化してみましょう。

ここからインストールできます。

Sublime Text – Download

一応有料（$70）なんですが、無料で使えるお試し期間が無制限なので、十分使ってみて気に入ったら購入して下さい。

メニューが英語ですが、パッケージを入れれば日本語化することもできます。

Sublime Text 3 の日本語化 – Japanize のインストール – 開発メモ – Webkaru

「IMESupport」と「ConvertToUTF-8」も入れておきましょう。↓↓

[tips][Sublime Text] Sublime Text 3をインストールしたらまずやること

導入時に色々やることがあって面倒くさいですけど、作業が効率化できるので我慢して下さいね。

まだ利用していないって人も、Sublime Text導入するかどうかの参考になると思いますので、時間があれば目を通してみて下さい。

Sublime Text 3 のおすすめショートカット

コピーとかペーストはほとんどの人が知っていると思いますので、ここでは省きます。Sublime Text ならではの便利なショートカットキーを紹介します。ちなみに括弧内はMacのショートカットキーです。私は自宅も会社もWindowsなので、もしかしたらMacの方は間違ってるかも…

コメントアウト

Ctrl（Command) + /

コメントアウトしたい行にカーソルを移動して、上のショートカットを押すと、

はい、じゃじゃーん！

ちなみに、Ctrl（Command）+ Shift （Option）+ / 　で複数行のコメントアウトもできます。

このように選択して、上のショートカットキーを押すと…

これはかなり良く使うから覚えてね！

同じ手順で、コメントアウトの解除もできちゃいます。

字下げ

※Macのショートカットキーは検索しても見つからなかったです…ごめんなさい…

コメント欄にて教えていただきました。ありがとうございます。

Ctrl（Command） + ]

これは便利です。

字下げしたい部分を選択して、先ほどのショートカットキーを押します。

これでインデントが楽になりますね

逆に、字上げもできます。

Ctrl（Command） + [

検索

コードが長くなると、直したいコードがどこにあるか分からなくなることもありますね。そんな時オススメなのが検索機能です。

Ctrl（Command） + F

これを使えば簡単に探したい単語を見つけることができます。お次は置換。

置換

Ctrl（Command + Shift） + H

追記：Macでは Command + Option + F でも置き換えできるようです。

↓↓↓

置換用のボックスが下に表示されるので、対象の単語を簡単に置き換えることができます。これで一つ一つ探して書き換える手間が省けますね。

一か所だけ置き換える（Replace）のか、全部置き換える（Replace All）のかも選べます。

ちなみにこのボックスは検索としても利用できるので、私は検索用のボックスとしても利用しています。

画面の分割

Alt（Command） + Shift（Option） + ２　２分割

Alt（Command） + Shift（Option） + ３　３分割

２分割

３分割

分割してタブを移動させれば、このように複数のファイルを表示させることができます。

WEBのコーディングをしていると、HTMLを見ながらCSSを書いたり、HTML・CSSを見ながらJavaScriptを書いたりすることが多いので分割は頻繁に使います。

サイドバーの表示・非表示

Ctrl（Command）+ K、B

「K」と「B」は同時に押すのではなく、順番に押します。これでサイドバーの表示・非表示が切り替わります。

まだサイドバーを利用していない人は、上のツールバーの「表示」→「サイドバー」→「Open Files表示/非表示」を選択するとサイドバーが現れます。一度表示にしておけば、その後はショートカットーキーで切り替えられます。

ここによく利用するフォルダをドロップして放り込んでおけば、ファイルを探すのが楽になります。

補足

Emmetというパッケージを使えば、さらにショートカットが楽になるので、併せて利用してみて下さい。私はまだEmmetを使いこなせてないので、マスターしたら今後紹介しようと思います。

Sublime Text 専用の書籍も出ているので、読んでみるのも良いかもしれません。

他にもこんな記事書いてます。

全くの未経験が独学でWEBデザイナーに転職するまで | SHIROMAG

CSSではてなブログをカスタマイズしてみよう | SHIROMAG