【VScodeを圧倒的に使いやすくする】おすすめの拡張機能10選+α

はじめに

この記事ではVisual Stadio Code (以下VScode)のおすすめの拡張機能について紹介します。
VScodeには開発効率を格段に上げる便利な拡張機能があります。

使用するだけで作業効率が上がるので、使ったことのないものがあればぜひ一度使ってみて下さい。

目次

VScodeとは

(※すでに使用している人は読み飛ばしても構いません)

VScodeとはMicrosoftが無償で提供している統合開発環境(Integrated Development Environment:IDE)です。

コードを書く上で必要なフォルダ管理やコード補完機能など様々な便利機能がデフォルトで付属しています。
また様々な言語にも対応しているため、非常に多くの人が利用しています。

もしVScodeを使ったことない方がいれば、公式ページから簡単にダウンロードできます。
自分のOS環境に合うものを選択して下さい。

このVScodeには様々な拡張機能が用意されており、開発者が使いやすいようにカスタマイズすることができます。
以下ではその中でも特に役立つものを10個紹介します。

VScodeの拡張機能10選

今回紹介するのは以下の10種類です。

  1. Japanese Language Pack for Visual Studio Code
  2. vscode-icons
  3. Prettier – Code formatter
  4. Auto Close Tag
  5. Auto Rename Tag
  6. Bracket Pair Colorizer
  7. Path Intellisense
  8. GitLens — Git supercharged
  9. Git History
  10. Docker

1.Japanese Language Pack for Visual Studio Code

extension1

VScodeはダウンロードしてすぐの状態だと全て英語表記になっています。
この拡張機能を入れることで日本語に変換されるので、日本人なら一番最初に入れるべきものでしょう。

2.vscode-icons

extension2

VScodeのファイルのアイコンはデフォルトだと非常にシンプルなものです。

vscode-iconsはファイルの拡張子でアイコンが変更されることはもちろん、testフォルダーやassetsフォルダー、configフォルダーなども対応したアイコンにしてくれます。

3.Prettier – Code formatter

extension3

フォーマッター(formatter)とは自動でコードの整形を行ってくれるものです。

これによりコードを書く際にインデントや改行の数を気にせずとも、きれいにコードを書くことができます。

このコードの整形を行うタイミングはjsonファイルを書き換えるだけでカスタマイズできます。

4.Auto Close Tag

extension4

HTMLやXMLを書く際に、自動で<tag>タグに対応した</tag>タグを追加してくれます。
地味ですが非常に便利です。

5.Auto Rename Tag

extention5

既に書かれているタグの名前が<tag>と</tag>で連動して書き換えることができます。
上記と同様、HTMLやXMLを書く方には非常に便利です。

6.Bracket Pair Colorizer

extension6

コードを書く際にネストが深くなると、どのカッコがどこに対応しているのか分かりにくいです。
Bracket Pair Colorizerは対応したカッコが同じ色で表示されるので、簡単にカッコの対応関係が把握できます(下図)。

bracket-pair-colorizer

7.Path Intellisense

extension7

別のファイルからインポートする際に、パスのコード補完(Intellisense)されます。
相対パスを書く際に非常に便利です。

8.GitLens — Git supercharged

extension8

ここから2つはgitに関連した拡張機能です。

GitLensはgitで変更した箇所が表示されます。
チーム開発をする際に誰がどのコードを変更したかが確認できます。

9.Git History

extension9

Git Historyは文字通りコミット履歴が表示されます。
この拡張機能を入れておけばわざわざgitコマンドを打ったり、GitHubを開かずにVScode一つで確認できます。

10.Docker

extension10

今や環境構築ツールとしてデファクトスタンダードとなりつつあるDokcerですが、VScodeにも拡張機能があります。

DockerではDockerFileをコマンドで書くことができたり、コンテナの状態やダウンロード済みのイメージも確認できます。
Dockerを使っている方は一度入れてみると良いと便利かもしれません。

VScodeの拡張機能+α

VScodeでは様々な言語に対応したスニペットがあります。
下にはJavaScript関連のスニペットを紹介しますが、自分が欲しい言語のものも大体揃っているので調べてみてください。

ちなみにスニペットは自分が作りたいものを自作することができます。
以下の記事で紹介しているので興味があれば一読してみて下さい。

タイピングが遅い人必見!EmmetとSnippetで簡単高速コーディング

まとめ

今回は10種類程度のVScodeの拡張機能について紹介しました。
どれも非常に強力なものなので、入れていない人はぜひ入れてみて下さい。

また、ここに紹介した以外にも様々な拡張機能があります。
自分で色々カスタマイズしながら、使いやすいIDEを目指しましょう。

楽しいコーディングライフを!

参考URL

Visual Studio Marketplace

本気でプログラミングを身につけるならCodeShip

CodeShipは業界内で唯一「無償延長保証制度」によるスキル修得を保証しているプログラミングスクールです。
独学での挫折や未経験からでも、スタートアップベンチャーや日系・外資の大手WEB系企業まで幅広くエンジニアを輩出する教育実績を残しています。

勉強目的ごとに用意された6つの学習コース&オリジナルのポートフォリオ開発実戦経験豊富な現役エンジニアキャリアコンサルタントがあなたの「開発スキル修得」と「キャリアプランニング」をサポートします

さらに、期間内であれば選択した以外のコースのカリキュラムを受講可能。
同じ値段で、頑張った分だけ勉強できる「勉強し放題」はCodeShipだけ。

まずはご自身のプログラミング学習やキャリアプランについて、無料個別相談会にてお気軽にご相談ください。