Visual Studio Code 拡張機能プラグインインストール方法

その他・ツール類

VSCodeで拡張機能・プラグインをインストール追加する方法

Visual Studio Code(以下VSCode)では、HTMLやCSSを記述する際に、便利な拡張機能(プラグイン)が豊富に用意されています。

VSCode単体でも高機能なので、プラグインを使わないでコーディングすることももちろんできますが、プラグインを追加しVSCodeの機能をさらに拡張することで、効率よくコーディングができたり、コードを見やすくしたり、早くコードを打つことができるようになります。

インストール方法もとても簡単で、設定するのに時間もかかりません。今回はVS Codeのインストール方法をご紹介します。

プラグインをインストールする方法

今回例にあげる「Live Server」を例にプラグインをインストールする方法をご紹介します。

Live Serverは、ローカル上(ご自身のパソコン)でブラウザをプレビューする機能を持つプラグインです。

プラグインを使わなくてもブラウザを表示して確認することはできますが、コーディングしたものを保存や変更のたびに、ファイルを開いたりページをリロードして確認するのは大変です。 「Live Server」 を使うと ボタン一つで変更が確認できるので、コーディング作業が捗ります。

Live Server

では早速、プラグインをインストールしてみましょう。まずはVSCodeを開きます。

VSCodeを開くと画面左側に縦にアイコンが並んでいます。その中の一番下にあるアイコンが、プラグインをインストールする場所です。

プラグインのアイコンをクリックするとサイドバーが開きます。ショートカットキー(ctrl + shift + x)でも開くことができます。

そうすると入力欄が表示されるので、そこにインストールしたいプラグイン名を入力します。
今回は「Live Server」というプラグインをインストールしますので「live…」まで打ったところで入力欄のすぐ下に「Live Server」が表示されました。

「Live Server」を選び、青色の「インストール」ボタンをクリックします。

「Live Server」プラグインの画面が表示され、先ほどの青色の「インストール」ボタンが、「インストールしています」に変わります。

インストールが完了すると、以下のような表示になります。

「Live Server」 インストール済の画面

プラグインを無効化・アンインストールする方法

もし、プラグインを一時的に止めたい場合は再度拡張機能の画面を開きます。

インストール済みの中から停止したいプラグインを選択して、「無効」にするか、プラグインが不要になった場合は「アンインストール」をクリックしてから再読み込みしましょう。

インストール済のプラグイン一覧から選択し、無効またはアンインストール

まとめ

まとめです。今回はVS Codeで拡張機能・プラグインをインストール方法をご紹介しました。

VSCode単体でも高機能なので、プラグインを使わないでコーディングすることももちろんできますが、プラグインを追加しVSCodeの機能をさらに拡張することで、効率よくコーディングができたり、コードを見やすくしたり、早くコードを打つことができるようになります。

ただし最初は無闇矢鱈に色々なプラグインを入れずに、一度にひとつずつ入れていくことをおすすめします。

不具合など起こったとき、どのプラグインが原因なのかわからず困る可能性もあるからです。ひ

とつのプラグインに慣れたら、徐々に必要な機能を増やしていくとよいでしょう。

今回は以上になります。最後までご覧いただきありがとうございました。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2021年版】WordPress(ワードプレス)の使い方総まとめ

WordPress(ワードプレス)の使い方  総まとめ版

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-その他・ツール類