記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【初心者向け】Visual Studio Code インストール方法・最初に追加しておきたい拡張機能

Visual Studio Codeは無料で使用でき、使いやすい為、世界各国で使用されいるテキストエディタです。
そこで初心者の方向けに、基礎知識、インストール方法、最初に追加しておきたい拡張機能を詳しく解説します。

カテゴリ: Visual Studio Code

みんなが使っているテキストエディタ「Visual Studio Code」って何?
「Visual Studio Code」ってどうやってインストールすれば良いの?
最初にインストールしておいた方が良い拡張機能を知りたい!

本記事はそんなお悩みを持っている方向けに

1.Visual Studio Codeの基礎知識
2.Visual Studio Codeのインストール方法
3.Visual Studio Codeに最初に追加しておきたい拡張機能

の3点に絞り解説していきます

Visual Studio Codeとは

Visual Studio Code(vs code)とは、マイクロソフト社が無料で提供しているテキストエディタの事であり、世界中のエンジニアの中でも利用者の多い人気ソフトです。

Visual Studio Codeが人気のある理由として5点があがられます。

1.オープンソースであり、誰でも無償で利用する事ができる。


2.Windows版・macOS版・Linux版と各OSに対応している。


3.多くの言語に対応している(英語、日本語、フランス語、ドイツ語、中国語、ロシア語)などその他、各国の言語に対応している。


4.拡張機能が豊富(デバック機能、コード補完、ソースコードのシンタックスハイライトなど)


5.軽量で早く動く(余計な機能は最初から省かれているので、ストレスなく動く)



以上5点の利便性から、最も多くのユーザーに選ばれている開発ツールだと言われています。

Visual Studio Code入手・インストール方法

Visual Studio Code入手方法

Visual Studio Codeの入手はVisual Studio Code 公式サイトダウンロードページにアクセスします。
Visual Studio Code 公式ダウンロードページ
https://code.visualstudio.com/Download

Visual Studio Codeインストール方法

Windows版・macOS版・Linux版それぞれのOSに合わせてクリック 今回は、Mac版で進めます。

Visual Studio Codeダウンロード開始

ダウンロードが開始されます、ダウンロードが終わるまで少し待ち。
ダウンロードデータは、ダウンロードフォルダにあります。

ダウンロードされたzipファイル(圧縮ファイル)をダブルクリックで展開。
Visual Studio Codeが現れます。

ここでわかりやすいように、アプリケーションフォルダに、移動させましょう。

起動方法

アイコンをダブルクリックし「開く」を押し、下記表が出てきたら。
「開く」をクリック。

Visual Studio Codeを起動します。
これでVisual Studio Codeが使えるようになりました。

これで使用できるようになりますが、より使いやすくする為、
最初に入れといた方が良い拡張機能を紹介します。

最初にダウンロードした方が良い拡張機能

1.日本語表示にする。【Japanese Language Pack for Visual Studio Code 】

Visual Studio Codeは、インストールした時は英語表記になっています。
どんなに使いやすくても、英語の苦手な人にとっては日本語になっていた方が使いやすい、そこでまずは日本語表記に指定しましょう。

ダウンロード方法は、5ステップ

1.【Command Palette】を開く

2.【Configure Display Language 】を入力

3.【Install additional languages 】を入力

4.【Japanese Language Pack for Visual Studio Code 】をインストール

5.【Visual Studio Code】を再起動
一つ一つ見ていきましょう。

1ステップ【Command Palette】を開く
画面上部のメニューバー、「view」をクリック→「Command Palette」を開きます。

2ステップ【Configure Display Language 】をクリック
コマンドパレットが開くので、「Configure Display Language 」を選択、クリックします。

3ステップ【Install additional languages 】をクリック
「Install additional languages 」をクリックします。

4ステップ【Japanese Language Pack for Visual Studio Code 】入力
画面左側に、インストール可能な言語パッケージが並びますので、
「Japanese Language Pack for Visual Studio Code 】」をクリック
いつからない場合は、「japanese」などでキーワード検索

5ステップ【Visual Studio Code】を再起動
言語パッケージをインストールした後は、Visual Studio Codeの再起動が必要になります。
右下にリスタートを促すメッセージ「Restart」をクリックしリスタートしてください。

リスタートすると、以下のように日本語で表示されるようになります。

これでVisual Studio Codeが日本語設定で使用できるようになりました。

全角スペースを把握【zenkaku】

