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

コーディングを高速化!Sublime Text 3でよく使うショートカットキーのアイキャッチ画像

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

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) +  2分割

Alt(Command) + Shift(Option) +  3分割

2分割

3分割

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

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

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

Ctrl(Command)+ KB

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

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

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

補足

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

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

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ

  • 作者: 上野正大,杉本淳,前川昌幸,森田壮,こもりまさあき
  • 出版社/メーカー: インプレスジャパン
  • 発売日: 2014/03/20
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (3件) を見る

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

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

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