Visual Studio Code基本的な使い方3選｜拡張機能も解説

Visual Studio

Visual Studio
開発環境(IDE)

公開日時: 2020-04-13 　更新日時: 2022-06-07

この記事でわかること

プログラマー: Visual Studio Codeは人気のエディタですよね。まわりのみんなも使っていますし。どんな機能があるんですか？

プロジェクト マネージャー: この記事で基礎から機能を説明しますね。また、Visual Studio Codeのインストール方法について知りたい方は、下記の記事を参考にしてみてください。

Visual Studio Codeとは

Visual Studio CodeはMicrosoftが作成したエディターです。
Windows、macOS、および Linux で使用できます。
誰でも無償で利用でき、c++、c言語、Java、Python、PHP、Go などを使用できるエディターになっています。
今回はそんなVisual Studio Codeの使い方について紹介していきます。

【Visual Studio Code】基本的な使い方3選

Visual Studio Codeの使い方について記載していきます。
まずは基本的な使い方として、
1.ダウンロード・インストール方法
2.Visual Studio Codeの画面構成と日本語化について
3.ファイルの作成や保存の仕方について
上記3つについて記載していきます。

1：ダウンロード・インストール

まずはMicrosoft AzureのVisual Studio Codeを開きます。
そこから今すぐダウンロードをクリックします。
Visual Studio Codeのダウンロードという画面に飛びますので、自分の使っているノートPCに合わせた物を選択してください。
Windowsの場合、左にあるアイコンを、Macなら右にあるアイコンをクリックします。
そうするとインストーラーが起動するので、インストールしてください。

2：Visual Studio Codeの画面構成と日本語化

ここからは、インストールが済んでいるという前提で進めていきたいと思います。
はじめに、Visual Studio Codeの画面構成について簡単に把握しておきましょう。
下記画面をご覧ください。
最初の画面

こちらが、Visual Studio Codeを最初に開いたときに表示される画面です。ウェルカムページといわれています。
デフォルトは英語表記になっていますので、まずは日本語表記に変えておきましょう。
※英語表記のままで問題ない、という方は飛ばしてください。

表示言語の変更は以下の手順で行うことができます。

左下の設定マーク＞「Extensions」を選択
設定マーク選択
※Ctrl+Shift+Xでも可能です。

検索ボックスでJapaneseと入力し、「Japanese Package for Visual Studio Code」をインストール
Japanese Package for Visual Studio Codeをインストール

右下に「Restart Now」のポップアップが表示されるため、クリックしVisual Studio Codeを再起動
再起動
これで、日本語表記に変更することができました。

次にウェルカムページの「新しいファイル」を選択し、ソースコードエディタを見ていきたいと思います。
新しいファイルを選択

下記がVisual Studio Codeのソースコードエディタです。では、1つずつ画面構成を確認していきましょう。
※筆者はあらかじめテスト用のHTMLファイルを作成しています。

画面構成

メニューバー：ファイルの保存やデバッグができるところ
エディタ：プログラムを書くところ
サイドバー：ソースファイルの場所（階層）を表示するところ
アクティビティバー：ここで選択したメニューがサイドバーに表示される
ステータスバー：ファイルの形式や行数、エラー数などが表示されるところ
以上が、Visual Studio Codeの基本的な画面構成です。
次項では、Visual Studio Codeを利用する上で必ず行う操作を紹介していきます。

ファイルの作成や保存

次にVisual Studio Codeの基本的な使い方を記載していきます。
ファイルを作成する方法ですが、画面左上のファイルを開き、新規ファイルをクリックします。
またCtrl+Nでも、新しいファイルを作成できます。
ファイルの保存方法については、ファイルから名前を付けて保存を選んでください。
Ctrl+Shift+Sでも名前を付けて保存することが可能なのでご活用ください。

Visual Studio Codeの便利な拡張機能5選

それでは、Visual Studio Codeの使い方が解ったところで、次は便利な拡張機能について記載していきます。
Visual Studio Codeはそのまま使っても色々なコードを書けます。
しかし、拡張機能を利用した方が、より便利にコードを書けます。
機能の拡張の仕方は、Visual Studio Code上でCtrl+shift+xを押すと、検索欄が出てきます。
そこで機能名を検索して、インストールしましょう。
今回はそんな便利な拡張機能と使い方を、5つ選定して記載します。