コードに全角が混じっていると、機能しないのがプログラミング。
でも半角、全角は目視では判断しにくい。
下記は半角スペースと、全角スペースが混じった写真。

下記は、zenkakuで全角スペースがわかりやすくなった写真。
全角が一目でわかりやすくなったと思います。

zenkakuインストール方法

vsコードを開き、「拡張機能ボタンを押し」→「検索バーにzenkakuを入力」 zenkakuを開き、インストールを押します。

zenkakuはインストールしただけでは機能せず、使用したい時に有効化する必要があります。
画面上部「表示」を押し、コマンドパレットを開きます。
有効化したい時は、Enable Zenkakuを入力
無効化したい時はDisable Zenkakuを入力
してzenkakuを使用する事ができます。

HTML Snippets(HTMLのマークアップのサポート)

入力中に、入力内容に応じたHTMLスニペットを表示してくれます。
htmlのコードを全て書かなくてもサポートしてくれるので開発効率、記述ミスを防いでくれます。

HTML Snippetsインストール方法

拡張機能ボタンを押し、 検索バーに
HTML Snippetsを打ち込みます。
インストールボタンを押します。

これでスニペットを利用することができ、
より少ないコードでタグの記述ができます。

HTMLHint(HTMLのソースコードの間違いをチェック)

HTMLの静的解析。記述が多くなってくると、気づかないうちにソースコードのミスをしてしまう可能性があり、気づかずに進んでしまう。
そんなミスをリアルタイムでチェックして教えてくれます。
下記のような形です。

インストール方法は、拡張機能のボタンを押します。
検索バーにHTMLHintを打ち込みインストールボタンを押せば、使用できます。

これでHTMLのソースコードの不備を常にチェックしてくれるので、ミスなく、効率的にコーディング作業ができるので、特に初心者の方にはオススメの機能です。

Color Highlight(カラーコードの色を可視化してくれる)

下記のように、コード上でカラーを表示してくれるので、ブラウザに戻らなくても色を確認する事ができるので、効率的に作業することができます。

Color Highlight

拡張機能ボタンを押し。
検索にColor Highlightを入力しインストールすれば使えるようになります。

追加した拡張機能の確認方法

拡張機能の管理画面の「インストール済み」のところに表示され確認する事ができます。

VSCodeの画面の見方

VSCodeの画面は、下記のような画面構成になっています。

①.アクティビティバー

VSCodeで主に使用されている機能をアイコンで表示しています。
1-1エクスプローラー:開いているファイルを一覧表示
1-2検索:ファイル内を検索
1-3git:gitとの連携
1-4デバック:デバックを行う
1-5拡張機能:拡張機能の検索
1-6アカウント:設定の同期を指定
1-7設定:設定を行う

②.サイドバー

アクティビティバーでエクスプローラーが選択されている場合は、フォルダやファイル一覧、もしくはアクティビティバーで選択された項目が表示される。

③.エディタ

開いているファイルの内容を表示します。

④.パネル

ターミナルや、デバック情報が表示されます。

⑤.ステータスバー

文字コードなど、ファイルのステータスに関する情報を表示します。

まとめ

本記事は
1.Visual Studio Codeの基礎知識
2.Visual Studio Codeのインストール方法
3.Visual Studio Codeに最初に追加しておきたい拡張機能
の3点に絞り解説してきました、最後にポイントをまとめます。

1.Visual Studio Codeのインストール方法
Visual Studio Code 公式ダウンロードページアクセスしご自身が使用しているosに合わせてダウンロードする。

2.最初に入れておいた方が良い便利な拡張機能
①.日本語表示にする。【Japanese Language Pack for Visual Studio Code 】
②.全角スペースを把握【zenkaku】
③.HTML Snippets(HTMLのマークアップのサポート)
④.HTMLHint(HTMLのソースコードの間違いをチェック)
⑤.Color Highlight(カラーコードの色を可視化してくれる)

3.拡張機能の確認方法
拡張機能の管理画面の「インストール済み」のところに表示され確認する事ができます。

4.Visual Studio Codeの画面構成は

1.アクティビティバー
2.サイドバー
3.エディタ
4パネル
5.ステータスバー

画面から構成されている。

いかがだったでしょうか?

Visual Studio Codeは無料であるに関わらず、とても便利なテキストエディタです。
拡張機能を追加していくことでさらに使いやすく、効率的に開発が進める事ができます。
今回紹介した拡張機能以外にも、便利な機能は様々あります、
色々試し、より効率的な開発環境で作業を進めて見てください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。