【Visual Studio Code】使い方/インストール方法を解説!

Visual Studio Codeの使い方・インストール方法を解説します。軽量テキストエディタとして話題のVisual Studio Codeの使い方・インストール方法を詳しく解説するので、Visual Studio Code初心者におすすめです。

 【Visual Studio Code】使い方/インストール方法を解説!のイメージ

目次

  1. 1. Visual Studio Codeとは
  2. 1-1. Visual Studio Codeの概要
  3. 2. Visual Studio Codeの特徴
  4. 2-1. Visual Studio Codeの良いところ
  5. 3. Visual Studio Codeの入手方法
  6. 3-1. Visual Studio Codeの入手先
  7. 4. Visual Studio Codeのインストール方法
  8. 4-1. Windows版のインストール
  9. 4-2. Mac OS版
  10. 5. Visual Studio Codeの使い方〜画面構成〜
  11. 5-1. 画面構成
  12. 6. Visual Studio Codeの使い方〜主な機能〜
  13. 6-1. 主な機能
  14. 7. Visual Studio Codeの使い方〜画面の設定〜
  15. 7-1. 画面の設定方法
  16. 8. Visual Studio Codeの使い方〜注意点〜
  17. 8-1. 文字化けに注意
  18. 8-2. 合わせて読みたい!テキストエディタに関する記事一覧

Visual Studio Codeとは

本記事ではVisual Studio Codeの使い方・インストール方法を解説します。まず初めに、Visual Studio Codeとはどの様なソフトかを解説しますので、Visual Studio Codeとは何まだ分からない方は参考にしてください。

また、Visual Studio Codeをすでにインストールしていても使い方がわからない方も多いかと思います。Visual Studio Codeの入手先からインストール方法、特徴や使い方、拡張機能の使い方、注意点などの解説も行いますのでご参照ください。

Visual Studio Codeの概要

はじめにVisual Studio Codeとは何かVisual Studio Codeの概要を解説します。Visual Studio Codeの使い方や入手先以前にVisual Studio Codeとはどの様なソフトかわからない方は、本項から読み進めてください。

また、Visual Studio Codeとはどの様なソフトか概要を解説時に、現在利用しているテキストエディタなどがあればそれと機能や特徴を比べてもVisual Studio Codeとはなにか理解するのに役立ちますので準備してください。

多くのプログラミング言語に対応するテキストエディタ

Visual Studio Codeとは、多くのプログラミング言語に対応するテキストエディタです。そのため、Visual Studio Codeを利用すれば言語ごとにテキストエディタをインストール必要はなくVisual Studio Codeにまとめることができます。

また、Visual Studio Codeは多くのプログラミング言語の他に文字コードも複数設定する方法や拡張機能をりようする方法がありますので複数の言語を利用するエンジニアにはVisual Studio Codeは最適なテキストエディタと言えるでしょう。

テキストエディタとは

Visual Studio Codeとは、多くのプログラミング言語に対応するテキストエディタだと解説しましたが、まずテキストエディタとは何か分からない方もいらっしゃるかもしれませんので、テキストエディタについて解説します。

テキストエディタとは、プログラミングを行う際にプログラムを記述するためのソフトのことを言います。テキストエディタには対応した言語の特定の関数や命令をグラフィカルに表示したり、プログラミングを補助する機能があります。

実は、Windowsに標準搭載されているメモ帳でもC言語やJavaなどのプログラムソースファイルを開くことができますが、メモ帳には一切のプログラミング補助機能がありません。

テキストエディタで作成したプログラムはコマンドラインなどを用いてコンパイルしなければ動作させることができません。その点、IDEを利用すればコンパイラも統合されているので非常に便利です。

しかし、コンパイラなどを搭載している関係でテキストエディタと比べて、起動や動作に時間がかかるソフトもあります。自分の用途に合わせてテキストエディタとIDEを使い分けるのがよいでしょう。