1：Material Theme

Material Themeとは、テキストエディターの背景色を変えることのできるプラグインです。
メニューの表示から拡張機能を押し、Material Themeの歯車をクリックします。
拡張機能に関しては、Ctrl+Shift+Xで短縮可能です。
配色テーマを設定を押せば、背景色を変えられます。
ぜひご活用ください。

2：Markdown All in One

Markdown All in OneはVisual Studio CodeでMarkdown言語を使用する際に便利な拡張機能です。
何が便利なのかというと、ショートカットキーで文字の強調やイタリックを設定できるようになります。
書いた文章に対して、自動的に目次を作成してくれるのも便利な機能です。
目次に関してなのですが、3－1、3－2などのナンバリングも自動で行ってくれます。
上記以外にも便利な機能がまだまだありますので、Markdown言語を使用する方は、ぜひ利用してみてください。

3：Live Server

Live Serverとは、Visual Studio Codeを使用している際に、現在進行形でWebページが閲覧できる拡張機能になります。
使い方は、ファイルを開き、画面右下にGo Liveと出るので、クリックします。
ブラウザでコードが反映されたWebページが開きます。
コードを修正すると、自動でWebページにも反映されます。
普段はコードを入力して、Webページを更新して確認する。
といった方法をとっていますが、この拡張機能を使えば、コードを入力したそばからWebページを見られるので、非常に便利な機能です。

4：Python

Pythonとは、Visual Studio CodeでPython言語を使う際に、補助してくれるようになる拡張機能です。
使い方は、拡張機能からPythonと検索してインストールします。
便利になる機能は以下に記載しておきます。

オートコンプリート機能
実際にPython言語を入力してみると、メソッドやクラス、メンバーなどを表示してくれ、その識別子にカーソルを合わせると、詳細を表示してくれます。

リンティング機能
入力したコードに対して、起こりそうなエラーを分析し、解決方法を提示してくれる機能です。

デバッグ機能
コードを入力している最中に、プログラムを実行して、プログラムが正常に動くかどうか検証する機能です。

この他にも様々な機能があり、Python言語を入力しやすくなります。
Python言語を使う方はぜひインストールしてください。

5：PHP Debug

PHP DebugとはPHPのコードを入力する際のデバッグ機能を指します。
PHP Debugを拡張したら、PHP XDebugも拡張しましょう。
左のメニュー欄にある実行とデバックをクリックしデバックモードを起動します。
三角形のスタートボタンがある所の下矢印をクリックし、Listen for XDebugに合わせます。
デバッグしたいPHPファイルの任意の行にブレークポイントを設定します。
ブレークポイントごとにチェックしながら、デバッグしていきます。
以上がPHPコードのデバッグになります。

Visual Studio Codeの便利な機能4選

Visual Studio Codeの使い方として、次は便利な機能について記載します。
Visual Studio Codeの拡張機能については触れました。
それ以外にも、もともと備わっている便利な機能が沢山あります。
Visual Studio Codeが高機能なエディターと呼ばれている所以はそこにあります。
今回はそんな機能の説明と使い方を、4つに絞って記載いたしました。

1：インテリセンス

インテリセンスとはコードを入力する際の補助的機能の事を指します。
コードを入力する際に出てくる、文字入力の予測になります。
この文字入力の予測にカーソルを合わせると、そのコードの説明文が出てきます。
そのコード編集機能がインテリセンスになります。
基本的にはそのまま使用しても多くのプログラミング言語に対応していますが、拡張機能を使用することで、さらに多くの言語に対応できます。

2：マルチカーソル

マルチカーソルとは、同時編集を高速にする際に使用する機能です。
使い方としては、いくつかあります。

Alt+クリック
クリックした場所にカーソルを増やせます。
スタンダードな方法です。

Alt+Shift+ドラッグ
伸ばした範囲までカーソルを増やせます。
まとめてカーソルを増やす方法です。

