記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【作業効率UP】vscode コマンド パレット・ショートカットキーを使いこなす

vscodeのコマンドパレット・ショートカットキー。 この2つを使い作業効率を上げる事ができます。 最近vscodeを使い始めた方、これかた使う方、より詳しく知りたい方、効率的な開発をしたい方、全ての人に向けた記事になっています。

こんにちは!
vscodeのコマンドパレット・ショートカットキーって何?
少し難しそう・・・。
そのように考えている方も多いのではないでしょうか?
コマンドパレット・ショートカットキーを使うと、より便利に作業効率を上げる事ができます。すべて知らなくても自分に必要なものを一つ知り、実践するだけでも大きく違います。

そこで今回はコマンドパレット・ショートカットキーの知識・使い方を解説します。

コマンドパレットとは?

vscodeの機能にアクセスするためのもので、vscodeの機能にアクセスするには「コマンドパレット」を介してアクセスをします。

「コマンドパレット」の開き方は、「表示」→「コマンドパレット」をクリック、もしくは
ショートカットキーwin:「Shift」+「Ctrl」+「P」、mac:「Shift」+「Cmd」+「P」で開く事ができます。

コマンドパレットの使い方

コマンドパレットを開き、スクロールするとvscodeの機能が出てきます。
ここから探し選択する方法もありますが、選択項目が多すぎて、検索しづらいです。
そこで、コマンドパレットに入力する内容によって、検索項目を特定、もしくは限定し、
アクセスしたい機能にいち早くたどりつく事ができます。

コマンドパレットの使い方、検索項目を特定、もしくは限定し、
アクセスしたい機能にいち早くたどりつく方法を見ていきます。

クイックオープン

クイックオープンとは、コマンドパレットのクイックオープン機能であり、
ワークスペースの内のファイルを開いたり、他のナビゲーション機能に遷移したり、ファイル履歴などを表示する事ができます。

ショートカットキーは、win:「Ctrl」+「P」、mac:「Cmd」+「P」で開く事ができます。

コマンドパレットの先頭から「>」を消してもクイックオープンを開く事ができます。

履歴からファイルにジャンプする

クイックオープン開くとファイル履歴が出てきます。
開きたいファイルをクリックするとジャンプする事ができます。

ファイルをバックグラウンド表示する

クイックオープン開くとファイル履歴が出てきます。
バックグラウンド表示したいファイルで「→」を押すとバックグラウンド表示する事ができます。

ヘルプ機能を表示

クイックオープン機能の先頭に「?」を入力する事により、各種ナビゲーション機能の案内表示をする事ができます。

行/列の移動

クイックオープン機能の先頭に「: 列番号を記載」を入力し、その行に移動する事ができます。
今回は12行目に移動するため「:12」を入力。

ファイル内のシンボルに移動

クイックオープン機能の先頭に「@ 移動したいシンボル」を入力し、ファイル内のシンボルに移動する事ができます。
今回はbodyに移動するため「@body」をクリック。

エディターでシンボルに移動

クイックオープン機能の先頭に「# 移動したいシンボル」を入力し、ワークスペース内のシンボルに移動する事ができます。
今回はexample.jsフォルダ「a」に移動するために「#a」を入力

デバッグの実行

クイックオープン機能の先頭に「debug 半角スペース」を入力し、デバッグの実行をする事ができます。

タスクの実行

クイックオープン機能の先頭に「task 半角スペース」を入力し、タスクの実行をする事ができます。

ターミナルにアクセス

クイックオープン機能の先頭に「term 半角スペース」を入力し、ターミナルにアクセスする事ができます。

ビューページ一覧表示

クイックオープン機能の先頭に「view 半角スペース」を入力し、ビューページ一覧を表示をする事ができます。

エディタの背景色を変える

ショートカットキーwin:「Shift」+「Ctrl」+「P」、mac:「Shift」+「Cmd」+「P」でコマンドパレット開く。
コマンドパレットに「theme」を入力「基本設定:背景色テーマ」を選択。
好きな背景色を選択しクリック、背景色を変更する事ができます。

ミニマップを消す

ショートカットキーwin:「Shift」+「Ctrl」+「P」、mac:「Shift」+「Cmd」+「P」でコマンドパレット開く。
コマンドパレットに「minimap」を入力→「表示:ミニマップの切り替え」を押しミニマップの表示の切り替えをする事ができます。

