Visual Studio Code拡張機能　WEB開発にオススメの5選紹介

2022 6/22

2022-06-21 2022-06-22

Visual Studio CodeはHTML/CSS/JavaScriptなど、WEBに関わる開発に役立つコードエディターです。

とはいえ、「最近Visual Studio Codeを入れたばかりで何をしたらいいかわからないよ！」という人もいるのでは？

そこで今回は、WEB開発にオススメのVisual Studio Codeの拡張機能を７つご紹介していきます！

Visual Studio Codeのインストール方法はこちらの記事を参考にしてください。

Visual Studio Codeの拡張機能とは

Visual Studio Codeは拡張機能を追加することでより便利になります。

拡張機能とは、Visual Studio Code単体ではサポートしていない機能を後から追加することです。

拡張機能の一覧はVisual Studio Marketplaceで確認することができます。

Marketplace上の分類

Marketplace上では次の4つの分類で拡張機能をピックアップして表示されます。

気になる拡張機能を探すときの参考にしてみてください。

Featured: 注目されているもの
Trending: 人気が急上昇しているもの
Most Popular: 人気の高いもの
Recently Added: 最近追加されたもの

Visual Studio Code WEB開発におすすめの拡張機能5選

ここからは、実際に管理人が使っているおすすめの拡張機能を5つご紹介していきます。

GitHub Theme
Material Icon Theme
Git Lens
Prettier
Import Cost

オススメ拡張機能1：GitHub Theme

1つめは、カラーテーマ「GitHub Theme」です。

GitHub ThemeはGitHub公式が出しているカラーテーマです。

GitHub Theme公式イメージ — 出典：GitHub Theme – Visual Studio Marketplace

GitHub Themeには次の9つのカラーテーマが含まれています。

GitHub Light Default
GitHub Light High Contrast
GitHub Light Colorbind
GitHub Dark Default
GitHub Dark High Contrast
GitHub Dark Colorbind
GitHub Dark Dimmed
GitHub Light(古いテーマ)
GitHub Dark(古いテーマ)

管理人が使っているのはGitHub Dark Default。

色が結構ぱきっと分かれているのですが、目がちかちかしない良い塩梅で、気に入って使っています。

GitHub Themeのインストール・反映方法

GitHub Themeをインストールするには、以下のリンクにアクセスします。

GitHub Theme – Visual Studio Marketplace

Visual Studio Code 拡張機能 GitHub Theme インストール画面

「Install」ボタンをクリックしてVisual Studio Codeに追加してください。

次に、追加した配色テーマを反映します。

Visual Studio Codeの左側にある設定アイコン（歯車の形）をクリックしてください。

「配色テーマ」をクリックします。

反映可能な配色テーマの一覧が表示されるので、お好みで選んでください。

例えば、「GitHub Dark Default」を使いたい場合は、「GitHub Dark Default」をクリックします。

オススメ拡張機能２：Material Icon Theme

Visual Studio Codeの拡張機能オススメ2つめは、「Material Icon Theme」です。

こちらは、アイコンテーマです。

拡張子やフォルダの名前によってアイコンが見やすく変わります。

視覚的に何のファイルか分かりやすくなり、開発効率が上がります。

Material Icon Themeのインストール・反映方法

Material Icon Themeをインストールするには、以下のリンクにアクセスします。

Material Icon Theme – Visual Studio Marketplace

「Install」ボタンをクリックしてVisual Studio Codeに追加してください。

次に、追加したアイコンテーマを反映します。

Visual Studio Codeの左側にある設定アイコン（歯車の形）をクリックしてください。

「ファイルアイコンのテーマ」をクリックします。

反映可能なアイコンテーマの一覧が表示されます。

「Material Icon Theme」をクリックしてください。

オススメ拡張機能３：Git Lens

オススメの3つめは「Git Lens」です。

すでにGit関連の記事で何度か紹介しています。

Git Lensのインストール方法

Git Lensをインストールするには、以下のリンクにアクセスします。

GitLens — Git supercharged – Visual Studio Marketplace

「Install」ボタンをクリックして、Visual Studio Codeに追加してください。

オススメ拡張機能４：Prettier

オススメの4つめは「Prettier」です。

