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

【mac/windows】Visual Studio Code ショートカットキー(初心者むけ)

Visual Studio Codeコードのショートカットキーを紹介。 本記事であれば、【mac/windows】2つのOSを網羅しているので、どちらのOSであっても本記事1つで対応でき調べ直す必要がありません。また初心者の方にもわかりやすい内容になっています。

カテゴリ: Visual Studio Code

Visual Studio Codeでは多くのショートカットキーが用意されています。
そこでショートカットキーを使いより効率的に作業を進めたい方向けに、
【mac/windows】2つのOSを網羅したショートカットキーをご紹介します。
まだ知識のない初心者の方にもわかりやすく解説してありますので、ぜひ参考にしてください。

Visual Studio Codeとは

Visual Studio Code(vs code)とは、マイクロソフト社が無料で提供しているテキストエディタの事であり、世界中のエンジニアの中でも利用者の多い人気ソフトです。

Visual Studio Codeが人気のある理由として5点があがられます。

1.オープンソースであり、誰でも無償で利用する事ができる。
2.Windows版・macOS版・Linux版と各OSに対応している。
3.多くの言語に対応している(英語、日本語、フランス語、ドイツ語、中国語、ロシア語)などその他、各国の言語に対応している。
4.拡張機能が豊富(デバック機能、コード補完、ソースコードのシンタックスハイライトなど)
5.軽量で早く動く(余計な機能は最初から省かれているので、ストレスなく動く)

以上5点の利便性から、最も多くのユーザーに選ばれている開発ツールだと言われています。

vsコードの効率を高めるショートカットキー

Visual Studio Codeは、マウスを使ってほとんどの操作が行えます、
しかし操作速度を上げ効率的な操作を行う為には、ショートカットーキーが欠かせません。つまりショートカットキーを使いこなす事ができれば直接的に開発時間を短縮する事ができます。
本記事では各項目に分けてショートカットキーをmac/widows版版で紹介します。

【mac/windows】ショートカットキー

基本操作編

