## VSCodeは軽量で使いやすいコードエディター

VSCodeは様々な開発で使用されているコードエディターです。**VSCodeは軽量なことで知られ、起動時に使用するメモリが少ない特徴があります。**

またインテリセンスやデバッグ機能など、様々な機能が搭載されています。さらにVSCodeは機能面が充実しているだけでなく、インストールの方法も簡単です。

本記事では、VSCodeのインストールと初期設定までを丁寧に解説します。これからVSCodeを使おうと考えている方は、ぜひ本記事を参考にして一緒に作業をしましょう。

【参考】：[Code editing.Redefined.](https://code.visualstudio.com/#alt-downloads)

## OSごとにダウンロードするVSCodeが異なる

VSCodeの公式サイトでは、OSごとにダウンロードボタンが分かれています。**ダウンロードをする時は、必ずお使いの環境にあったアプリケーションをダウンロードしてください。**

またダウンロードのページには、下図のようにOSのバージョンが表示されています。（①）ダウンロードをする際には、VSCodeが対応しているバージョンかどうかも併せて確認しましょう。

下図の赤枠を押すと、VSCodeがダウンロードされます。バージョンなどの確認ができたら、お使いのOSのボタンを押しましょう。

**VSCodeのダウンロードが完了したら、インストールを開始しましょう。**先ほどダウンロードしたセットアップ用のアプリケーションを起動して下さい。

アプリケーションを起動すると、「使用許諾契約書をお読みください」と表示されますので、内容を確認しましょう。内容に同意する場合は、「同意する」にチェックを入れて「次へ」ボタンを押します。

【図】：使用許諾契約書の同意画面

次に「追加タスクの選択」という画面が現れます。ここでオプションを設定しましょう。デフォルトでは下2つの項目にチェックが入っていますが、お好みで変更しても問題ありません。

ちなみに1番下の項目「PATHへの追加（再起動後に使用可能）」は、チェックを入れておけば環境変数の追加などの設定が不要になります。面倒な初期設定が不要ですので、すぐにVSCodeを使用したい方は、チェックを入れておきましょう。 

【図】：追加タスクの選択画面

最後に「インストール準備完了画面」という画面が表示されます。画面中央の「追加タスク一覧」という箇所に、先ほどチェックを入れた項目が表示されているか確認しましょう。

オプションの項目を変更したい場合は、画面の下の「戻る」ボタンを押し、オプションの設定をします。設定内容に問題がなければ「インストール」ボタンを押しましょう。

【図】：インストール準備完了画面

無事にインストールが終わると「Visual Studio Codeセットアップウィザードの完了」という画面が表示されます。そのままVSCodeの設定をする場合には、画面中央の「Visual Studio Codeを実行する」のチェックを入れたままにします。

最後に「完了」ボタンを押したら、インストールは完了です。チェックを入れたままにした方は、VSCodeが起動しますので、そのまま初期設定を始めましょう。

VSCodeはデフォルトの言語が英語のため、インストールが完了したら日本語に変更する必要があります。**その際、日本語で表示させるためには、拡張機能の設定が必要です。**

VSCodeでは日本語化の設定にとどまらず、他の場面でも拡張機能を頻繁に使用します。例えばVSCodeではJavaScript、Node.js、TypeScriptがサポートされていますが、他の言語を使いたい場合には拡張機能を使いましょう。

また、その他にもデバッガなどを使いたい場合にも、拡張機能を使用しています。ここからは、日本語表記の設定を通して、拡張機能の導入方法を解説します。 

TypeScriptはJavaScriptの上位互換？違いは開発規模や機能面にアリ

Node.jsとは？JavaScriptとの違いや使い所を解説

*まずは、VSCodeの画面を起動した状態にしてください。*そしてVSCodeの画面の左側にある、「アクティビティバー」の1番下にある「拡張機能」のアイコンをクリックします。

この拡張機能のアイコンは「Ctrl」＋「Shift」＋「X」 でも開くことができます 。拡張機能を開くと、画面の左側に拡張機能の一覧が表示されることを確認しましょう。ご自身がインストールしたい拡張機能を、下図の赤枠で囲われた検索窓に入力して探しましょう。

今回は例として「Japanese Language Pack for Visual Studio Code」をインストールします。VSCodeはデフォルトの設定は英語表記のため、日本語化をしたい方はこちらの拡張機能をインストールしましょう。

左側の拡張機能の検索窓から「Japanese Language Pack for Visual Studio Code」を検索すると、画面右側に拡張機能の詳細が表示されます。

画面上部のインストールという青いボタンを押すと、インストールが開始されます。インストールが完了すると、画面右下にポップアップが出ますので、「Change Language and Restart」という青いボタンを押しましょう。

ボタンを押すと、VSCodeが再起動します。再起動後の画面が日本語に切り替わっていれば、うまく拡張機能がインストールできました。

他の拡張機能についても、上記のような流れで拡張機能を検索してインストールをすれば、すぐに使えるようになります。その他に導入したい拡張機能があれば、同様の手順でインストールをしてみましょう。

【参考】：[拡張機能マーケットプレイス](https://code.visualstudio.com/docs/editor/extension-marketplace)

## ユーザとワークスペースの設定

**次に、ユーザの設定とワークスペースの設定を行います。**どちらの設定もそれほど難しくありませんので、一緒に手を動かして作業してみましょう。

まずはユーザー設定から行いましょう。ユーザー設定は、画面左下の歯車マークを押すと開くことができます。ユーザー設定では、エディターのフォントや書式設定、エンコードなどを細かく設定できます。また基本的にはプルダウンで選択をする形式が多いため、難しい作業は必要ありません。

*基本的には好みで設定をしていただければ良いと思いますが、「テキストエディター」の箇所は一度目を通して設定をすることをおすすめします。*

例えばインデントを自動で揃えるかといった、細かいポイントを自分好みにカスタマイズできるので、ここをしっかり設定しておくと非常に作業効率が良くなるでしょう。

【参考】：[ユーザーとワークスペースの設定](https://code.visualstudio.com/docs/getstarted/settings)

次にワークスペース設定について解説します。*VSCodeのワークスペースでは、特定のフォルダーをワークスペースに設定できます。*するとそのワークスペースに限定して、特定の設定や拡張機能の有無の設定が可能です。

VSCodeのワークスペースを追加するには、Vscode の画面左上の「ファイル」から開くことができます。例えば特定のフォルダをワークスペースに追加したい場合には、「ファイル」（①）の「フォルダーをワークスペースに追加」（②）を選択し、フォルダを追加するだけでワークスペースを設定できます。

【図】：ワークスペースの追加

その他にもマルチルートワークスペースという複数のフォルダをワークスペースとして構成する方法もあります。こちらは応用的な使い方になりますので、もしマルチルートワークスペースの設定方法

が気になる方はVSCodeの公式サイトを参考にしてください。

【参考】：[ユーザーとワークスペースの設定](https://code.visualstudio.com/docs/getstarted/settings)
【参考】：[マルチルート ワークスペース](https://code.visualstudio.com/docs/editor/multi-root-workspaces)

## VSCodeの紹介ビデオも活用しよう

**VSCodeの公式サイトにはセットアップを含め、VSCodeの使い方を紹介する動画が用意されています。**解説動画は英語ですが、操作を実際に見ながら作業できます。また動画の下に概要が説明されていますので、ブラウザの翻訳機能などを活用すれば日本語で、ある程度内容を把握できます。

紹介動画はセットアップの動画の他にも、より効率的な使い方やデバッグの方法も紹介されています。これからVSCodeを活用する方は、ぜひこちらも参考にしてみてください。

【参考】：[紹介ビデオ](https://code.visualstudio.com/docs/getstarted/introvideos)

## VSCodeを活用して効率的に開発しよう

VSCodeのインストールは手順も少なく、非常に簡単だとお分かりいただけたかと思います。**初期設定なども簡単で、すぐに開発を始められるのがVSCodeの特徴です。**

また、拡張機能やユーザー設定などで、後から自分好みにカスタマイズできるのもVSCodeの魅力です。これからVSCodeを使いたいと考えている方は、ぜひ本記事を参考にしてインストールをしてみてください。

VSCodeのショートカット一覧！開発作業を効率化する秘訣を解説

VS Codeのプラグインとは？導入方法やおすすめの拡張機能も紹介

VSCodeは、Windows・mac・Linuxで使用できるコードのエディターです。JavaScriptなどをはじめとした様々な言語に対応し、幅広い開発者に使用されています。本記事では、VSCodeのインストール方法から設定まで詳しく解説します。

VSCodeは軽量かつ機能が豊富なコードエディターで、様々な開発で使用されています

インストールをした直後のVSCodeは英語表記のため、拡張機能を使い別途日本語化します

ユーザー設定やワークスペース設定を行うことでより効率的な開発を目指せます

VSCodeをインストールする方法とは？設定方法まで丁寧に解説

Visual Studio Code 2022年6月版（バージョン1.69）がリリースされ、**VS Codeのバックエンド機能を提供するVS Code Serverがプライベートプレビュー版として公開されました。**

現時点での最新リリースとなるVisual Studio Code 2023年1月版（バージョン1.75）においても、プライベートプレビュー版の扱いには変更がありません。

サービスのインストールや更新、管理・接続を容易にするCLIが提供されます。2022年7月7日のBlogには、より詳細な情報が掲載されています。

【参考】：[Visual Studio Code update June 2022, version 1.69](https://code.visualstudio.com/updates/v1_69)
【参考】：[Blogs The Visual Studio Code Server](https://code.visualstudio.com/blogs/2022/07/07/vscode-server)

VS Code Serverは、ローカルの開発マシンやクラウドのVMなど任意の場所にインストールし、SSHやhttpsを設定する手間をかけずに、ウェブ版VS Code（vscode.dev）を使ってブラウザから安全にアクセスすることができます。

**VS Code Serverは、VS Codeの統一されたエクスペリエンスを提供するために登場しました。**つまりローカルでもリモートでも、デスクトップでもブラウザでも、どのようにエディタを使ってもVS Codeで同じ操作感が提供されます。

それを支える技術として、バックエンドサーバーにVS Code Serverが動作し、トンネル接続することで安全にデータを転送します。

### ブラウザからのVS Code Serverへのアクセス

*ブラウザからのVS Code Serverへのアクセスは、VS Codeの手順に従います。*それぞれのブラウザによっては、サイトパーミッションの設定が必要な場合があります。

【参考】：[VS Code: Additional browser setup](https://code.visualstudio.com/docs/editor/vscode-web#_additional-browser-setup)

### ソフトウェアライセンスの考え方

*本ソフトウェアは、使用するうえで次のライセンスに従う必要があり、同意したものとみなされます。*他のソフトウェアと同様に、利用条項や情報保護を理解した上で使用を開始します。

・Visual Studio Code Serverライセンス条項
・マイクロソフトのプライバシーステートメント

【参考】：[Visual Studio Code Serverライセンス条項](https://aka.ms/vscode-server-license)
【参考】：[マイクロソフトのプライバシーステートメント](https://privacy.microsoft.com/en-US/privacystatement)

## VS Code Serverのサインアップ登録が不要に

VS Code Serverの使い方ですが、以前はプライベートプレビューのためサインアップフォームからアクセスを要求する必要がありました。**現在では、サインアップ登録が不要となり、すぐに利用できるように手順が改定されています。**

以前の場合はフォーム送信後、マイクロソフト社により所定の確認がされており、登録完了の電子メールを受け取るまで2〜3週間ほどかかっていましたが、すぐに利用が可能です。フォーム入力サイトにも、その旨が表示されています。

【参考】：[The VS Code Server - Preview Program Signup](https://aka.ms/vscode-server-signup)

*VSCode（Visual Studio Code）は、マイクロソフト社が開発提供しているソースコードエディタです。*Windows・Linux・macOSのクロスプラットフォームで利用可能です。プログラミング言語は、C言語やC++をはじめPython・PHPなどの主要言語に対応します。

【参考】：[Microsoft Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)
【参考】：[Visual Studio Code](https://code.visualstudio.com/)

フリーのオープンソースソフトウェアであり、各プログラミング言語の構文チェック・検索・編集が可能です。無料でキー操作のカスタマイズの高さがあることから、クロスプラットフォーム利用が進んでいます。

Pythonとは？人気の理由と基本知識をわかりやすく解説！

PHPとは？基本知識からメリット・デメリットまでわかりやすく解説

*VS Codeの最新リリースは、2023年1月版（バージョン1.75）となります。*最新リリースでは、以下の機能拡張がされています。

・拡張機能、設定、ショートカットなどのプロファイル共有機能
・新しいキーボードショートカットなどによるアクセシビリティの向上
・ビューの検索や表示の改善
・新しいGitコマンドやGitHub Copilotを用いたAI補完機能

【参考】：[Visual Studio Code Updates January 2023 (version 1.75)](https://code.visualstudio.com/updates/v1_75)

AIペアプログラマー「GitHub Copilot」の使い方や導入メリットを徹底解説！

**VS Code Serverは、デスクトップ PC や仮想マシン (VM) などのリモート開発マシン上で実行できるサービスです。**トンネリングを確立することでSSHを必要とせず、vscode.devのURLを介してどこからでも安全にリモートマシンに接続することができます。SSHやhttpsが不要で、設定作業を簡略化することができます。

【参考】：[Docs Visual Studio Code Server](https://code.visualstudio.com/docs/remote/vscode-server)

VS Codeでは、マルチプロセスのアプリケーションとして設計されています。ユーザーの生産性を高め、シームレスな環境で利用できるように、コードを入力するフロントエンドと、拡張機能やターミナル・デバッグを担当するバックエンドを分離して設計しています。

VS Code Serverではリモート環境にサービスをインストールし、ローカルのVS Codeがリモートのソースコードやランタイムとスムーズに対話できるようにします。具体的には、Windows Subsystem for Linux（WSL） や SSH 経由のリモートマシン・開発コンテナで VS Code から直接作業することができます。

フロントエンドとは？バックエンドとの違いや使う言語について解説

Windows環境のDockerとWSLの活用方法・手順を解説

VS Code Serverは、SSHを使用せずにウェブアクセスにより利用するものです。具体的な想定利用方法は、*SSHのサポートが制限されている環境や機器での利用、あるいはウェブベースのアクセスが必要なリモートマシンでの開発に有効です。*

上記のほか、iPadなどのタブレットやChromebookのように、VS Codeデスクトップのインストールをサポートしていないデバイスを用いた開発も可能になります。処理はブラウザとのトンネリングを用いていますので、セキュリティ上も有効です。

iPadでプログラミングは可能？使える言語や環境構築の方法を解説

Chromebookで始めるプログラミング！概要とおすすめ構成

### VS Code Serverが使用するエンドポイント

*VS Code Serverでは、以下のエンドポイントアクセスが必要になることがあります。*制限を加えている利用環境では、ネットワークアクセス許可が必要です。

【参考】：[Network Connections in Visual Studio Code: Common hostnames](https://code.visualstudio.com/docs/setup/network#_common-hostnames)
【参考】：[VS Code Server: connectivity requirements on remote machine / VM](https://code.visualstudio.com/docs/remote/ssh#_what-are-the-connectivity-requirements-for-the-vs-code-server-when-it-is-running-on-a-remote-machine-vm)

### VS Code Serverの実装と今後の予定

VS Code Serverでは、*コード CLI をさらに強化し、プロジェクトの保存場所に関わらず、VS Code のデスクトップとウェブインスタンスの両方で利用することを目標としています。*今回、利用者のフィードバックを得るために、プライベートプレビュー版として限定リリースすることが決定されました。

最初のプレビューでのコードサーバーCLIは、デスクトップのVS Codeを起動したり、拡張機能をインストールしたりするためのCLIとは異なります。使用可能なコマンドは、ターミナルから「code -h」で確認可能です。

## VS Code Serverが対応を開始したVS Code

*VS Code Serverが対応を開始したVS Code 1.69は、2022年6月にリリースされました。*2023年2月現在、Update 1.75.0が最新リリースですが、ここでは、VS Code Serverが対応を開始したVS Code 1.69を簡単にまとめておきます。1.69では、VS Code Serverの他にも以下の主要機能がリリースされています。

【参考】：[Visual Studio Code update June 2022, version 1.69](https://code.visualstudio.com/updates/v1_69)

### 3ウェイのマージエディター

*3者間でのマージ作業に活用できます。*ソースコントロールビューでコンフリクトしているファイルをクリックすることでマージエディターが起動し、Git mergeのコンフリクトを素早く解決することができます。この機能は、git.mergeEditorをtrueに設定することで利用可能です。

*ファイル検索やコマンドの実行、カーソル履歴のナビゲーションを行う新しいユーザーインターフェースです。*コマンドセンターは通常のタイトルバーに代わるもので、メインセクションをクリックすると、最近開いたファイルや検索ボックスがあるQuick Open dropdownが表示されます。

Do Not Disturbモードを有効にすることで、*エラー以外の通知ポップアップをすべて非表示に設定できます。*進行状況の通知は、自動的にステータスバーに表示されます。非表示になった通知は、引き続き通知センターで確認することができます。

1月のリリースからプレビュー提供していたシェル統合が正式にリリースされました。PowerShellやbash・zshのシェル統合で、次期リリースの1.70からデフォルトで有効となる予定です。シェル統合により、*コマンドの終了コードを取得し、結果の判定や再実行が可能です。*

PowerShellとは？できること・コマンドをわかりやすく解説

bashとは？シェルの概要から他のシェルとの違いまで解説！

### ターゲットへのデバッグステップイン

*デバッガがある行で一時停止中に、特定の関数呼び出しに直接ステップインし、デバッグを行うことができます。*コマンドパレットで「Debug: Step Into Target 」コマンドを実行するか、キーボードショートカットの「Ctrl+F11」で起動することができます。

### JavaScript ソースマップ切り替え

*JavaScript のデバッグセッションで、ソースマップが切り替え可能となりました。*オフにすると、ソースコードに設定されたブレークポイントは有効ですが、コンパイルされたコードをステップ実行します。

VS Code Serverのインストール方法は、Blogあるいはドキュメントに掲載されています。

【参考】：[Blogs The Visual Studio Code Server](https://code.visualstudio.com/blogs/2022/07/07/vscode-server)
【参考】：[Docs Visual Studio Code Server](https://code.visualstudio.com/docs/remote/vscode-server)

VS Code Server を開発対象となるリモートマシン にインストールする方法ですが、*Windows Subsystem for Linux（WSL）で VS Code Server をセットアップする場合、WSLターミナルで次のコマンドを実行します。*

```wget -O- https://aka.ms/install-vscode-server/setup.sh | sh```

WSLの場合、WSLターミナルで以下のコマンドでVS Code Serverを起動します。

code-server -h を実行すると、サーバの起動と管理に使用できるすべてのコマンドを見ることができます。*プライベートプレビュー版のため、正式リリースに向けて利用可能なコマンドが今後更新されていく模様です。*

vscode.devとコンピュータの接続を確立するために、VS Code Server のセキュアトンネルサービスが利用されます。具体的には、GitHubアカウントの認証URLとなる 「https\://github.com/login/device」に指定された認証コードを入力することで、トンネリングサービスが利用可能になります。

最初の起動時には、接続のための名称を登録します。*設定完了によりvscode.devの接続URLが生成され、このURLを任意のデバイスで利用することができます。*VS Code Serverは、SSH接続せずにvscode.devからリモートマシンに接続できます。VS Codeリモート開発の詳細な考え方については、以下のリンクをご確認ください。

【参考】：[VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview)

## リモート開発の選択肢が増えます

リモート開発では、通常SSHを使用してリモートマシンあるいは仮想マシン上のフォルダに接続し開発を進めます。VS Code ServerではSSHを使わずに、vscode.devのURLでどこからでも安全に行うことができます。1度設定してしまえば、ウェブアクセスであらゆるデバイスからコード開発が可能になります。

現在はプライベートプレビューのため多少ハードルが高く感じられますが、*通常のプレビューや正式リリースに向けて情報発信をチェックしておくことをおすすめします。*

Visual Studio 2022の新機能がIDEで歴代最高な理由

VS Code Server は、リモート開発マシン上で実行できるサービスです。SSHを必要とせず、vscode.devのURLを介してどこからでも安全にリモートマシンに接続することができます。ここではVS Code Serverの概要から利用方法まで解説していきます。

VS Code Serverは、vscode.devのURLを介してリモート開発マシンに接続します

VS Code 1.69以降に対応する機能で、プライベートプレビュー版として提供されます

面倒なSSHやhttpsが不要で、リモート開発時の設定作業を簡略化することができます

VS Code Serverが登場！インストール方法や使い方・開発方法を解説

Visual Studio Code（VSCode）は、**キーボードショートカット機能を持ち、ほとんどの操作をキーボード操作のみで行うことができます。**ショートカットの変更や、希望のショートカット設定を導入することも可能であり、キーマップのカスタマイズ性が高いことが特長として挙げられます。

*Visual Studio Codeは、マイクロソフト社が開発提供しているソースコードエディタです。*Windows・Linux・macOSで利用可能です。フリーのオープンソースソフトウェアであることや、キー操作のカスタマイズを柔軟に行えることから、クロスプラットフォーム利用が進んでいます。

## Visual Studio Codeのキーバインディング

Visual Studio Codeでは、ほとんどの操作をキーボードで行うことができます。*デフォルトキーバインディングが設定されていますが、キーボードショートカットエディタで簡単に確認・変更することができます。*また、あらかじめ決められたキーボードショートカットをマーケットプレイスから取り込むこともできます。

Visual Studio Codeの利用には、モジュールのダウンロードとインストールが必要です。ショートカットの確認の際に、実行できるよう事前に準備しておきましょう。なお、*Web版もプレビュー提供されており、インストールせずにソフトウェアを開発することもできます。*

【参考】：[Download Visual Studio Code](https://code.visualstudio.com/download)
【参考】：[Visual Studio Code Webプレビュー](https://vscode.dev/)

### キーボードショートカットエディタの利用

キーボードショートカットエディタは、*Windowsの場合はアプリ左下の「管理アイコン」をクリックし「キーボード ショートカット」を選択します。*

macOSでは「コード」「環境設定」「キーボードショートカット」をクリックします。Windowsでは、Ctrl+K Ctrl+Sのキーボードショートカットで表示させることもできます。

　【図】：管理アイコンのメニュー表示

管理アイコンのメニューで「キーボード ショートカット」をクリックすると、以下のようにキーボードショートカットエディタが立ち上がります。

　【図】：キーボードショートカットエディタの起動

キーバインドの変更を行う場合は、検索キーで該当部分を表示しダブルクリックで編集します。また、エディタの上部右端の「・・・」アイコンをクリックすると「既定のキーバインドを表示」「拡張機能のキー バインドを表示する」「ユーザーのキーバインドを表示」のメニューが表示されます。

このメニューから表示内容を選択することもできます。

　【図】：キーボードショートカットエディタのサブメニュー

### キーボードショートカットの設定ファイル

*デフォルト設定のキーボードショートカットを変更した場合、変更した設定内容がJSONファイルとして格納されます。*JSONファイルはエディタで編集することが可能です。

格納ファイルは、”C:\Users\\ユーザー名\AppData\Roaming\Code\User\keybindings.json”です。

使い方は、上部右から3番目のアイコンにカーソルを合わせると、「キーボードショートカットを開く（JSON）」の吹き出しが表示されます。そのままクリックすると、 “keybindings.json”がエディタに表示されます。もう1度、今のアイコンをクリックすると、通常のキーボードショートカットエディタに戻ります。

　【図】：キーボードショートカットエディタからJSONファイルを表示・編集する 

すでにショートカットのカスタマイズがされている場合は、このJSONファイルに登録されています。デフォルトでは何も登録されていません。

### ショートカットが効かない場合

キーバインディングのコンフリクトや解釈の優先順位の問題で、ショートカットが効かないことや正常動作しないことがあります。その場合は、設定状況を確認して正しい設定に置き換える必要があります。

確認するには、**”Developer:Toggle Keyboard Shortcuts Troubleshooting” を実行しログファイルを調べることも可能です。**Windowsで実行するには、「表示」「コマンド パレット…」またはCtrl+Shift+Pで検索し、実行します。

【参考】：[Visual Studio Code Detecting keybinding conflicts](https://code.visualstudio.com/docs/getstarted/keybindings#_detecting-keybinding-conflicts)

### キーボードショートカットの切り替え

Visual Studio Codeでは、*キーマップ拡張が可能ですのでマーケットプレイスから希望するキーマップを取り込み、キーボードショートカットを変更することができます。*例えば、VimやSublime Text・Atomなどのキーマップに置き換えることができます。

【参考】：[Visual Studio Marketplace](https://marketplace.visualstudio.com/vscode)

具体的には、管理アイコンのメニューで「キーボード ショートカットを移行する...」をクリックすると、以下のようにマーケットプレイスからキーボードマップ変更のエミュレーションや設定のアプリが表示されます。

　【図】：マーケットプレイスのキーボート変更のアプリや設定

### キーボードショートカット一覧表

**キーボードショートカットは、Windows・macOS・Linuxそれぞれ公式サイトに一覧掲載されておりPDFファイルをダウンロードすることができます。**チートシートというわけでもありませんが、キーボード横に準備しておくと編集効率が上がりますので、大変おすすめです。

【参考】：[Visual Studio Code Keyboard Shortcuts Reference - Windows](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)
【参考】：[Visual Studio Code Keyboard Shortcuts Reference - macOS](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf)
【参考】：[Visual Studio Code Keyboard Shortcuts Reference - Linux](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf)

このリンクは事前準備せずとも、アプリの「ヘルプ」「キーボードショートカットの参照」からも表示させることができます。キーボードショートカットで、Ctrl+K Ctrl+Rを使っても表示可能です。

## デフォルトのキーバインディング

デフォルトのキーバインディングですが、*「Basic Editing」「Rich Languages Editing」「Navigation」「Editor/Window Management」「File Management」「Display」「Search」「Search Editor」「Preferences」「Debug」「Tasks」「Extensions」*など、カテゴリー別に多岐に渡ってあらかじめ設定されています。

【参考】：[Visual Studio Code Default Keyboard Shortcuts](https://code.visualstudio.com/docs/getstarted/keybindings#_default-keyboard-shortcuts)

使用しないものも多いと思いますが、事前に理解しておくのが良いでしょう。以降では、使用頻度が高いショートカットについて解説します。macOSについては、WindowsのCtrlキーをCmdキーに置き換えてご理解ください。

### 基本操作のキーバインディング

*基本操作で用いるキーバインディングは、以下の通りです。*WindowsとLinuxは同一です。macOSは、WindowsのCtrlキーをCmdキーに置き換えて動作する場合は記載を省略します。

・コマンドパレットを表示する：Ctrl+Shift+P、F1
・クイックオープン、ファイルへ移動：Ctrl+P
・新しいウィンドウ／インスタンスを作成する：Ctrl+Shift+N 
・ウィンドウ／インスタンスを閉じる：Ctrl+Shift+W 
　macOSでは、Cmd+Wとなります。
・キーボードショートカットエディタの表示：Ctrl+K Ctrl+S 

### 位置の移動とスクロール操作のキーバインディング

*位置の移動とスクロール操作のキーバインディングは、以下の通りです。*上記同様、WindowsとLinuxは同一で、macOSはWindowsのCtrlキーをCmdキーに置き換えて動作する場合は記載を省略します。

・行を上下に移動する：Alt+ ↑ ／ ↓ 
・一致する括弧にジャンプする：Ctrl+Shift+\ 
・行をインデント／アウトデントする：Ctrl+] ／ [ 
・行頭／行末に移動する：Home ／ End 
・ファイルの先頭に移動する：Ctrl+Home 
　macOSでは、Cmd+↑となります。
・ファイルの末尾に移動する：Ctrl+End 
　macOSでは、Cmd+↓となります。
・行を上下にスクロールする：Ctrl+↑ ／ ↓ 
　macOSでは、Ctrl+PgUp ／ PgDnとなります。
・ページを上下にスクロールする：Alt+PgUp ／ PgDown 
　macOSでは、Cmd+PgUp ／ PgDownとなります。

### コピー・削除操作のキーバインディング

*コピー・削除操作のキーバインディングは、以下の通りです。*Windowsを基準にしており、Linuxの差分とmacOSについても記載します。macOSは、WindowsのCtrlキーをCmdキーに置き換えて動作する場合は記載を省略します。

・ラインをカットする（選択範囲が空白の場合）：Ctrl+X 
・線をコピーする（選択範囲が空白の場合）：Ctrl+C 
・行を上下にコピーする：Shift+Alt + ↑ ／ ↓ 
　Linuxでは、キーバインドがマルチカーソルで使用されるため、該当ショートカットはありません。
・行を削除する：Ctrl+Shift+K 
・下の行を挿入する：Ctrl+Enter 
・上の行を挿入する：Ctrl+Shift+Enter 

### コメントとコメントアウト操作のキーバインディング

*コメントとコメントアウト操作のキーバインディングは、以下の通りです。*Windowsを基準にしており、Linuxの差分についても記載します。macOSは、WindowsのCtrlキーをCmdキーに置き換えて動作する場合は記載を省略します。

・行コメントを追加する：Ctrl+K Ctrl+C 
・行コメントを削除する：Ctrl+K Ctrl+U
・行コメントとコメントアウトのトグル切り替え：Ctrl+/ 
・ブロックコメントとコメントアウトのトグル切り替え：Shift+Alt+A 
　Linuxでは、Ctrl+Shift+Aとなります。

### 検索と置換のキーバインディング

*検索と置換のキーバインディングは、以下の通りです。*WindowsとLinuxは同一です。macOSは、WindowsのCtrlキーをCmdキーに置き換えて動作する場合は記載を省略します。

・検索：Ctrl+F 
・置換：Ctrl+H 
　macOSでは、Cmd+Alt+Fとなります。
・次を検索／前を検索：F3 ／ Shift+F3 
　macOSでは、Cmd+G ／Shift+Cmd+Gとなります。
・一致した検索結果の全出現箇所を選択する：Alt+Enter 
・選択を次の検索一致に追加する：Ctrl+D 
・最後の選択部分を次の検索マッチに移動する：Ctrl+K Ctrl+D 

## 慣れ親しんだキーバインディングで開発効率を高めましょう

Visual Studio Codeは、クロスプラットフォーム開発で用いられるソースコードエディタです。キーバインディングのカスタマイズ性が高く、人気の理由の1つになっています。職場と自宅、あるいは異なるプラットフォームで作業する場合には、開発環境の操作性を近づけるのが有効です。

**キーバインディングのカスタマイズ機能を有効活用し、ソフトウェア開発の効率向上を図りましょう。**

Visual Studio Code（VSCode）は、ほとんどの操作をキーボード操作のみで行うことができます。ここでは、開発作業を効率化する秘訣としてキーボードショートカットを取り上げます。エディタの操作から代表的なショートカットキーについて解説していきます。

Visual Studio Code（VSCode）は、キーボードショートカット機能に特長があります

多くの操作をキーボードのみで行なうことができ、カスタマイズ性が高いことが特長です

他のキーマップに差し替えることも可能で、高い開発生産性が期待できます

VS Code「Visual Studio Code」は、**Microsoftを中心に開発されている、オープンソースの高機能コードエディタ―です。**Windows／Linux／macOSのクロスプラットフォームに対応しており、世界中のエンジニアに利用されています。

VS Codeは高速性と安定性に優れたエディターで、コード編集や自動補完機能・フォーマッティング機能・デバッグ機能・Web構築に必要な処理の自動化（タスクランナー機能）・ソースコード管理のGitHubとの連携など、豊富な機能を有しています。

また、Azureクラウドを利用したリモート開発や共同開発にも対応しています。

【参考】：[Azure](https://azure.microsoft.com/ja-jp/)

クラウドエンジニアを目指す方必見！Azureを分かりやすく紹介！

VS Code自体の豊富な機能に加えて、優れたプラグイン（Plug in）が豊富にあります。プラグインとは拡張機能のことで、プラグインをインストールすることで、VS Codeをさらに便利に活用することができます。

プラグインを使わずにVS Codeだけでもコーディングはできますが、**プラグインを追加することでVS Codeの機能が拡張され、より効率的なコーディングが行えるようになります。**VS CodeプラグインはVS Codeと一体と考えて利用した方がよいでしょう。

VSCodeの記事（2ページ目）