Visual Studio Code(VSCode)とは、エディターと言われるもので、プログラミングのコードを書くためのツールです。使い勝手がよく、進化のスピードが速いため、今後デファクトスタンダードになっていくと思われます。
ここでは、インストールの方法から、基本的な使い方、便利な拡張機能をご紹介していきます。
Visual Studio Codeのダウンロード
こちらからVisual Studio Codeのダウンロードページを開きます。
Download now(今すぐダウンロード)をクリックします。
![VSCodeのダウンロード](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_download_1_compressed-1024x664.png)
Windowsをクリックしてダウンロードします。
![VSCodeのダウンロード](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_download_2_compressed-1024x811.png)
Visual Studio Codeのインストール
ダウンロードしたインストーラー「VSCodeUserSetup-x64-<バージョン>.exe」をダブルクリックして実行します。
以下の通り選択しながら進めます。
![VSCodeのインストール](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_install_1_compressed-1024x757.png)
![VSCodeのインストール](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_install_2_compressed-1024x759.png)
![VSCodeのインストール](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_install_3_compressed-1024x760.png)
![VSCodeのインストール](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_install_4_compressed-1024x758.png)
![VSCodeのインストール](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_install_5_compressed-1024x761.png)
インストールが開始します。
![VSCodeのインストール](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_install_6_compressed-1024x759.png)
インストール完了後、完了ボタンを押すと、Visual Studio Codeが起動することを確認します。
![VSCodeのインストール](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_install_7_compressed-1024x758.png)
いったん、Visual Studio Codeを閉じて、OSを再起動して下さい。
再起動したら、デスクトップ上にある「Visual Studio Code」をダブルクリックして起動します。
Visual Studio Codeの日本語化
Visual Studio Codeのサイドバーから「extensions」を選択し、検索窓に「Japanese Language Pack for Visual Studio Code」と入力して検索します。ヒットしたら「Install」ボタンを押してインストールします。
![VSCodeの拡張機能](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_extensions_1_compressed-1024x766.png)
インストールできたら、Visual Studio Codeを再起動します。
Visual Studio Codeが日本語表記になっていればOKです。
Visual Studio Codeの基本的な使い方
基本的な使い方として、Visual Studio Codeで任意のフォルダを開き、そのフォルダの中にファイルを作成する例を示します。
以下の通り、「フォルダーを開く」を選択します。
Visual Studio Codeはフォルダ単位で管理されます。
![VSCode](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_1_compressed-1024x768.png)
「C:\xampp\htdocs」フォルダを選択します。
![VSCode](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_2_compressed-1024x766.png)
「このフォルダー内のファイルの作成者を信頼しますか?」と聞かれたら、「はい、作成者を信頼します」を選択します。
![VSCode](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_3_compressed-1024x765.png)
![VSCode](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_4_compressed-1024x766.png)
以下の通り、ファイルを作成します。
![VSCode](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_5_compressed-1024x769.png)
![VSCode](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_6_compressed-1024x765.png)
当該ファイルを適当に編集してみます。
![VSCode](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_7_compressed-1024x769.png)
キーボードで「Ctrl」と「S」を同時に押すと、編集内容が保存されます。
![VSCode](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_8_compressed-1024x767.png)
※今後のカリキュラムを行うにあたり、「C:\xampp\htdocs」フォルダ内の、全てのフォルダ・ファイルは削除しておきます。以下のように削除します。
![VSCode](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_9_compressed-1024x766.png)
同様に、htmlフォルダ、imgフォルダ…を選択して全て削除して下さい。
全て削除したら、以下のようにHTDOCSフォルダのみ見えていればOKです。
![VSCode](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_10_compressed-1024x767.png)
Visual Studio Codeの便利な拡張機能
Visual Studio Codeの便利な拡張機能の紹介です。
必要に応じてインストールしてみて下さい。使いにくいと思ったら、当該拡張機能をアンインストールすれば元に戻るので安心して下さい。
zenkaku
全角のスペースの部分を白くハイライトしてくれます。
プログラムでは全角スペースがあると正しく動かないことが多いです。半角スペースでコーディングしたつもりなのに実は全角スペースだった、というミスに気づきやすくなります。
![VSCodeの拡張機能](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_extensions_2_compressed-1024x164.png)
indent-rainbow
インデントに4色の色をつけてくれます。
きれいなコードを書くために、インデントを揃えるのはプログラムの基本的なマナーです。本拡張機能をインストールすることで、インデントの崩れなどに気づきやすくなります。
![VSCodeの拡張機能](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_extensions_3_compressed-1024x165.png)
Auto Save
Auto Saveは拡張機能ではなく、Visual Studio Codeの設定になります。
Visual Studio Codeの左下の歯車 > 設定 > Auto Save OFF > afterDelayへ変更します。
![VSCodeの設定](http://tech-popeye.com/wp-content/uploads/2021/09/vscode_extensions_4_compressed-1024x766.png)
afterDelayにすることで、前述のように「Ctrl」と「S」をしなくても、コードの内容が自動で保存されるようになります。
経験が浅い方には便利に感じると思います。しかし、Webエンジニアとして成長するほど、勝手に保存されるのが煩わしくなってくるかもしれません。
本節の説明は以上になります。