Prettierはコードの見た目を整えてくれる拡張機能です。

（このような機能のことをフォーマッタといいます）

Prettierを使うと、改行の位置や、クォーテーションをシングルにするかダブルにするかなどを揃えることができます。

Prettierはデフォルトで次の言語のフォーマットに対応しています。

Java Script
Type Script
Flow
JSX
JSON
CSS
SCSS
Less
HTML
Vue
Angular HANDLEBARS
Ember
Glimmer
GraphQL
Markdown
YAML

プラグインを入れることで、他の言語に対応させることも可能です。

Plugins · Prettier

拡張機能のインストールをプロジェクトのルートフォルダに設定ファイルを入れておくと、常にその設定でコードを整えてくれます。

チームで開発を行う際に、フォーマットに関するルールが統一できます。

そのため、チーム開発で特に効果を発揮するフォーマッタです。

Prettier設定ファイルの例

{
  "endOfLine": "auto",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 60,
  "proseWrap": "preserve",
  "arrowParens": "always"
}

チームで開発をするときに改行位置のずれなどで変更扱いになってしまうことがなくなり便利です。

Prettierのインストール方法

Prettierをインストールするには、以下のリンクにアクセスします。

Prettier – Code formatter – Visual Studio Marketplace

「Install」ボタンをクリックしてVisual Studio Codeに追加してください。

Prettierインストール後のVisual Studio Code設定

インストールした後は、各言語に対するフォーマットを有効にします。

Visual Studio Codeの左側にある設定アイコン（歯車の形）をクリックしてください。

「設定」をクリックします。

ファイルの形のアイコンをクリックして、Settings.jsonを編集します。

次の記載を追加してください。

{
  .
  .
  .
  "editor.formatOnSave": true,
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
 .
 .
 .
}

設定項目	説明
editor.formatOnSave	ファイルを保存するときに自動的にフォーマットします。
[css]～ [typescriptreact]	`"editor.defaultFormatter": "esbenp.prettier-vscode"` でデフォルトのフォーマッターとしてPrettierを設定しています。使う言語が増えると、この言語はPrettier以外でフォーマットしたい！という場面も増えるので、言語ごとに設定します。

その他の言語の指定を追加したい場合は、コマンドパレットを使ってフォーマット設定を追加することも可能です。

フォーマット設定を追加したい言語のファイルを開いて、Ctrl+Shift+Pを押します。

コマンドパレットが立ち上がります。

Visual Studio Code コマンドパレット
ドキュメントのフォーマットの選択

「ドキュメントのフォーマット」をクリックします。

Visual Studio Code 「規定のフォーマッタを構成する」ダイアログ

「規定のフォーマッタを構成する」ダイアログが表示されるので、「構成」をクリックします。

Visual Studio Code 「規定のフォーマッタを構成する」で「Prettier」を選択

その言語で利用可能なフォーマッタが表示されるので、「Prettier」を選択します。

オススメ拡張機能5：Import Cost

オススメの5つめは「Import Cost」です。

JavaScript上でパッケージのImportを行う際に容量をリアルタイムで表示してくれます。

重すぎる読み込みを行っていないかを確認しながら開発を進めることができます。

このことにより、軽い処理を作ることが可能です。

Import Costのインストール方法

Import Costをインストールするには、以下のリンクにアクセスします。

Import Cost – Visual Studio Marketplace

Visual Studio Code拡張機能Import Costインストール画面

「Install」ボタンをクリックしてVisual Studio Codeに追加してください。

Visual Studio Code拡張機能 WEB開発にオススメの5選紹介

Visual Studio Codeの拡張機能とは

Marketplace上の分類

Visual Studio Code WEB開発におすすめの拡張機能5選

オススメ拡張機能1：GitHub Theme

GitHub Themeのインストール・反映方法

オススメ拡張機能２：Material Icon Theme

Material Icon Themeのインストール・反映方法

オススメ拡張機能３：Git Lens

Git Lensのインストール方法

オススメ拡張機能４：Prettier

Prettierのインストール方法

Prettierインストール後のVisual Studio Code設定

オススメ拡張機能5：Import Cost

Import Costのインストール方法

Visual Studio Code拡張機能　WEB開発にオススメの5選紹介