media archive

Visual Studio Codeをインストールしてみよう!(Mac)インストール方法と最低限追加したい拡張機能

本記事では、MacでのVisual Studio Codeのインストール方法と、拡張機能の追加方法を解説しています。

また、素のHTMLとCSSの記述に使う場合でも、これだけは入れておきたいという便利な拡張機能をご紹介しています。

本記事の内容
非表示

Visual Studio Codeとは?

Visual Studio Codeとは無料で使うことができる高機能なテキストエディタの一つです。テキストエディタとは、テキスト(文字)を編集するアプリケーションのことです。

Visual Studio Codeを省略してVS Codeとも呼ばれます。

Visual Studio Code
Visual Studio Code

Visual Studio Codeの他にも様々なテキストエディタがあります。わかりやすい例を挙げると、Windowsに最初からインストールされている「メモ帳」や、Macに最初からインストールされている「テキストエディット」もテキストエディタです。

なぜVisual Studio Codeが必要なの?

Webサイトの制作では、HTMLCSSと呼ばれるテキストで構成されたファイルを作成するので、テキストを編集するアプリケーションであるテキストエディタが必要になります。

HTMLやCSSは下記の例のように、日本語の他に英数字や記号を入力する必要があり、全て手入力するのは非常に大変です。

HTMLの見本
HTMLの見本
CSSの見本
CSSの見本

そこで、その入力を補助してくれる機能など、便利な機能が備わっている様々なテキストエディタが開発されており、Visual Studio Codeもその中の一つです。

Visual Studio Codeの他にも、

  • Sublime Text
  • Atom

などが有名で、有料のものも含め多くのテキストエディタがあります。

コラム

ソースコードって何?

ソースコード(Source Code)とは簡単に言うと、プログラムなど、コンピュータへの指示を書いたもののことを言います。略して「コード」とも言われます。

また、コードをテキストエディタに入力すること、つまり、コードを書くことコーディング(Coding)と言います。

インストール方法

それではVisual Studio Codeをインストールしてみましょう。

まず最初に、Visual Studio Code公式サイトのダウンロードページにアクセスします。

Visual Studio Code公式ダウンロードページ
https://code.visualstudio.com/Download

Visual Studio Code公式ダウンロードページ
Visual Studio Code公式ダウンロードページ

次に、「Mac」のボタンをクリックします。

Visual Studio Code公式ダウンロードページ

するとダウンロードが開始されます。ダウンロードが終わるまで少し時間がかかります。
ダウンロードしたデータは、ダウンロードフォルダに入っています。

ダウンロードフォルダ内のインストールデータ
ダウンロードフォルダ内

補足

ダウンロードフォルダの場所については、Macのダウンロードフォルダはどこ?をご覧ください。

ダウンロードされた圧縮データをダブルクリックして展開すると、Visual Studio Codeのアプリケーションが現れ、使用可能になります。

Visual Studio Codeのアプリケーション

Visual Studio Codeはアプリケーションフォルダなど、わかりやすいところへ移動させておきましょう。

補足

アプリケーションフォルダの場所については、Macのアプリケーションフォルダはどこ?ご覧ください。

起動方法

アイコンをダブルクリックするとVisual Studio Codeが起動します。このとき、下記の画面が出てきた場合は[開く]を選択してください。

選択肢の画面で開くを選択

これでVisual Studio Codeが起動します。

Visual Studio Codeの画面
Visual Studio Codeの画面

拡張機能でVisual Studio Codeをもっと使いやすくしよう

これだけは入れておきたい拡張機能

Visual Studio Codeは元々高機能ですが、より使いやすくするために、拡張機能でさらに様々な機能を追加することができます。

便利な拡張機能はたくさんありますが、ここでは素のHTMLやCSSを記述する場合の、最低限入れておきたい5つの拡張機能

  • Japanese Language Pack for VS Code
  • EvilInspector
  • HTMLHint
  • Live Server
  • Prettier

をご紹介します。詳しくは下記をご覧ください。

補足

Visual Studio Codeには、標準でEmmetの機能が組み込まれています。Emmetは、コードを省略記法で書くことができる非常に便利な機能です。

ポイント

Visual Studio Code標準の自動整形機能について

