はじめに
この記事ではVisual Stadio Code (以下VScode)のおすすめの拡張機能について紹介します。
VScodeには開発効率を格段に上げる便利な拡張機能があります。
使用するだけで作業効率が上がるので、使ったことのないものがあればぜひ一度使ってみて下さい。
目次
VScodeとは
(※すでに使用している人は読み飛ばしても構いません)
VScodeとはMicrosoftが無償で提供している統合開発環境(Integrated Development Environment：IDE)です。
コードを書く上で必要なフォルダ管理やコード補完機能など様々な便利機能がデフォルトで付属しています。
また様々な言語にも対応しているため、非常に多くの人が利用しています。
もしVScodeを使ったことない方がいれば、公式ページから簡単にダウンロードできます。
自分のOS環境に合うものを選択して下さい。
このVScodeには様々な拡張機能が用意されており、開発者が使いやすいようにカスタマイズすることができます。
以下ではその中でも特に役立つものを10個紹介します。
VScodeの拡張機能10選
今回紹介するのは以下の10種類です。
- Japanese Language Pack for Visual Studio Code
- vscode-icons
- Prettier – Code formatter
- Auto Close Tag
- Auto Rename Tag
- Bracket Pair Colorizer
- Path Intellisense
- GitLens — Git supercharged
- Git History
- Docker
１．Japanese Language Pack for Visual Studio Code
VScodeはダウンロードしてすぐの状態だと全て英語表記になっています。
この拡張機能を入れることで日本語に変換されるので、日本人なら一番最初に入れるべきものでしょう。
2．vscode-icons
VScodeのファイルのアイコンはデフォルトだと非常にシンプルなものです。
vscode-iconsはファイルの拡張子でアイコンが変更されることはもちろん、testフォルダーやassetsフォルダー、configフォルダーなども対応したアイコンにしてくれます。
3．Prettier – Code formatter
フォーマッター(formatter)とは自動でコードの整形を行ってくれるものです。
これによりコードを書く際にインデントや改行の数を気にせずとも、きれいにコードを書くことができます。
このコードの整形を行うタイミングはjsonファイルを書き換えるだけでカスタマイズできます。
4．Auto Close Tag
HTMLやXMLを書く際に、自動で<tag>タグに対応した</tag>タグを追加してくれます。
地味ですが非常に便利です。
5．Auto Rename Tag
既に書かれているタグの名前が<tag>と</tag>で連動して書き換えることができます。
上記と同様、HTMLやXMLを書く方には非常に便利です。
6．Bracket Pair Colorizer
コードを書く際にネストが深くなると、どのカッコがどこに対応しているのか分かりにくいです。
Bracket Pair Colorizerは対応したカッコが同じ色で表示されるので、簡単にカッコの対応関係が把握できます(下図)。
7．Path Intellisense
別のファイルからインポートする際に、パスのコード補完(Intellisense)されます。
相対パスを書く際に非常に便利です。
8．GitLens — Git supercharged
ここから2つはgitに関連した拡張機能です。
GitLensはgitで変更した箇所が表示されます。
チーム開発をする際に誰がどのコードを変更したかが確認できます。
9．Git History
Git Historyは文字通りコミット履歴が表示されます。
この拡張機能を入れておけばわざわざgitコマンドを打ったり、GitHubを開かずにVScode一つで確認できます。
10．Docker
今や環境構築ツールとしてデファクトスタンダードとなりつつあるDokcerですが、VScodeにも拡張機能があります。
DockerではDockerFileをコマンドで書くことができたり、コンテナの状態やダウンロード済みのイメージも確認できます。
Dockerを使っている方は一度入れてみると良いと便利かもしれません。
VScodeの拡張機能+α
VScodeでは様々な言語に対応したスニペットがあります。
下にはJavaScript関連のスニペットを紹介しますが、自分が欲しい言語のものも大体揃っているので調べてみてください。
ちなみにスニペットは自分が作りたいものを自作することができます。
以下の記事で紹介しているので興味があれば一読してみて下さい。
まとめ
今回は10種類程度のVScodeの拡張機能について紹介しました。
どれも非常に強力なものなので、入れていない人はぜひ入れてみて下さい。
また、ここに紹介した以外にも様々な拡張機能があります。
自分で色々カスタマイズしながら、使いやすいIDEを目指しましょう。
楽しいコーディングライフを！
