VSCodeの「コマンドパレット」を使いこなす|現場で使える実践テクニック

VSCodeの「コマンドパレット」を使いこなす|現場で使える実践テクニック
C
クリオ
Web制作ディレクター / フロントエンジニア

こんにちは!

今日は「VSCodeのコマンドパレットを使いこなす」について解説します。

僕がコマンドパレットに目覚めたきっかけ

正直な話ですね、僕も最初の頃はコマンドパレットをめっちゃ使いこなせていなかったんです。
「メニューをクリックする方が早いやん」って思ってました。
でも後輩に指摘されたんですよ。「クリオさん、マウス使いすぎで作業遅くないですか?」って。
その時から本気でコマンドパレットを学び始めて、今では一日に何百回も使う必須ツールになりました。

実は、コマンドパレットを使えるかどうかで、一日の作業時間が結構変わるんです。
小さな時間短縮の積み重ねが、一ヶ月単位では無視できない差になります。

コマンドパレットの基本的な使い方と便利な検索テクニック

コマンドパレットを開くのは、Ctrl + Shift + P(WindowsやLinux)またはCmd + Shift + P(Mac)です。
ここまでは誰でも知ってますよね。
でもここからが大事です。

コマンドパレットの検索には、便利な記号が使えるんです。これを知ってるかどうかで効率が劇的に変わります。

  • >を最初に入れると、コマンド検索モード(デフォルト)
  • @を最初に入れると、シンボル検索(ファイル内のクラスや関数をジャンプ)
  • :を最初に入れると、行番号指定ジャンプ
  • #を最初に入れると、ワークスペース全体のシンボル検索
  • ?を最初に入れると、ヘルプ表示

現場でよくあるのは、「あ、この関数ってどこで定義されてる?」という時。
僕は#で関数名を入力して、一瞬で該当箇所にジャンプしています。
これマジでめっちゃ便利です。

現場でよく使う「あるあるコマンド」5選

ここからは、僕が毎日のコーディングで本当に使ってるコマンドを紹介します。

1. Format Document(ドキュメント全体のフォーマット)

コマンドパレットで「format」と入力すれば出てきます。
Prettierやデフォルトのフォーマッターで、ファイル全体を整形してくれます。
チームで決めたコード規約に沿わせるのに最高です。

2. Sort Lines(行をソート)

これ、初めて使う人は「えっ、こんなコマンドあるの?」って反応するんですよ。
複数行を選んで「sort」を実行すると、アルファベット順に並び替わります。
CSSのプロパティを整理する時に、みんなで使ってます。

3. Go to File(ファイルを開く)

Ctrl + Pでも開けますが、Cmd + Shift + Pで「go to」と入力しても同じです。
ファイル名をあいまい検索で見つけてくれるので、深いディレクトリの/src/components/Button/index.jsも一瞬です。

4. Toggle Terminal(ターミナルの表示/非表示)

頻繁に行き来するから、キーバインディングに登録するのがほんまおすすめです。
マウスでいちいち切り替えるのは時間のムダですよ。

5. Change File Language(言語モード変更)

「あ、このファイルHTMLなのに、JavaScriptとして認識されてる」という時。
「language」で検索して言語を変更できます。
シンタックスハイライトが即座に変わるので、地味ですけど重要です。

キーバインディングを組み合わせてさらに効率化

ここまで読んでくれたあなたに、最後の秘訣です。

よく使うコマンドは、カスタムキーバインディングに登録しましょう。
Ctrl + K Ctrl + S(Mac: Cmd + K Cmd + S)でキーバインディング一覧が開きます。
そこで「keybindings.json」を編集できます。

例えば、僕は「Toggle Terminal」をCtrl + `に、「Format Document」をAlt + Fに登録してます。
こういった細かいカスタマイズが積み重なると、マウスをほぼ使わなくなるんです。
コードを書くことに集中できる環境が整うんですよ。

最初は「設定が面倒だな」と思うかもしれません。
でも一週間使い続けると、その投資は絶対に回収できます。
現場の先輩たちも、自分専用の最高のキーバインディングを持ってますから。

まとめ

VSCodeのコマンドパレットは、単なる便利な機能ではなく、効率的なコーディングの根幹です。
「マウスとメニューで十分」って思ってるあなたも、ぜひ今日から試してみてください。

最初の数日は、コマンド名を思い出すのに時間がかかるかもしれません。
でも一ヶ月もあれば、無意識に指が動くようになります。
僕がそうだったように、あなたもきっと「あ、これめっちゃ快適だ」って気づく日が来ますよ。

Web制作で困ったことがあったら、またこのブログを覗いてくださいね!

― クリオ