Visual Studio Codeには、標準でHTMLやJavaScriptなどに対応した自動整形機能があります。自動整形機能とは、コードの改行やインデントなどを自動的に綺麗に整える機能で、自動整形を行うことで人が見たときに分かりやすいコードの状態を保つことができます。

自動整形機能は、コードが表示されている画面で右クリックし[ドキュメントのフォーマット]を選択すると使用できます。ショートカットはoption+shift+Fです。

ドキュメントのフォーマットの場所
ドキュメントのフォーマットの場所

CSSの自動整形について

Visual Studio Code標準の自動整形機能はCSSには対応していない(記事執筆2021年3月4日時点)ので、CSSを自動整形するには、Prettierなど拡張機能のフォーマッタが必要になります。

Japanese Language Pack for VS Code

Japanese Language Pack for VS Codeを追加することで、Visual Studio Codeを日本語化することができます。

EvilInspector

EvilInspectorを追加すると、エラーの原因となる全角スペースを強調表示してくれます。

コードは、半角の英数字や半角の記号、半角スペースでの記述が基本のため、全角の文字が入っているとエラーの原因になります。そのため、全角の文字の中でも特に発見しづらい全角スペースを強調表示すると発見しやすくなり、全角スペースによるエラー防止に役立ちます。

HTMLHint

HTMLHintを追加することで、タグや記号の入力ミス、入れ子構造の誤りなど、基本的な構文チェックをしてくれます。コンテンツモデルのチェックまではできません。

エラーの内容は問題パネルに表示されます。

問題パネル
問題パネル

問題パネルが表示されていない場合は、[表示]メニューの[問題]を選択すると表示できます。

表示メニューの問題
表示メニューの[問題]

Live Server

Live Serverを追加することで、編集中のHTMLやCSSの状態をリアルタイムにブラウザで表示させることができます。

Live Serverの起動には、[ファイル]メニューの[開く]から、編集するHTMLやCSSが格納されているフォルダを開いておく必要があります。

ファイルメニューの開く
ファイルメニューの[開く]

Live Serverの起動は、ウィンドウ右下の[Go Live]というところをクリックします。

Go Liveの表示
Go Liveの表示

すると、ブラウザに現在編集中のHTMLやCSSが反映されたページが表示されます。

Prettier

Prettierを追加することで、標準では対応していないCSSの自動整形も可能になります。

Prettierを追加後、HTMLでのドキュメントのフォーマット時に下記のダイアログが出た場合は、[構成]を選択してください。

フォーマット時に出現するダイアログ
フォーマット時に出現するダイアログ

すると、画面上に下記のフォーマッタの選択肢が現れますので、任意のフォーマッタを選択してください。

規定のフォーマッタの選択
規定のフォーマッタの選択

拡張機能の追加方法

拡張機能を追加するには、まず[拡張機能]をクリックします。

拡張機能
拡張機能

次に、サイドバーに拡張機能を管理する画面が開きますので、検索窓に追加したい拡張機能の名前を入力します。

拡張機能の検索窓
拡張機能の検索窓

すると、入力した名前に該当する、もしくは関連する拡張機能が表示されます。

該当もしくは関連する拡張機能
該当もしくは関連する拡張機能

あとは、該当する拡張機能の[Install]をクリックするとインストールされます。

インストールボタン
インストールボタン

このとき、[Restart]など、Visual Studio Codeの再起動を促す表示が出た場合は、その表示をクリックして再起動してください。

Visual Studio Codeの再起動を促すボタン
Visual Studio Codeの再起動を促すボタン

続けて拡張機能を追加したい場合は、上記の手順を繰り返します。

追加した拡張機能を確認したいときは

追加した拡張機能は、拡張機能の管理画面の[インストール済み]のところに表示されています。

インストール済みの拡張機能
インストール済みの拡張機能

最後に

Visual Studio Codeでのコーディングを快適にするために、最初にしっかり拡張機能を入れておきましょう。使い慣れてきたら他の様々な機能の利用したり、拡張機能を追加してさらに使いやすくするなど、より快適にコーディングできるように色々試してみてください!

ホームページの制作、Webデザインから、
パンフレットやチラシなど紙媒体の制作、グラフィックデザインまで、
制作のご相談やお見積もりなど、まずはお気軽にお問い合わせください。

制作のご依頼・ご相談はこちら
TOP
ホームページ(Webサイト)制作、パンフレット・チラシ等制作の
ご依頼、ご相談はこちら