Visual Studio Codeは非常に高機能なテキストエディタですので、単純なテキストエディタとIDEの中間を求めている方に最適なテキストエディタです。

Visual Studio Codeの特徴

Visual Studio Codeの特徴をご紹介します。Visual Studio Codeとは、Visual Studio Codeという名前にVisual Studioとついている名前から分かる通りマイクロソフトが開発を行ったテキストエディタです。

マイクロソフトはすでに圧倒的なシェアを占めているIDEである、Visual Studioを開発していたにもかかわらずなぜVisual Studio Codeをリリースしたのでしょうか?また、すでにVisual Studioを利用している方も多いかと思います。

Visual Studio Codeの特徴を知れば、Visual Studio CodeとVisual Studioの使い分けやなぜVisual Studio Codeがリリースされたのかを理解することができます。Visual Studioをすでに利用している方もVisual Studio Codeの特徴を参考にしてください。

Visual Studio Codeの良いところ

他のテキストエディタと比較したVisual Studio Codeの特徴を解説します。Visual Studio Codeの特徴を正しく理解して、自分の用途に適したテキストエディタを利用しましょう。

起動/動作が速い

1つ目の特徴を解説します。Visual StudioはIDEですが、Visual Studio Codeはテキストエディタです。そのため、コンパイラやデバッガ、GUIデザイナなどの開発ツールは統合されていません。よって、Visual Studio Codeは起動・動作が早いです。

しかし、Visual Studio Codeはテキストエディタですが拡張機能に対応しており対応した拡張機能をインストールすることによりデバッグ機能など通常はIDEで提供される機能を追加することができます。

そのため、場合によってはVisual StudioなどのIDEで行うような作業でもテキストエディタであるVisual Studio Codeを使ったほうが動作が早い可能性があります。

高機能

2つ目の特徴を解説します。Visual Studio Codeは、統合開発環境とは異なりテキストエディタのため、コンパイラやデバッガなどは搭載されませんが、優秀なインテリセンスや拡張機能・洗礼された画面構成で構成されるため高機能です。

インテリセンスとは、コード補完やパラメーター、スタックなどのインフォ表示機能など、プログラムを記述するための補助機能のことです。Visual Studio Codeは非常に優れたインテリセンス機能を持っています。

無料

3つ目の特徴を解説します。Visual Studio Codeは無料で利用することができます。Visual Studio Codeは無料で入手先からダウンロードでき、インストールして利用することができるテキストエディタです。

Visual Studio Codeはオープンソースであるvccodeをもとに作成されていますが、Visual Studio Codeのライセンスはマイクロソフトソフトウェアライセンス条項によりライセンスされています。オープンソースではありません。

Visual StudioとVisual Studio Code

Visual StudioとVisual Studio Codeは名前が似ており、どちらもマイクロソフトが開発を行ったプログラミングのためのソフトですが、それぞれには大きな違いがあります。

Visual StudioとVisual Studio Codeの違いとは、Visual StudioはIDEでありVisual Studio Codeはテキストエディタであることです。IDEとは統合開発環境のことです。

統合開発環境とはテキストエディタ以外にコンパイラやデバッガ、GUIデザイナなどのプログラムのテキストエディット以外にもソフトウェア作成に必要となる機能やコンパイラが統合されている開発環境です。

関連記事
「VisualStudio」が使える?導入手順をくわしく解説!

Visual Studio Codeの入手方法

Visual Studio Codeの入手先と入手方法を解説します。Visual Studio Codeを入手するにはVisual Studio Codeの入手先よりダウンロードしてVisual Studio Codeを入手します。

また、Visual Studio Codeの特徴の項の3つ目の特徴で紹介したとおり、Visual Studio Codeは無料で入手先からダウンロードしてインストールすることができます。無料ですのでお手軽にVisual Studio Codeを試すことができます。

Visual Studio Codeの入手先

