ブログ
【WEB制作の基本】VSCodeの使い方
![【WEB制作の基本】VSCodeの使い方](https://fair-design.net/wp-content/uploads/2023/06/blog_image-sp2.png)
Visual Studio Code(ビジュアル・スタジオ・コード)はマイクロソフト社が開発提供しているテキストエディターです。
WindowsやmacOSなどで利用することができます。
この記事ではVisual Studio Codeのインストール方法や日本語化の方法、基本的な利用方法についてを解説していきます!
Visual Studio Codeとは
Visual Studio Code(ビジュアル・スタジオ・コード)とは、文字を入力するために使用するテキストエディタと呼ばれる種類のソフトで、Microsoftが開発・提供をしています。
プログラミングにおいて、主にはプログラムのコードを書くために使用され、軽量かつ高機能なことから多くのエンジニアが愛用しています。
略して、VSCodeとも呼ばれています。
VS Codeの特徴
(1)オープンソースなので誰でも無料で利用ができる
(2)Windows・Mac・Linuxなどの幅広いOSで利用ができる
(3)色付きでコードが見やすくなるハイライト機能がある
(4)コードの自動補完機能があり、効率的なプログラミングができる
(5)拡張機能という仕組みで機能を自由にカスタマイズできる
VSCodeのインストール方法
VSCodeをダウンロード
まずは、VSCode公式サイトのダウンロードページにアクセスしてください。
▼公式サイト
https://code.visualstudio.com/
公式サイトトップ画面の「Download for Windows」のボタンを選択すると、ダウンロードがスタートします。
![](https://fair-design.net/wp-content/uploads/2023/06/3c9b34c3-7ce1-45de-9d2f-0ff49616cc90.jpg)
VSCodeをインストール
ダウンロードしたファイルを選択して、イントールを開始します。
![](https://fair-design.net/wp-content/uploads/2023/06/72ae8508644a452d90218898cf16268d.jpg)
利用規約になりますので、「同意する」にチェックを入れて、「次へ」を選択します。
![](https://fair-design.net/wp-content/uploads/2023/06/8669fed7c43a2c68d46a7ecf0baf4594.png)
インストール先を選択しますが、特別理由がなければデフォルトの指定された場所で良いので、「次へ」を選択するとインストールが開始されます。
![](https://fair-design.net/wp-content/uploads/2023/06/fe0b134d99a12e49409352806853342b.png)
スタートメニューにショートカットを作成するか、選択が出来ます。
![](https://fair-design.net/wp-content/uploads/2023/06/4bb1d04c7063bae44e7228c80c14efb3.png)
デスクトップ上にアイコンを作成するか、選択が出来ます。
![](https://fair-design.net/wp-content/uploads/2023/06/5f57597bc14956835a9417935910a40d-1.png)
「インストール」を選択するとインストールが開始されます。
![](https://fair-design.net/wp-content/uploads/2023/06/fbd52afe03ba1c6a8ea7f64889e365b5.png)
インストールが完了後に、「完了」を選択してVSCodeを起動させます。
![](https://fair-design.net/wp-content/uploads/2023/06/53831f0548cf850de4839ac9f77b6de0.png)
日本語化する方法
サイドバーに表示されてい「Extensions」のアイコンを選択してください。
![](https://fair-design.net/wp-content/uploads/2023/08/58f0ada1896a2816866d41f144c73ba5.png)
Extensions の検索ボックスが表示されるので、「Japanese」と検索してください。表示された Extensions の一覧の中から「Japanese Language Pack for Visual Studio Code」を選択してください。
![](https://fair-design.net/wp-content/uploads/2023/08/44d29d2792be3bad9a9ed98c7bbb20d6.png)
拡張機能を選択したら「Install」のボタンを押して拡張機能をインストールをします。
![](https://fair-design.net/wp-content/uploads/2023/08/6d25d38cc1950754bc1d2c3ce31a3aa0.png)
インストールが完了したら再起動を行います。完了後に画面右下に「Restart」と表示されるので選択してください。
![](https://fair-design.net/wp-content/uploads/2023/08/66c19942ab4ba346fdb64ccc04cde373.jpg)