前回まではスニペット登録の記事を書いてきましたが、スニペット使用する際の下記のショートカット以外にもよく使うショートカットを紹介したいと思います。
Windows: Ctrl + Space
Mac: Cmd + Spaceそこで今回は、Vscodeを使い始めた頃に覚えておくと作業が一気に楽になるショートカットを10個選びました。Webの制作・開発でよく使うものに絞っています。
まずは一覧
| # | やりたいこと | Windows | Mac |
|---|---|---|---|
| ① | ファイルを名前で開く | Ctrl + P | Cmd + P |
| ② | コマンドパレットを開く | Ctrl + Shift + P | Cmd + Shift + P |
| ③ | プロジェクト全体を検索 | Ctrl + Shift + F | Cmd + Shift + F |
| ④ | コメントアウトの切り替え | Ctrl + / | Cmd + / |
| ⑤ | 行を上下に移動 | Alt + ↑ / ↓ | Option + ↑ / ↓ |
| ⑥ | 行を複製 | Shift + Alt + ↓ | Shift + Option + ↓ |
| ⑦ | 同じ文字を順に選択 | Ctrl + D | Cmd + D |
| ⑧ | 行を削除 | Ctrl + Shift + K | Cmd + Shift + K |
| ⑨ | コードを整形 | Shift + Alt + F | Shift + Option + F |
| ⑩ | サイドバーの表示切り替え | Ctrl + B | Cmd + B |
| ⑪ | ファイルを新しいウィンドウで開く | Ctrl + K → O | Cmd + K → O |
探す・開く
① ファイルを名前で開く
Windows: Ctrl + P
Mac: Cmd + Pファイル名の一部を入力すると候補が出るので、Enter で開けます。サイドバーのフォルダを何階層もたどる必要がなくなります。WordPressのテーマのようにファイルが多いプロジェクトほど効果的です。
入力欄で : に続けて数字を入れると、そのファイルの指定した行へ移動できます。
② コマンドパレットを開く
Windows: Ctrl + Shift + P
Mac: Cmd + Shift + PVscodeのほぼすべての機能を、名前で呼び出せる入口です。前回までの記事でも使いました。メニューのどこにあるかわからない機能も、ここで検索すれば見つかります。
③ プロジェクト全体を検索する
Windows: Ctrl + Shift + F
Mac: Cmd + Shift + F開いているフォルダ内のすべてのファイルを、まとめて検索します。「このクラス名はどこで使っているのか」「この関数はどこで呼ばれているのか」を調べるときに便利です。
コードを書く・直す
④ コメントアウトを切り替える
Windows: Ctrl + /
Mac: Cmd + /カーソルがある行を、コメントアウトしたり元に戻したりします。複数行を選択してから押せば、まとめて切り替えられます。HTMLなら <!-- -->、CSSなら /* */、PHPなら // と、言語に合わせた形式になります。
⑤ 行を上下に移動する
Windows: Alt + ↑ / ↓
Mac: Option + ↑ / ↓カットして貼り付ける手間なしで、行を入れ替えられます。複数行を選択した状態でも使えます。
⑥ 行を複製する
Windows: Shift + Alt + ↓
Mac: Shift + Option + ↓いまの行（選択範囲）を、すぐ下にコピーします。↑ を使うと上にコピーされます。似た書き方の行を並べたいときに、コピー＆ペーストより早く済みます。
⑦ 同じ文字を順に選択する
Windows: Ctrl + D
Mac: Cmd + D単語にカーソルを置いて押すと、その単語が選択されます。続けて押すと、同じ単語が次々と選択され、複数のカーソルで同時に書き換えられます。クラス名や変数名を、ファイル内でまとめて直したいときに便利です。
ファイル内の同じ単語を一度にすべて選択したい場合は、Ctrl + Shift + L（Macは Cmd + Shift + L）です。
⑧ 行を削除する
Windows: Ctrl + Shift + K
Mac: Cmd + Shift + Kカーソルがある行を、行ごと削除します。行を選択してから Delete を押す手間が省けます。
⑨ コードを整形する
Windows: Shift + Alt + F
Mac: Shift + Option + Fインデントのずれを、まとめて整えてくれます。HTML・CSS・JavaScriptなどは標準で整形できます。初めて使うときや、言語によっては整形用の拡張機能を選ぶ画面が出ることがあります。
ただし整形後にコードの一番下に移動してしまうのがやや難点です。
画面を整える
⑩ サイドバーを表示・非表示にする
Windows: Ctrl + B
Mac: Cmd + B左側のサイドバーを、ワンキーで出し入れします。ノートPCなど画面が狭いときに、コードを広く見たい場面で役立ちます。
このショートカットはおすすめです。分割ビューでもそれぞれのエディタ画面を広く使用することができます。
⑪ ファイルを新しいウィンドウで開く
Windows: Ctrl + K → O
Mac: Cmd + K → Oいま開いているファイルを、新しいVscodeのウィンドウで別に開きます。2つのファイルを2画面に並べて見比べたいときや、別のモニターに表示したいときに便利です。
まとめ
マウスで操作していた作業の多くが、キーボードだけで済むようになります。最初は一覧表を見ながらで構いません。毎日使うものから1つずつ手になじませていくのがおすすめです。
スニペットの呼び出し（Ctrl + Space）と組み合わせれば、Dreamweaver時代に近い、あるいはそれ以上の手軽さで書けるようになるはずです。