Visual Studio Codeの入手先は本項下部の、「Visual Studio Code - Code Editing. Redefined」リンクから参照できます。Visual Studio Codeの入手先は英語ですが、初心者の方にも分かるよう、入手先からのダウンロード方法を解説します。

Visual Studio Codeダウンロード方法

Visual Studio Codeのダウンロード方法を解説します。Visual Studio Codeは本項下記の入手先からダウンロードしてインストールすることができますので、まず初めに本項下部のVisual Studio Code入手先へアクアセスしてください。

ダウンロード-公式サイト

Visual Studio Codeの入手先へは下記リンクからアクセスできます。Visual Studio Code入手先リンクからVisual Studio Code公式サイトへアクセスしてください。

Visual Studio Code - Code Editing. Redefined
関連記事
【Clevノート:メモ帳、チェックリスト】実用的なメモ帳アプリを紹介!

Visual Studio Codeのインストール方法

Visual Studio Codeのインストール方法を解説します。また、Visual Studio Codeインストール方法と合わせてWindowsとMacOSそれぞれのVisual Studio Codeダウンロード方法の解説も行います。

Windows版のインストール

Windows版Visual Studio Codeのインストール方法を解説します。Windows版には64bit版と32bit版があり、それぞれインストールするVisual Studio Codeの実行ファイルが異なります。インストール前に自身のWindowsのビット数を確認しましょう。

「システムの種類」の確認方法

システムの種類確認-スタートボタン

Visual Studio Codeインストール前に利用中のWindowsのビット数を確認します。まず初めに、デスクトップ画面のスタートボタンをクリックします。

システムの種類確認-コントロールパネル

スタートボタンをクリックしたら、コントロールパネルを選択して、コントロールパネルを開きます。

システムの種類確認-システムとセキュリティ

コントロールパネルのシステムとセキュリティを開きます。

システムの種類確認-システム

システムとセキュリティの中のシステムを開きます。

システムの種類確認-システムの種類

システムの中のシステムの種類に、現在利用中(Visual Studio Codeをインストールする)のコンピュータのビット数が表示されるのでそれを確認しておきます。

公式サイトで「Windows」を選択

ダウンロード-Windows-矢印

Visual Studio Code入手先リンクからVisual Studio Code公式サイトへアクセスしてWindowsにインストールすることができるVisual Studio Codeをダウンロードします。Download for Windows の右の矢印をクリックします。

ダウンロード-Windows-種類-安定版

Visual Studio Code入手先からダウンロードできるVisual Studio Codeには2種類あります。まず1つ目は通常の一般ユーザが利用する安定版です。特に理由がなければこちらをインストールします。

ダウンロード-Windows-種類-開発者向け

もう一つは開発者向けビルドパッケージです。最新版を利用することができますが、まだ不具合やバグが多く存在する可能性がありますので、その点に留意してインストールしましょう。

ダウンロード-Windows-x64

Windows 64ビット版をダウンロードするには、ダウンロードボタンをクリックします。

ダウンロード-Windows-Linux x64

また、Windowsの下のリンクからLinux版もダウンロードすることができます。

Windows 32ビット版

ダウンロード-Windows-Other

Windows32bit版をインストールしたい方は、Other downloadsをクリックします。

ダウンロード-Windows-32bit

Windows 32bit版のリンクが表示されるのでそこからインストールしたいインストーラを選択してダウンロードします。

ダウンロード-Windows-保存先を指定

ダウンロードリンクをクリックしたら、ファイルの保存先を指定します。

ダウンロード-Windows-保存

ファイルの保存先を指定したら、保存ボタンをクリックします。

ダウンロード-Windows-ダウンロード完了

ダウンロードが完了したらVisual Studio Codeの入手は完了です。

セットアップの手順

セットアップ-インストーラ実行

Visual Studio Codeのセットアップを行うにはダウンロードした、Visual Studio Codeのインストーラを実行します。