Alt+Ctrl+カーソル上下
伸ばした範囲までカーソルを増やせます。
マウスで操作するところを、キーボードで操作する感じです。

上記以外にも様々な方法があり、同じコードを何行も書く手間などを省ける便利な機能になっております。

3：ユーザースニペット

ユーザースニペットの使い方を紹介します。
よく使うコードをあらかじめ登録しておくことにより、短いコードで呼び出せる便利な機能です。
使い方は、メニューバー＞ファイル＞ユーザー設定＞ユーザースニペットをクリックし、登録したいコードの言語を選択します。
そうすると15行のコードが出てくるので、7行目から14行目までのコメントを解除します。

{
        // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
        // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
        // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
        // same ids are connected.
        // Example:
        // "Print to console": {
        //         "prefix": "log",
        //         "body": [
        //                 "console.log('$1');",
        //                 "$2"
        //         ],
        //         "description": "Log output to console"
        }

{

// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and

// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:

// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the

// same ids are connected.

// Example:

// "Print to console": {

// "prefix": "log",

// "body": [

// "console.log('$1');",

// "$2"

// ],

// "description": "Log output to console"

}

8行目の

"prefix": "log"

1	"prefix": "log"

のlog部分に呼び出しに使用する単語を設定します。
9から12行目の

"console.log('$1');",　"$2"

1	"console.log('$1');",　"$2"

に呼び出したいコードを入力します。
13行目は、そのコードの説明を入力する欄になります。
以上がユーザースニペットの設定方法になります。

4：EMMET

EMMETとはコードを入力する際に、少ないコードを記載してTabである程度のコードの羅列を入力してくれる機能になります。
例えば、!と入力してTabキーを押せば、HTMLのコードが入力されます。

＜!DOCTYPE html>
＜html lang="en">
＜head>
＜meta charset="UTF-8">
 ＜meta http-equiv="X-UA-Compatible" content="IE=edge">
＜meta name="viewport" content="width=device-width, initial-scale=1.0">
＜title>Document</title>
＜/head>
＜body>
  
＜/body>
＜/html>

＜!DOCTYPE html>

＜html lang="en">

＜head>

＜meta charset="UTF-8">

＜meta http-equiv="X-UA-Compatible" content="IE=edge">

＜meta name="viewport" content="width=device-width, initial-scale=1.0">

＜title>Document</title>

＜/head>

＜body>

＜/body>

＜/html>

またh1+Tabで


                ＜h1>＜/h1>

＜h1>＜/h1>

が展開されます。このようにコードを入力する際の面倒な手間が省ける機能となっているので、ぜひ使用してみてください。

`Visual Studio Codeのメリット3つ`

Visual Studio Codeの使い方について、一通りの機能を説明してきました。ここでVisual Studio Codeを使用する際のメリットをいくつかご紹介しましょう。

`1：拡張機能が多い`

Visual Studio Codeの使い方でも説明した通り、利点の一つとして、拡張機能が多いことが挙げられます。基本的な機能もさることながら、拡張機能が多いことによって、エディターとしての性能を自分の思うように増やせます。自分好みの使い方ができる事が、メリットの一つとしてあげられます。

`2：連携できるソフトウェアが多い`

Visual Studio Codeの利点として連携できるソフトウェアが多い点が挙げられます。 OSに関しては、Windows、Mac、Linuxで使用できます。また連携できるソフトウェアも沢山あり、Word、Excel、pdfなどのMicrosoftofficeの開発もできます。こういった細かい所に手が届くのもメリットとなっています。

`3：使い方などの情報が多い`

Visual Studio Codeの利点として、使い方などの情報が多いことが挙げられます。 Visual Studio Codeは無償のエディターですので、使用者が多いことがメリットとしてあります。他の使用者が実際に使用してみた結果がブログや記事になっているので、わからないことがあったとき、すぐに解決策が見つかることが多いでしょう。とても初心者に優しいエディターです。

`Visual Studio Codeのデメリット`

Visual Studio Codeの使い方のメリットについて挙げました。ではデメリットは何でしょうか？ここではVisual Studio Codeの使い方のデメリットについてご紹介します。

`慣れるまでが大変`

