VSCodeで開発する時のおすすめのプラグイン

アプリケーション開発

当記事では、VSCodeで開発を推奨する言語と開発に役立つVSCodeのプラグインを紹介します。

Z-A-K-I
Z-A-K-I

最近VSCodeで開発始めたんだけど、めっちゃいいじゃん。

他に便利なプラグインないかなー

と、思ってる方におすすめです。

  • VSCodeとは
  • VSCodeで開発推奨言語
  • VSCodeのおすすめプラグイン

VSCodeの説明から、VSCodeで開発した方がよいプログラミング言語、開発する上でおすすめのプラグインを紹介しています。

プラグインは、特定言語に依存しないプラグインをなるべく記載してますが、一部Python固有のプラグインが混ざってますが、ご了承ください。

VSCodeとは

無償で利用できる開発エディタです。Microsoft社が開発し提供しています。VisualStudioCodeとも呼ばれます。

WindowsでもMacでも利用でき、プラグインを導入する事で様々な言語に特化した開発環境が作ることができます。

VSCodeがデファクトスタンダードとなっている開発言語もあるほど高機能なエディタです。

開発用のエディタには他にTeraPadやサクラエディタなどがありますが、VSCodeはそれらのエディタと比較すると圧倒的に高機能なエディタとなります。ただし、高機能ゆえに他のエディタと比べて使い方をマスターするのが大変なエディタです。

VSCodeでの開発推奨言語

VSCodeは高機能のエディタであるため、IDE(開発統合環境)として扱われている言語もあります。ここでは、筆者が考えたVSCodeで開発を行うべき言語を記載します。

Python

Pythonの開発環境としてVSCodeを推奨します。

VSCodeにPythonプラグインを導入することでPythonの開発環境となります。PythonにはVSCode以外にいくつか開発環境の選択肢が存在しますが、有償であったり条件付きであったりしますが、VSCodeは無償で利用することが可能です。

実際に開発しても特に不都合なく便利に開発ができたため、Pythonの開発にはVSCodeの開発をオススメしています。

node.js

node.jsの開発環境としてVSCodeを推奨します。

VSCodeにプラグインを導入することで開発環境となります。Eclipseなど他言語に特化したIDEでも開発が可能ですが、他言語特化のIDEを利用するなら、VSCodeにプラグインを導入して開発した方がよいと考えています。ちなみにVSCodeやIDEを利用しない場合は、TeraPadやサクラエディタなどで開発することになります。

フロントエンド(React、Vue)

ReactやVueもVSCodeを利用しての開発を推奨します。

Pythonやnode.jsと同様にVSCodeにプラグインを導入して開発を推奨します。こちらもnode.jsと同様に他言語特化のIDEでも開発が可能ですが、node.jsの時と同じ理由からVSCodeで開発することを推奨します。

Java

VSCodeでの開発を推奨しません。

Javaもプラグインを導入する事でVSCodeで開発が可能です。しかし、Javaは無償で利用できるEclipseの方が高機能で高生産性が期待できると感じてます。そのため、特別な理由がなければVSCodeで開発する必要はないと考えます。

.NET系言語

VSCodeでの開発を推奨しません。

C#やVBなど、.NET系の言語はVSCodeで開発はしない方がよいと考えます。これらは、Microsoft社が提供しているVisualStudio(※VisualStudioCodeと名前が似ていますが別物です。こちらは有償となります。)がVSCodeのはるか前から存在しており、圧倒的に生産性が高いと感じているためです。

VSCodeのおすすめプラグイン

VSCodeはプラグインで作業効率が大きく変わってきます。

プラグインは多種多様なプラグインが存在します。開発の生産性に関わるプラグイン以外に外観をカスタマイズしモチベーションを向上できるプラグインなども存在します。

ここでは、私がオススメするプラグインを紹介します。

background-cover

VSCodeの背景を好きな画像に変更することができるプラグインです。

画像の透明度を指定することも可能で、開発に邪魔にならない程度の透明度を設定することができます。お気に入りの画像を背景に設定して、自分好みのVSCodeに外観を変更できます。

開発の生産性とは直接関わりはありませんが、コードのバック画面に好きな画像が表示されていることで開発中の気分があがります。


image.png

Auto Close Tag

名前のとおり、タグを入力すると終了タグを自動で保管してくれるプラグインです。

開始のタグを入力スロとエンドのタグが自動で記述されるのでタイピング量とエンドタグ記述間違いのミスが減り、開発効率が向上します。


image.png

Auto Rename Tag

開始タグを変更すると、終了タグも同時に変更してくれるプラグインです。

「Auto Close Tag」と同様の理由で、こちらも開発効率が向上します。


image.png

autoDocstring

Python言語におけるコメントのフォーマットを自動で生成してくれるプラグインです。

コメントの有無で保守のしやすさが変わるので簡単にコメントを記述できるので便利です。


image.png

isort

Python開発する際にimportの順番を適切に並び替えてくれるプラグインです。

複数のプログラムで、同じimportの順番で並び替えがされるようになり、保守性が向上します。


image.png

Todo Tree

TODOをリスト化してくれるプラグインです。

ソースコード上に「TODO」と記載されたものをリスト化しみやすくなります。

あとでやろうと思ったTODOの解消漏れに効果があります。


image.png

Trailing Spaces

目に見えない不要なスペースを可視化してくれるプラグインです。

半角全角空白の混在によるエラーをすぐに発見できます。


image.png

ChatGPT – Genie AI

VSCode上で右クリックメニューからChatGPTを呼び出せるプラグインです。

VSCode上でChatGPTを利用できるので、開発中に疑問に思ったことを別のアプリに切り替えずに調べれます。これにより、開発しながら疑問点を解消することができます。 利用にはOpenAIにアカウント登録し、APIキーの設定が必要となります。(無償)


image.png

PowerMode

文字入力時に花火が上がるようになるプラグインです。

文字入力するとテンションも上がるようになるプラグインです。
image.png

↓文字入力時、以下のようになります。
image.png

vscode-pets

VSCode上でペットを表示できるプラグインです。

開発中のふとした瞬間、癒されます。
↓はトトロとロボットみたいなやつを表示した場合の画面です。
image.png

Postman

バックエンドのAPIを実行できるプラグインです。。

Postmanというツールが別途ありますが、VSCode上からPostmanを利用することができるようになるプラグインです。

まとめ

VSCodeで開発おすすめプラグインのまとめ

本記事では、VSCodeで開発する際のおすすめプラグインとVSCodeで開発を推奨する言語を紹介しました。VSCodeはプラグインによって、利便性が大きく変わってくるツールです。世の中にあるプラグインを活用して利便性を向上させていきましょう。

本記事が皆様のご参考となれば幸いです。

この記事を書いた人
z_a_k_i

z_a_k_iと申します。

富山でITエンジニアとして働いています。
0歳児と3歳児を持つ30代メンズです。

このブログでは、以下の内容を紹介しています。

 ⚫︎アプリケーション開発
 ⚫︎富山県の情報発信

皆様に役立つ内容を紹介できるよう精進していきますので、
どうぞよろしくお願いします。

z_a_k_iをフォローする
アプリケーション開発

コメント