セットアップ-規約

Visual Studio Codeの利用規約が出てくるので、規約を読んで同意ができたら、同意をクリックします。

セットアップ-規約-次へ

同意をクリックしたら次へをクリックします。

セットアップ-インストール先

インストール先を指定して次へをクリックします。

セットアップ-ショートカット作成

スタートメニューのショートカットディレクトリを指定して次へをクリックします。

セットアップ-インストールオプション-デスクトップショートカット

Visual Studio Codeインストールオプションを選択します。デスクトップにショートカットを作成するにはその選択肢をクリックします。

セットアップ-インストールオプション-ファイルコンテキスト

Visual Studio Codeインストールオプションを選択します。ファイルコンテキストメニューから開けるようにするにはその選択肢をクリックします。

セットアップ-インストールオプション-ディレクトリコンテキストメニュー

Visual Studio Codeインストールオプションを選択します。ディレクトリコンテキストメニューから開けるようにするにはその選択肢をクリックします。

セットアップ-インストールオプション-VS関連付け

Visual Studio Codeインストールオプションを選択します。Visual Studio Codeの関連付けをするにはその選択肢をクリックします。

セットアップ-インストールオプション-PATH

Visual Studio Codeインストールオプションを選択します。Visual Studio CodeのPATHを通すにはその選択肢をクリックします。ただしこちらはデフォルトで選択されています。

セットアップ-インストールオプション-次へ

Visual Studio Codeインストールオプションを選択したら、次へをクリックします。

セットアップ-準備完了

Visual Studio Codeのインストール準備が完了するので、インストールをクリックします。

セットアップ-インストール中

Visual Studio Codeのインストールが始まるので待ちます。

セットアップ-完了

Visual Studio Codeのインストールが完了したら、完了をクリックします。

セットアップ-インストール完了

Visual Studio Codeが正常起動できればVisual Studio Codeのインストールは成功です。

Download Visual Studio Code - Mac, Linux, Windows

Mac OS版

Visual Studio CodeのMac OS版のセットアップ方法を解説します。

MacOS版のダウンロード

ダウンロード-MacOS-公式サイト

Visual Studio Code MacOS版もVisual Studio Code入手先リンクから入手可能です。

ダウンロード-MacOS-矢印

Visual Studio Code入手先リンクのダウンロードボタンの矢印をクリックします。

公式サイトで「Mac」を選択

ダウンロード-MacOS-安定版ダウンロード

macOS欄の安定版をダウンロードしましょう。

セットアップの手順

Visual Studio Code Mac版のインストーラがダウンロードできたら、インストーラを実行してください。インストール方法はWindows版を参考にしてください。

Download Visual Studio Code - Mac, Linux, Windows
関連記事
「Myメモ」アプリを紹介!タブ分けできて便利なメモ帳!

Visual Studio Codeの使い方〜画面構成〜

Visual Studio Codeの画面構成を解説します。Visual Studio Codeの画面構成は非常にシンプルで洗礼されていますので、画面構成を理解して各画面で何をすることができるのか理解しましょう。

画面構成

Visual Studio Codeの画面構成を解説します。Visual Studio Codeの画面構成はいくつかの画面・パネルに分かれた構成担っているのでそれぞれの画面構成を解説します。

Visual Studio Codeの画面構成はいくつかの機能を持ったパネルそれぞれ組み合わされて構成されています。それぞれの構成されているパネルに役割があります。

アクティビティバー

画面構成-アクティビティバー

Visual Studio Code起動後画面左側にあるのが、アクティビティバーです。検索や拡張機能の検索などを行えます。

サイドバー

画面構成-サイドバー

アクティビティバーの隣りにある画面がサイドバーです。サイドバーではエラー表示などが行われます。

エディタ

画面構成-エディタ

Visual Studio Codeの画面上で、コードが表示されている部分がエディタです。Visual Studio Codeのメインとなる部分でここでコードを記述します。

