Visual Studio Code（VSCode）は、プログラミング初心者からプロの開発者まで幅広く愛用されている高機能な無料エディタです。
しかし、はじめて使う場合、インストールの手順やどの設定を行えばよいか戸惑う方も少なくありません。
このポストでは、VSCodeのインストール方法を、図解付きで丁寧に紹介します。また、インストール後にやっておきたい日本語化・テーマ設定・拡張機能の導入についても触れ、VSCodeを快適に使い始めるための準備を完全サポートします。
VS Codeインストール方法
インストール
まずはVSCodeの公式サイトへ向かいます。つまりマイクロソフトですね。
↑ まずはこちらから
使用しているOSに合ったインストールファイルをダウンロードします。
今回はWindows10 64bit版が対象ですので、一番左のWindow版、64bitの、User Installerをクリックしてダウンロード。
↑ 自分の環境にあったインストールファイルをダウンロード
次画面でしばらく待ちます。（１分ぐらい待った）
↑ しばし待ちます
ダウンロードしたファイル。（VSCodeUserSetup-x64-1.33.1.exe）
↑ サイズは47.8MB。
ダブルクリックしてインストール開始。
↑ 次へ進みます
↑ 「同意する」を選択肢、次へ
↑ 次へ進みます
↑ 次へ進みます
↑ 私は「デスクトップ上にアイコンを作成する」にチェックしました
↑ 準備完了ということで、インストールを開始します
↑ しばし待ちます
↑ 完了ボタン押下で完了。実行チェックがデフォルトでついているので。。。
↑ Visual Studio Codeが起動します
↑ 起動すると同時に、自動的にブラウザでこのページが開きました
日本語設定
インストールが完了した直後は英語版表示になっているので、日本語パックをインストールし、日本語化します。
- 「拡張機能」アイコンをクリック
- 検索窓に「japanese」と入力
- 表示された「Japanese Language Pack for Visual Studio Code」の Install ボタンをクリック
以上、３ステップで日本語化の準備が完了。非常に簡単。
↑ 日本語パックのインストール後はvscodeを再起動するかどうかのポップアップが右下に表示されるので、「Restart」を選択します。再起動後、表示されたときには日本語化されています。
ひとまずここでインストール作業は完了。
設定等は引き続き、このポストへ追加していきたいと思います。
PHPを編集するのに便利そうな拡張機能
ひとまず以下の拡張機能をインストールしてみました。
■Bracket Pair Colorizer
↑ 対応するカッコに色を付けて表示してくれる拡張機能です。
■PHP Intelephense
↑ PHPのコード補完、参照の検索や定義への移動などを行う拡張機能です。
覚えておきたいショートカットキー
個人的なメモも兼ねて、覚えておきたいショートカットキーを書いておきたいと思います。
■対応するカッコにジャンプする（PHPの場合？）
Ctrl+Shift + （右上の）\
↑キーボード右上の「￥」記号を利用します。
■指定行へジャンプする
Ctrl+G
■PowerShell(Windows), ターミナル（Mac） 起動
Win : Ctrl+@
Mac : Ctrl+Shift+@
関連するかもしれないポスト
