【Visual Sdtudio Code】VScodeを使うなら絶対入れたいおすすめ拡張機能8選

「Visual Studio Codeの拡張機能ってなに?」

「拡張機能がありすぎてどれを入れたらいいか分からない。」

「おすすめの拡張機能ってあるの?」

こんな疑問はありませんか?

この記事では、数ある拡張機能の中から「Visual Studio Codeを使うなら絶対入れたいおすすめ拡張機能」を8つご紹介しています。

Visual Studio Codeを初めて利用する方のお役に立てる内容となっていますので、是非最後までお読みください。

Visual Studio Codeの拡張機能ってなに?

Visual Studio Codeの拡張機能とは、スマホで言うアプリのようなものです。

拡張機能をインストールすることでVisual Studio Codeにない様々な機能をプラスすることができ、ミスに気づきやすくなる・作業効率が上がるなどのメリットがあります。

拡張機能は『VSCode MarketPlace』から簡単にインストールできるので、是非活用してみましょう。

VSCode MarketPlace

Visual Studio Codeのおすすめ拡張機能8選

Visual Studio Codeを使うなら絶対入れたいおすすめ拡張機能は次の8つです。

  1. Live Server
  2. Japanese Language Pack
  3. Code Spell Checker
  4. Bracket Pair Colorizer 2
  5. indent-rainbow
  6. zenkaku
  7. Auto Rename Tag
  8. Path Intellisense

詳しくご説明します。

Live Server

Live Serverとは、簡易的なローカルサーバを立てテキストエディタの変更内容を保存するとリアルタイムでブラウザに変更を反映できる拡張機能です。
手動でファイルをリロードする手間がなくなるので、作業効率が格段に上がります。

Live Server

Japanese Language Pack

Japanese Language Packとは、Visual Studio Codeのユーザーインターフェースの表示を日本語表示にする拡張機能です。

日本語で表示されることでとても見やすくなるので、まず始めにインストールすることをおすすめします。

Japanese Language Pack

Code Spell Checker

Code Spell Checkerとは、コードのスペルチェックをしてくれる拡張機能です。

ソースコードにスペルミスがある場合、下線でスペルミスを知らせてくれます。

コマンドとピリオドを同時押しをすると、修正候補が表示されるので修正作業も簡単です。

Code Spell Checker

Bracket Pair Colorizer 2

Bracket Pair Colorizerとは、対応する括弧に分かりやすく色を付けてくれる拡張機能です。

括弧をクリックすると対応する括弧にラインを引いて教えてくれます。

対応する括弧が分かりやすくなると、影響範囲も分かりやすくなるので作業効率が上がります。

Bracket Pair Colorizer 2

indent-rainbow

indent-rainbowとは、インデントを色で分けてくれる拡張機能です。

行数が多ければ多いほど、

「これはどのインデントに対応してたかな?」

と、分かりにくくなります。

indent-rainbowによって色がついていることで今どこのインデントなのかを把握しやすくなり、作業効率が上がります。

indent-rainbowはどの言語でも使用可能です。

indent-rainbow

zenkaku

zenkakuとは、コードの中の全角スペースを教えてくれる拡張機能です。

初心者のうちは全角スペースがエラーの元になることが多く、修正箇所を見つけにくいのでzenkakuをインストールしておくと安心です。

プログラミング初心者の方はまず初めにインストールしましょう。

zenkaku

Auto Rename Tag

Auto Rename Tagとは、HTMLの開始タグと終了タグに変更があった場合、正しいタグに自動で修正してくれる拡張機能です。

Auto Rename Tagをインストールしておくと、

「開始タグを変更したのに終了タグを変更し忘れた。」

といったミスを防ぐことができ編集の手間が省けるので、作業効率が上がります。

Auto Rename Tag

Path Intellisense

Path Intellisenseとは、パスを入力する際自動で候補を出してくれる拡張機能です。

頭文字を入れるとフォルダ名を候補として出してくれるので、手動で入れる手間が省け作業効率が上がります。

Path Intellisense

拡張機能まとめ

Visual Studio Codeには様々な拡張機能があります。

ですが最初から多くの拡張機能をインストールするのはおすすめしません。

多くの拡張機能をインストールすると動作が重くなってしまうからです。

作業効率を上げるにはその時その時に必要な拡張機能をインストールしましょう。

今日ご紹介した8つの拡張機能はどれも役立つものばかりです。

是非参考にしていただければと思います。

最後までお読みいただきありがとうございました。



[nlink url=”

sisimai駆け出しライター

投稿者プロフィール

関西在住30代のsisimaiです。
3人の男の子の母をしております!
働きながらライターとしての活動をスタートさせました。
皆様に有益な情報をお届けしたいです♪

COQUELICOT編集部

投稿者プロフィール

編集部では、ライターさんを募集しております!
当サイトのテキスト・画像の無断転載・複製を固く禁じます。
Unauthorized copying prohibited.

この著者の最新の記事

関連記事

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

CAPTCHA


おすすめIT記事

  1. IT業界は労働環境や条件などから、女性が働くには不向きな業界というイメージを持っている人も多いです。…
  2. ショートカットキーとは、マウスを使わずにキーボードをしパソコン仕事をするテクニックです。 「マ…
  3. アジャイルスクラム開発への知識、業務経験のあるエンジニアへの評価が高まっています。また、その存在はI…
  4. IT業界の職種の1つにプログラマーがあります。プログラマーという言葉は聞いたことはあるが、具体的な仕…
  5. エンジニアには専門性の高いスキルが求められるため、未経験者が転職を諦めてしまうこともあります。しかし…
  6. ここ4年ほどで注目が高まってきている資格「CBAP®」はご存じですか? キャリアアップを目指すビジ…

編集部のおすすめ

  1. 『絶対覚えた方がいいExcel関数って何?』 『関数のエラーどうしたらいいの?』 こんな…
  2. デザイン制作や資料作成を行うときにイラストが1つ加わることで華やかになります。 イラスト素材で…
  3. お得に節税できるしくみとして知られる「iDeco」や「ふるさと納税」。 iDecoは運用益が非…
  4. アジャイルスクラム開発への知識、業務経験のあるエンジニアへの評価が高まっています。また、その存在はI…
  5. ふるさと納税とは、自治体に寄付をすることでお礼として自治体の特産品をもらえ、さらに寄付金額によって税…

ピックアップ

  1. 『GoodNotes 5って何?』 『GoodNotes 5で何ができるの?』 『Goo…
  2. 仕事をするのに欠かすことのてきないExcel。 ビジネスシーンで必ず求められるスキルではないでしょ…
  3. ここ4年ほどで注目が高まってきている資格「CBAP®」はご存じですか? キャリアアップを目指すビジ…
  4. 「専業主婦をしているけど資格を取得したい」 「資格を取得して仕事をしたい」 などと考えたことはあ…

会員情報

ピックアップ記事

  1. 仕事をするのに欠かすことのてきないExcel。 ビジネスシーンで必ず求められるスキルではないでしょ…
  2. ここ4年ほどで注目が高まってきている資格「CBAP®」はご存じですか? キャリアアップを目指すビジ…
  3. 「専業主婦をしているけど資格を取得したい」 「資格を取得して仕事をしたい」 などと考えたことはあ…
  4. 『GoodNotes 5って何?』 『GoodNotes 5で何ができるの?』 『Goo…
ページ上部へ戻る