現役Web開発者がおすすめするVSCodeの拡張機能10選

皆さん、こんにちは!

最近React.jsを使う際にAtomでは開発しづらかったのでVSCodeを導入しました。

その時に私がインストールした便利なVSCodeの拡張機能を紹介します!

おすすめのVSCode拡張機能まとめ

並び順は順不同になります!

VSCode自体のダウンロードは以下のボタンからどうぞ!

その1. Japanese Language Pack for Visual Studio Code

Japanese Language Pack for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

VSCodeを日本語化する拡張機能です。
英語にこだわらないのであれば、とりあえずインストールしておけばいいと思います。

その2. Path Intellisense

Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

ファイルパスの入力補完を行ってくれる拡張機能です。
入れておくのにこしたことはないと思います。

その3. zenkaku

zenkaku
https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

全角スペースを可視化できる拡張機能です。
よくあるミスを防ぐことができるので、おすすめです!

その4. vscode-icons

vscode-icons
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

ソースツリーのファイルアイコンがかなり見やすくなります。
デフォルトではフォルダのアイコンがなかったりと、少しフラストレーション溜まるので入れておくと快適です。

その5. Todo +

Todo +
https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-todo-plus

TODOの管理がかなりはかどります。
サイドメニューにTODOのコメントが一覧で見ることができるように、ストレスフリーになります。

その6. Bracket Pair Colorizer

Bracket Pair Colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

括弧に色がつく拡張機能です。
これによりブロック単位でのコードの視認性が上がるのでコードがとても見やすくなります。

その7. Visual Studio IntelliCode

Visual Studio IntelliCode
https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

Microsoft謹製の入力補完拡張機能です。
AIを活用して入力候補を提案してくれます!

その8. テキスト校正くん

テキスト校正くん
https://marketplace.visualstudio.com/items?itemName=ICS.japanese-proofreading

テキストファイルやmdファイルを校正してくれる拡張機能。
あると便利かもです!

その9. Auto Rename Tag

Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

開始タグを修正すると、閉じタグも修正してくれる拡張機能です。
これで閉じタグのミスがへりますね!

その10. WordPress Snippet

WordPress Snippet
https://marketplace.visualstudio.com/items?itemName=tungvn.wordpress-snippet

WordPressのスニペットを追加できる拡張機能。
WordPress開発者ならまず入れておくと安心です!