パネル

画面構成-パネル

エディタの下にあるのがパネルです。ターミナルなどの機能から構成されている部分です。

ステータスバー

画面構成-ステータスバー

Visual Studio Code一番下に表示されているのがステータスバーです。現在のエラー・警告数や文字コードなどのステータスが表示されています。

関連記事
女子向けの「かわいいメモ帳」無料アプリおすすめ6選!
関連記事
【Android】「高速メモ帳」アプリの使い方を詳しく解説!

Visual Studio Codeの使い方〜主な機能〜

Visual Studio Codeの主な機能を紹介します。非常に多くのテキストエディタがありますが、Visual Studio Codeをおすすめする理由にもなる部分ですので参考にしてください。

また、本項で紹介する拡張機能を利用すればテキストエディタであるVisual Studio CodeにIDEでしか提供されないようなデバッグ機能やGit連携機能を追加することも可能です。

主な機能

Visual Studio Codeで利用可能な主な機能を解説します。また、一部機能については拡張機能としてパッケージをインストールする必要がありますので、拡張機能を利用する部分については拡張機能入手方法も紹介します。

Visual Studio Codeは本項で紹介するコード自動補完機能が非常に優秀であり、またシンタックスハイライトも非常に見やすくて使いやすい配色で開発されています。そのため、コードを長く入力する方に非常におすすめです。

シンタックスハイライトとコード自動補完機能を利用すれば他のIDEと変わらないような速度で開発を行うことができるかもしれません。参考にしてください。

シンタックスハイライト

機能-シンタックスハイライト

Visual Studio Codeには多くのシンタックスハイライト機能があります。シンタックスハイライト機能のおかげで非常に分かりやすくコードを記述することができます。シンタックスハイライトはコード記述の補助機能です。

デバッグ機能

機能-デバッグ-アイコン

Visual Studio Codeは拡張機能を利用してデバッグ機能を加えることができます。左側のアイコンをクリックします。

機能-デバッグ-拡張機能検索

利用したいデバッグ拡張機能を検索します。言語名+debugなどで調べると良いでしょう。

機能-デバッグ-拡張機能

検索するとデバッグ拡張機能が表示されます。

機能-デバッグ-拡張機能インストール

対象の拡張機能をインストールします。

コードの自動補完

機能-自動補完

Visual Studio Codeには対応した言語のコード自動補完機能があります。IDEではよく見られる機能ですが、テキストエディタであるVisual Studio Codeにもコード自動補完機能があります。

Git連携機能

機能-git-アイコン

Visual Studio Codeは拡張機能を利用して、Gitと連携させることができます。Visual Studio CodeにGit連携拡張機能を追加するには左側のアイコンをクリックします。

機能-git-拡張機能検索

Git連携に利用したい拡張機能を検索します。

機能-git-拡張機能

Git関連の拡張機能は非常に多くありますので自分の用途に適した拡張機能を選択します。

機能-git-拡張機能インストール

自分の用途に適した拡張機能を見つけたらインストールをクリックします。

拡張機能

機能-拡張機能-アイコン

Visual Studio Codeでは非常に多くの拡張機能を利用することができます。拡張機能を利用するには左側のアイコンをクリックします。

機能-拡張機能-拡張機能検索

拡張機能を検索します。

機能-拡張機能-拡張機能

追加したい拡張機能を表示します。

機能-拡張機能-拡張機能インストール

拡張機能をインストールします。

関連記事
シンプルな「メモ帳アプリ」のおすすめ11選!

Visual Studio Codeの使い方〜画面の設定〜

Visual Studio Codeでは配色テーマを変更することができます。

画面の設定方法

Visual Studio Codeの配色テーマは画面の設定から行います。

配色テーマ

配色テーマ-File

Visual Studio Codeを起動してFileをクリックします。

配色テーマ-Performance

Performanceを選択します。

配色テーマ-Setting

