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

スポンサードリンク

f:id:shiromatakumi:20160131021903p:plain

今回は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) + /

f:id:shiromatakumi:20160131001359p:plain

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

 

f:id:shiromatakumi:20160131001333p:plain

はい、じゃじゃーん!

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

f:id:shiromatakumi:20160131001337p:plain

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

f:id:shiromatakumi:20160131001332p:plain

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

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

 

字下げ

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

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

Ctrl(Command) + ]

これは便利です。

f:id:shiromatakumi:20160131014720p:plain

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

 

f:id:shiromatakumi:20160131014955p:plain

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

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

Ctrl(Command) + [

 

検索

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

Ctrl(Command) + F

f:id:shiromatakumi:20160131015347p:plain

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

 

置換

Ctrl(Command + Shift) + H

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

f:id:shiromatakumi:20160131015606p:plain

↓↓↓

f:id:shiromatakumi:20160131015625p:plain

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

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

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

 

画面の分割

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

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

2分割

f:id:shiromatakumi:20160131020635p:plain

3分割

f:id:shiromatakumi:20160131021157p:plain

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

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

 

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

Ctrl(Command)+ KB

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

f:id:shiromatakumi:20160131021347p:plain

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

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

補足

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

 

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

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

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

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

 

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