キー 動作 コマンド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:Cmd+Cmd+]
win:Ctrl+Shift+]
対応する括弧に移動 editor.action.jumpToBracket
mac:Cmd+]
win:Ctrl+]
行にインデントを追加 editor.action.indentLines
mac:Cmd+[
win:Ctrl+[
行のインデントを削除 editor.action.outdentLines
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+T
win:Ctrl +T
全てのシンボルを表示 workbench.action.showAllSymbols
mac:^ + G
win:Ctrl+G
指定行に移動 workbench.action.gotoLine
mac:Cmd + P
win:Ctrl + P
ファイルに移動  workbench.action.quickOpen
mac:Cmd + ↑+O
win:Ctrl+Shift +O
指定シンボルに移動 workbench.action.gotoSymbol
mac:Cmd + ↑+M
win:Ctrl+Shift +M
エラー、警告を表示 workbench.action.showErrorsWarnings
mac:F8
win:F8
次のエラー、警告に移動 editor.action.marker.nex
mac:↑+F8
win:Shift+F8
前のエラー、警告に移動 editor.action.marker.prev
mac:F1
win: F1
全てのコマンドを表示 workbench.action.showCommands
mac:^+Tab
win:Ctrl+Tab
ファイル履歴を表示 workbench.action.openPreviousEditor
mac:^+-
win:Alt+Left
前に戻る workbench.action.navigateBack
mac: ^+↑+-
win:Alt+Right
次に進む workbench.action.navigateForward

検索・置換編

キー 動作 コマンド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

高機能な言語の編集編

キー 動作 コマンドID
mac:^+space
win:Ctrl+Space
サジェストを表示 editor.action.triggerSuggest
mac:↑+Cmd+Space
win: Ctrl+Shift+Space
パラメーターヒントを表示 editor.action.triggerParameterHints
mac:↑+⌥+F
win: Shift+Alt+F
コードをフォーマット editor.action.format
mac:F12
win:F12
選択部分の定義に移動 editor.action.goToDeclaratio
mac:option+F12
win:Alt+F12
選択部分の定義をプレビュー editor.action.previewDeclaration
mac:Cmd + .
win: Ctrl + .
クイックフィックス editor.action.quickFix
mac:↑ + F12
win:Shift+F12
リファレンスを表示 editor.action.referenceSearch.trigger
mac:F2
win:F2
シンボルをリネーム editor.action.rename
mac:↑+⌘+X
win:Ctrl+K Ctrl+X
行末尾のスペースを削除 editor.action.trimTrailingWhitespace
mac:Cmd+ K M
win:Ctrl+K O
言語モードを変更 workbench.action.editor.changeLanguageMode

エディター操作編

キー 動作 コマンド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
mac:Cmd+1
win:Ctrl+1
左のエディターにフォーカス workbench.action.focusFirstEditor
mac:Cmd+2
win:Ctrl+2
サイドエディターにフォーカス workbench.action.focusSecondEditor
mac:Cmd+3
win:Ctrl+3
右のエディターにフォーカス workbench.action.focusThirdEditor
mac:Cmd+K + ←
win:Ctrl+K Left
アクティブなエディターを左に移動 workbench.action.moveActiveEditorLeft
mac:Cmd+K + →
win:Ctrl+K Right
アクティブなエディターを右に移動 workbench.action.moveActiveEditorRight

ファイル操作編

キー 動作 コマンド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
mac:Cmd+K Enter
win:Ctrl+K Enter
作業中ファイルに追加 workbench.files.action.addToWorkingFiles
mac:Cmd + K P
win:Ctrl+K P
アクティブなファイルのパスをコピー workbench.action.files.copyPathOfActiveFile
mac:Cmd +K R
win:Ctrl+K R
アクティブなファイルをエクスプローラーで表示 workbench.action.files.revealActiveFileInWindows
mac:Cmd +K O
win:Ctrl+K O
アクティブなファイルを新しいウィンドウで表示 workbench.action.files.showOpenedFileInNewWindow

画面表示編

キー 動作 コマンドID
mac:^ + Cmd +F
win: F11
ルスクリーン表示のトグル workbench.action.toggleFullScreen
mac:↑+Cmd+=
win:Ctrl+Shift+=
ズームイン workbench.action.zoomIn
mac:Cmd+-
win:Ctrl+Shift+-
ズームアウト workbench.action.zoomOut
mac:Cmd+B
win:Ctrl+B
サイドバー表示のトグル workbench.action.toggleSidebarVisibility
mac:↑ + Cmd +D
win:Ctrl+Shift+D
デバッグ画面の表示 workbench.view.debug
mac: ↑+Cmd+E
win: Ctrl+Shift+E
エクスプローラーの表示 workbench.view.explorer
mac:^+↑+G
win:Ctrl+Shift+G
Git画面の表示 workbench.view.git
mac:↑ + Cmd + F
win:Ctrl+Shift+F
検索画面の表示 workbench.view.search
mac:↑+Cmd+J
win:Ctrl+Shift + J
詳細検索のトグル workbench.action.search.toggleQueryDetails
mac:↑+Cmd+C
win:Ctrl+Shift+C
新しいコマンドプロンプトを開く workbench.action.terminal.openNativeConsole
mac:↑+Cmd + U
win:Ctrl+Shift+U
アウトプット画面を開く workbench.action.output.toggleOutput
mac:↑ + Cmd + V
win:Ctrl+Shift+V
マークダウンのプレビュー表示をトグル workbench.action.markDown.togglePreview
mac:Cmd+ K V
win:Ctrl+K V
マークダウンのプレビューを横に表示 workbench.action.markDown.openPreviewSideBySide

デバッグ編

キー 動作 コマンドID
mac:F9
win:F9
ブレークポイントのトグル editor.debug.action.toggleBreakpoint
mac:F5
win:F5
コンティニュー workbench.action.debug.continue
mac:F5
win:F5
ポーズ workbench.action.debug.start
mac:F11
win: F11
ステップイン workbench.action.debug.stepInto
mac:↑ + F11
win:Shift+F11
ステップアウト workbench.action.debug.stepOut
mac:F10
win:F10
ステップオーバー workbench.action.debug.stepOver

Tasks編

キー 動作 コマンドID
mac:↑+Cmd+B
win:Ctrl+Shift+B
ビルドタスクの実行 workbench.action.tasks.build

まとめ

本記事では、目的別にmac/windowsのショートカットキーを紹介してきました。
最後に、まとめとして、良く使うショートカットキー一覧を掲載します。

キー 動作
mac:Cmd+O
win:Ctrl+O
ファイルを開く
mac:Cmd+N
win:Ctrl+N
新しいファイルを開く
mac:Shift+Cmd+E
win:Ctrl+Shift+E
エクスプローラーを開く
mac:Cmd+S
win:Ctrl+S
ファイルの保存
mac:Shift+Cmd+S
win:Ctrl+Shift+S
名前を付けてファイルを保存
mac:Cmd+Shift+P
win:Ctrl+Shift+P
コマンドパレットを開く
mac:Cmd+/
win:Ctrl+ /
選択行をコメント化
mac:Option+Cmd+F
win:Ctrl+H
文字の置き換え
mac:Cmd+F
win:Ctrl+F
文字の検索
mac:Option+矢印キー
win:Alt+矢印キー
選択行の移動
mac:Cmd+Shift+K
win:Ctrl+Shift+K
選択行の削除
mac:Option+Shift+矢印キー
win:Alt+Shift+矢印キー
選択行のコピー
mac:Cmd+Enter
win:Ctrl+Enter
カーソルの下に行を挿入
mac:Shift+Cmd+Enter 
win:Ctrl+Shift+Enter
カーソルの上に行を挿入

いかがだったでしょうか?
本記事を参考にVisual Studio Codeのショートカットキーを使いこなし、効率的な開発をしていただけたら幸いです。

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

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

minweb編集部(株)セルリア

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

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

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

ダウンロード資料画像

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

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