vscodeショートカットキー

Visual Studio Codeのショートカットキーを紹介します。
ショートカットキーを使いこなす事で作業効率を上げる事ができます。
コマンドパレットの使い方と合わせて使用することで、開発効率をより上げる事ができます。

基本操作編

キー 動作 コマンドID
mac:Cmd + X
win:Ctrl + X
行の切り取り(未選択時) editor.action.clipboardCutAction
mac:Cmd + C
win: Ctrl + C
行のコピー(未選択) editor.action.clipboardCopyAction
mac:↑ + ⌘ + K
win: Ctrl+Shift+K
カーソル行削除 editor.action.deleteLines
mac:Cmd + Enter
win:Ctrl+Enter
下に行追加 editor.action.insertLineAfter
mac:↑+Cmd+Enter
win:Ctrl+Shift+Enter
上に行追加 editor.action.insertLineBefore
mac:option+↓
win:Alt+Down
カーソル行を下に移動 editor.action.moveLinesDownAction
mac:option+↑
win:Alt+Up
カーソル行を上に移動 editor.action.moveLinesUpAction
mac:↑+option+↓
win:Shift+Alt+Down
カーソル行を下にコピー editor.action.copyLinesDownAction
mac:↑+option+↑
win:Shift+Alt+Up
カーソル行を上にコピー editor.action.copyLinesUpAction
mac:Home
win:Home
行の先頭に移動 cursorHome
mac:End
win:End
行の末尾に移動 cursorEnd
mac:Cmd+↓
win:Ctrl+End
ファイルの末尾に移動 cursorBottom
mac:Cmd+↑
win:Ctrl+Home
ファイルの先頭に移動 cursorTop

エディター操作 編

キー 動作 コマンドID
mac:↑+Cmd+N
win:Ctrl+Shift + N
新しいウィンドウを開く workbench.action.newWindow
mac: ↑+Cmd+W
win:Ctrl+Shift+W
ウィンドウを閉じる workbench.action.closeWindow
mac:Cmd+W
win:Ctrl+W
エディターを閉じる workbench.action.closeActiveEditor
mac:Cmd+ K F
win:Ctrl+K F
フォルダーを閉じる workbench.action.closeFolder
mac:Cmd + \
win:Ctrl + \
エディターを分割する workbench.action.splitEditor

ファイル操作編

キー 動作 コマンドID
mac: Cmd+N
win:Ctrl+N
新しいファイル workbench.action.files.newUntitledFile
mac:Cmd+O
win:Ctrl+O
ファイルを開く workbench.action.files.openFile
mac:Cmd+S
win:Ctrl+S
保存 workbench.action.files.save
mac:↑+Cmd+S
win:Ctrl+Shift+S
名前を付けて保存 workbench.action.files.saveAs
mac:Cmd+ K W
win:Ctrl+W
ファイルを閉じる workbench.files.action.closeFile
mac:Cmd + K 、 Cmd + W
win: Ctrl+K Ctrl+W
すべてのファイルを閉じる workbench.files.action.closeAllFiles

画面表示編

キー 動作 コマンドID
mac:^ + Cmd +F
win: F11
フルスクリーン表示のトグル workbench.action.toggleFullScreen
mac:↑+Cmd+=
win:Ctrl+Shift+=
ズームイン workbench.action.zoomIn
mac:Cmd+-
win: Ctrl+Shift+-
ズームアウト
mac:Cmd+B
win:Ctrl+B
サイドバー表示のトグル workbench.action.toggleSidebarVisibility
mac: ↑+Cmd+E
win: Ctrl+Shift+E
エクスプローラーの表示 workbench.view.explorer
mac:↑ + Cmd + F
win:Ctrl+Shift+F
検索画面の表示 workbench.view.search

検索・置換編

キー 動作 コマンドID
mac:Cmd+F
win: Ctrl+F
検索 actions.find
mac:Cmd+Option+F
win:Ctrl+H
置換 editor.action.startFindReplaceAction
mac:Cmd+G
win:F3
次を検索 editor.action.nextMatchFindAction
mac:Cmd+↑+G
win:Shift+F3
前を検索 editor.action.previousMatchFindAction

まとめ

今回はコマンドパレット・ショートカットキーの知識・使い方を解説してきました。
全てを知らなくても、自分に必要なものを一つ知り、実践するだけでも大きく違いますので、ぜひ取り入れてみてください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。