Settingをクリックします。

配色テーマ-theme

検索枠にthemeと入力します。

配色テーマ-Color Theme

Color Themeというタイトルの項目を探してください。

配色テーマ-テーマ設定

ColorThemeの項目に現在のテーマが表示されているのでクリックします。

配色テーマ-テーマ選択

お好きな配色テーマを選択してください。

配色テーマ-テーマ設定完了

新しいテーマが適応されます。

日本語設定

日本語化-アイコン

Visual Studio Codeは日本語化パックを導入することにより日本語で利用できます。

日本語化-言語パック検索

検索ボックスに、導入したい言語パック名を入力します。大抵の言語は、利用したい言語(英語)+Languageの検索で見つけることができます。

日本語化-言語パック

自分の用途に適した日本語化パックを表示します。

日本語化-言語パックインストール

日本語化パックをインストールします。

日本語化-RestartNow

言語パック導入後は再起動を促されるので、Visual Studio Codeを再起動します。

日本語化-日本語化成功

言語パックが適応されます。

Visual Studio Codeの使い方〜注意点〜

Visual Studio Codeを利用する際にはいくつか注意点があります。本項ではVisual Studio Codeを利用する上での注意点を解説します。特に本項で解説する注意点である文字コードの注意点は非常に重要な注意点ですので注意してください。

本項で紹介する注意点である、文字コードの注意点はVisual Studio Codeだけでなく他のテキストエディタを利用する上でも非常に重要な注意点となります。

文字化けに注意

Visual Studio Codeを利用する上で非常に重要な注意点である、文字コードについて紹介します。この注意点で解説する文字コードの設定を誤ると、文字化けなどに繋がる非常に重要な注意点です。

Visual Studio Code以外にも他のテキストエディタでも文字コードは非常に重要な注意点となります。本項で解説している文字コードについての注意点は特に注意しておきましょう。

文字化け

文字化けした場合、日本語部分が正常に表示できません。

文字コードの設定方法

文字コード-File

文字コードを変更するには、Fileをクリックします。

文字コード-Performance

Performanceを選択してください。

文字コード-Setting

Settingを選択してください。

文字コード-設定検索

検索ボックスに、files.autoGuessEncodingと入力します。

文字コード-AutoGuessEnc

files.autoGuessEncodingの項目を見つけてください。

文字コード-AutoGuessEncチェック

files.autoGuessEncodingにチェックを入れます。

文字コード-AutoGuessEncチェック完了

files.autoGuessEncodingにチェックが入れば完了です。

文字コード-文字コードの自動選択

自動的に正しい文字コードが反映されて日本語が正常に表示されます。

任意の文字コードを指定する

文字コード任意指定-File

Visual Studio Codeは任意の文字コードを指定することができます。本項では任意の文字コードの使い方を解説します。

文字コード任意指定-Performance

Performanceをクリックします。

文字コード任意指定-Setting

Settingをクリックします。

文字コード任意指定-files.enc検索

検索ボックスに、files.encodeingと入力します。

文字コード任意指定-File:Encode

File:Encodeを選択します。

文字コード任意指定-文字コード選択

ソースコードや使い方に合わせた文字コードを選択してください。

文字コード任意指定-utf-8

文字コードは日本語を正常に表示するためには、使い方にもよりますがUTF-8をおすすめします。

合わせて読みたい!テキストエディタに関する記事一覧

関連記事
【Ubuntu】「Visual Studio Code」をインストールする方法!
関連記事
無料テキストエディタ「Mery」の便利機能と使い方を徹底解説
関連記事
【Mac】フリーテキストエディタ17選!おすすめのテキストエディタは?
関連記事
Mac標準メモ帳の便利な使い方まとめ!メモ帳アプリを使いこなそう

関連するまとめ

Original
この記事のライター
suncat

人気の記事

人気のあるまとめランキング

新着一覧

最近公開されたまとめ