Visual Studio Codeの使い方として、慣れるまでが大変という事が挙げられます。これに関しては、どのエディターに関しても言えることですが、プログラミングを初めてする方やエディターを変更しようとする方はこれから覚えることがたくさんあります。実際にインストールし、日本語化して自分の言語を打ち込んでみてWebサイトを見てみて・・・と戸惑うこともたくさんあるでしょう。便利な拡張機能を入れ、なるべく簡単に作業できるようになりましょう。わからないことはネットで調べて、どんどん取り込んでいくことをお勧めします。

`開発環境の構築にネットが必要`

Visual Studio Codeはインストールした時点で、様々な言語を入力できます。しかし、拡張機能を増やさないと使い勝手の悪い言語もあります。自分の使用したい言語に合わせて、拡張機能を入れてあげる必要があります。そのため、ネット環境は必須になります。

プログラマー: どこで何ができるのかがすぐ分かる画面構成ですね。

プロジェクトマネージャー: ちなみに、背景色も「ファイル」＞「基本設定」＞「配色テーマ」で自分好みにカスタマイズすることができますよ。

`Visual Studio Codeの使い方をマスターしよう`

Visual Studio Codeについて使い方を記載してきました。いかがだったでしょうか。 Visual Studio Codeは無償なのに、高機能なエディターです。ですので使用者も多く、わからないことがあった際に調べれば、解決策が多く手に入ります。拡張機能も多くを取り揃えているので、とても優秀なエディターです。なのでぜひVisual Studio Codeを使用してみてはいかがでしょうか。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

`株式会社オープンアップシステムはこんな会社です`

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

`株式会社オープンアップシステムに興味を持った方へ`

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する

              会員登録不要! カンタン45秒!

Visual Studio Code基本的な使い方3選｜拡張機能も解説

Visual Studio Codeとは

【Visual Studio Code】基本的な使い方3選

1：ダウンロード・インストール

2：Visual Studio Codeの画面構成と日本語化

ファイルの作成や保存

Visual Studio Codeの便利な拡張機能5選

1：Material Theme

2：Markdown All in One

3：Live Server

4：Python

5：PHP Debug

Visual Studio Codeの便利な機能4選

1：インテリセンス

2：マルチカーソル

3：ユーザースニペット

4：EMMET

Visual Studio Codeのメリット3つ

1：拡張機能が多い

2：連携できるソフトウェアが多い

3：使い方などの情報が多い

Visual Studio Codeのデメリット

慣れるまでが大変

開発環境の構築にネットが必要

Visual Studio Codeの使い方をマスターしよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

Visual Studioの使い方解説その3【アプリケーションの発行】

【Visual Studioで今すぐ使える】Entity Framework Coreの概要と導入方法

【無料で利用可能】Visual Studio Codeをインストールする方法

統合開発環境（IDE）とテキストエディタの違い4つ｜使用する利点とは？

Visual Studioでアイコンを作成する方法とポイント

`Visual Studio Codeのメリット3つ`

`1：拡張機能が多い`

`2：連携できるソフトウェアが多い`

`3：使い方などの情報が多い`

`Visual Studio Codeのデメリット`

`慣れるまでが大変`

`開発環境の構築にネットが必要`

`Visual Studio Codeの使い方をマスターしよう`

`株式会社オープンアップシステムはこんな会社です`

`スマホアプリから業務系システムまで`

`充実した研修制度`

`資格取得を応援`

`東証プライム上場企業グループ`

`株式会社オープンアップシステムに興味を持った方へ`

`新着案件New Job`

`開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク`

`遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク`

`病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク`

`開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク`

`債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務`

`PMO/東京都豊島区/【WEB面談可】/在宅勤務`

`関連記事Related Posts`

`Visual Studioの使い方解説その3【アプリケーションの発行】`

`【Visual Studioで今すぐ使える】Entity Framework Coreの概要と導入方法`

`【無料で利用可能】Visual Studio Codeをインストールする方法`

`統合開発環境（IDE）とテキストエディタの違い4つ｜使用する利点とは？`

`Visual Studioでアイコンを作成する方法とポイント`