【VSCode】おすすめの拡張機能 21選
はじめに
今回の記事では、主にバックエンド(PythonとTypeScript中心)を開発している私が使っているVSCodeの拡張機能を紹介する。
拡張機能
基本的にどのような言語でも対応できる拡張機能を紹介する。
Japanese Language Pack for Visual Studio Code
VSCodeを日本語にできる。
REST Client
VSCode上でgetやpostなどのHTTPリクエストを送信できる。GraphQLにも対応している。
GitLens — Git supercharged
commit単位でファイルを比較したり、最新のcommitの内容を表示したりできる。
DeepL for Visual Studio Code
VSCode上にて日本語から英語に翻訳できる。翻訳の精度が非常に高い。
JSDoc Generator
JavaScriptのドキュメントをコメントで生成できる。
Live Server
簡易的なローカルサーバを簡単に立ち上げられる。ホットリロードに対応しているので、静的なWebサイトを作成する上では必須。
Live Share
複数人でVSCode上のソースコードを編集できる。ペアプログラミングで非常に役立つのでおすすめ。詳細はQiita記事「VSCode Live Shareすげぇ」で確認してほしい。
JSON
VSCode上でリアルタイムでJSONデータの挙動を確認できる。
Markdown All in One
VSCodeでMarkdownを執筆するなら必須。ショートカットキーで簡単にMarkdownを入力できるのでオススメ。私の場合はZenn記事を書く際に非常に重宝している。(詳細は後述)
WEB開発におすすめの拡張機能
Python
PythonをVSCodeで書くなら必ずインストールしておきたい。
JavaScript and TypeScript Nightly
上記と同様に、TypeScriptをVSCodeで書くなら必須である。
TypeScript Importer
文字を入力すれば.ts、.js、.tsxなどに入っているモジュールを自動でインポートしてくれる。TypeScriptのコーディング効率を劇的に向上させられるので非常にオススメ。
SQLite
VSCodeでSQLiteを扱うなら必須である。VSCode上でSQLiteに関するコマンドを実行できる。
SQLite Viewer
SQLiteのデータベースをリアルタイムで確認できる拡張機能。個人的にSQLiteで開発する機会が多かったので、プログラミング独学1年目の時期に知っておきたかった拡張機能の１つ。
MySQL
VSCodeでMySQLを使用する際に必須である。MySQLのデータベースをリアルタイムで確認したり、クエリで実行したりできる。
MongoDB for VSCode
VSCodeでMongoDBを扱うなら必須。MongoDBのデータベースをリアルタイムで確認したり、実行したりできる。
Docker
VSCodeでDockerを使うなら必須。Microsoftが提供している拡張機能なので安心して使える。Dockerを扱う上で必要な拡張機能はこれ１つで事足りる。
yarn
yarnコマンドをVSCodeで活用できる拡張機能。コマンドを確認する際に逐一公式ドキュメントを確認する必要がない。
おまけ
GitHub Theme
GitHubで使われているコードのテーマをVSCodeに適用できる。私の場合、開発の集中力をキープするためにVSCodeのテーマを切り替えることが多いので重宝している。
vscode-icons
ディレクトリ、ファイルのアイコンを変更できる。見やすくなるのでおすすめ。
Zenn Editor
公式が提供しているZenn CLIをVSCode上で使えるようにした拡張機能。最大の特徴は開発者サーバを立ち上げる必要なく執筆している記事のプレビューを確認できることである。非公式だが、Zenn記事をVSCodeで書きたいプログラマーはインストールして損はないだろう。
余談
改めて自分のVSCodeを振り返ったら使われていない拡張機能や使い方を忘れた拡張機能がたくさんあった。定期的に拡張機能を確認することの重要性を学んだ。やはり、VSCodeの拡張機能は知っているだけで開発の効率に影響を与えるものが多い。
WEB開発の効率を上げるには今自分が使っている拡張機能を改めて整理することや、READMEを読みなおすことを一度考えてみるといいだろう。
参考サイト
Discussion
DeepL for Visual Studio Codeのリンク先ですが、間違えてらっしゃいませんか？
こちらではありませんか？