![](https://hrdyuic.com/wp-content/uploads/8335d558d151e09a696fb916ebabfbd5.png)
Web制作で使うテキストエディターに「Visual Studio Code(VSCode)」を考えているんだけどインストール方法を教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- Visual Studio Codeをダウンロードからインストールする方法
- Visual Studio Codeを日本語対応させる方法
![](https://hrdyuic.com/wp-content/uploads/growtika-9WnjxT1NCoY-unsplash.jpg)
![](https://hrdyuic.com/wp-content/uploads/growtika-9WnjxT1NCoY-unsplash.jpg)
![](https://hrdyuic.com/wp-content/uploads/plug-ge9236baff_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/plug-ge9236baff_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/evelyn-clement-TjvEfjXIb_s-unsplash.jpg)
![](https://hrdyuic.com/wp-content/uploads/evelyn-clement-TjvEfjXIb_s-unsplash.jpg)
是非、最後までご覧ください。
VSCodeをインストールと日本語対応する方法
「Visual Studio Code」の公式サイトにアクセスします。
![](https://code.visualstudio.com/opengraphimg/opengraph-home.png)
![](https://code.visualstudio.com/opengraphimg/opengraph-home.png)
アクセスするとPCのOSに合わせたダウンロードボタンが表示されます。
「Dounload Mac Universal」をクリックするとダウンロードが開始されます。
![](https://hrdyuic.com/wp-content/uploads/90e1144e5ee78f977d776511572c6d77.jpg)
![](https://hrdyuic.com/wp-content/uploads/90e1144e5ee78f977d776511572c6d77.jpg)
ダウンロードが完了しました。
ダウンロードされた「VSCode-darwin-universal.zip」をクリックします。
![](https://hrdyuic.com/wp-content/uploads/097979e8fd628d9341bcb8b07d4afad2.jpg)
![](https://hrdyuic.com/wp-content/uploads/097979e8fd628d9341bcb8b07d4afad2.jpg)
すると「”VSCode-darwin-universal.zip”を展開中…」と表示されます。
![](https://hrdyuic.com/wp-content/uploads/337b7fed32def9e4c6ddd27d8a7ec9c4.jpg)
![](https://hrdyuic.com/wp-content/uploads/337b7fed32def9e4c6ddd27d8a7ec9c4.jpg)
「VSCode-darwin-universal.zip」が展開されました。
展開された「Visual Studio Code.app」をアプリケーションにドラッグ&ドロップします。
![](https://hrdyuic.com/wp-content/uploads/f86a4af185728e4ecc525072ef94e0fa.jpg)
![](https://hrdyuic.com/wp-content/uploads/f86a4af185728e4ecc525072ef94e0fa.jpg)
「VSCode-darwin-universal.zip」は削除してOKです。
![](https://hrdyuic.com/wp-content/uploads/ba52a0d3d62eaf40647063f9e96b6fae.jpg)
![](https://hrdyuic.com/wp-content/uploads/ba52a0d3d62eaf40647063f9e96b6fae.jpg)
「Visual Studio Code.app」を開きます。
アプリケーションフォルダを開くとドラッグ&ドロップした「Visual Studio Code.app」が入っています。
![](https://hrdyuic.com/wp-content/uploads/9b21a85af3dfe3b566d1fa5b7e87e0a1.jpg)
![](https://hrdyuic.com/wp-content/uploads/9b21a85af3dfe3b566d1fa5b7e87e0a1.jpg)
「Visual Studio Code.app」をダブルクリックすると、下記画像が表示されるので「開く」をクリックします。
![](https://hrdyuic.com/wp-content/uploads/f29542f42d418766a26fa4f1dfc8f00d.jpg)
![](https://hrdyuic.com/wp-content/uploads/f29542f42d418766a26fa4f1dfc8f00d.jpg)
すると、再度「”VSCode-darwin-universal.zip”を展開中…」と表示されます。
![](https://hrdyuic.com/wp-content/uploads/337b7fed32def9e4c6ddd27d8a7ec9c4.jpg)
![](https://hrdyuic.com/wp-content/uploads/337b7fed32def9e4c6ddd27d8a7ec9c4.jpg)
「Visual Studio Code」が開きました。
![](https://hrdyuic.com/wp-content/uploads/2b7b9ef2323c09fd0fc846706a6f9044.jpg)
![](https://hrdyuic.com/wp-content/uploads/2b7b9ef2323c09fd0fc846706a6f9044.jpg)
「Visual Studio Code」が日本語対応させます。
開くと「表示言語を日本語に変更するには言語パックをインストールします。」と表示されますので、「インストールして再起動」をクリックします。
![](https://hrdyuic.com/wp-content/uploads/b88fdd20a890bbdb364a9111d082df9a.jpg)
![](https://hrdyuic.com/wp-content/uploads/b88fdd20a890bbdb364a9111d082df9a.jpg)
Visual Studio Codeが10秒ほどで再起動され日本語に変わります。
拡張機能を開きます。
拡張機能(
が四つのマーク)をクリックすると、Visual Studio Codeを日本語対応にする「Japanese Language Pack for Visual Studio Code」がインストールされています。![](https://hrdyuic.com/wp-content/uploads/3dd5bc63a93e65162981932a690711df.jpg)
![](https://hrdyuic.com/wp-content/uploads/3dd5bc63a93e65162981932a690711df.jpg)
「ウェルカムページ」を非表示にさせます。
Visual Studio Codeを開く度に下記画像の「ウェルカムページ」を表示させたくない場合には、「起動時にウェルカムページを表示」のチェックを外し「
」で閉じます。![](https://hrdyuic.com/wp-content/uploads/160c5987259f465dd63e353911d15ecf.jpg)
![](https://hrdyuic.com/wp-content/uploads/160c5987259f465dd63e353911d15ecf.jpg)
その後、Visual Studio Codeも「
」で閉じます。![](https://hrdyuic.com/wp-content/uploads/6937e91ded1a1c7e1280da1ffa0d6ff9.jpg)
![](https://hrdyuic.com/wp-content/uploads/6937e91ded1a1c7e1280da1ffa0d6ff9.jpg)
そして、Visual Studio Codeを再度開くと「ウェルカムページ」が表示されなくなっています。
![](https://hrdyuic.com/wp-content/uploads/9036609dbc732d7a7780694307228a49.jpg)
![](https://hrdyuic.com/wp-content/uploads/9036609dbc732d7a7780694307228a49.jpg)
「ウェルカムページ」は「ヘルプ」>「ようこそ」でいつでも非表示から表示に切り替えることができます。
![](https://hrdyuic.com/wp-content/uploads/2bf487e653782897c4724eb907fa51d8.jpg)
![](https://hrdyuic.com/wp-content/uploads/2bf487e653782897c4724eb907fa51d8.jpg)
![](https://hrdyuic.com/wp-content/uploads/growtika-9WnjxT1NCoY-unsplash.jpg)
![](https://hrdyuic.com/wp-content/uploads/growtika-9WnjxT1NCoY-unsplash.jpg)
今回は以上です。