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