【VSCode】入れておくべき?! 拡張機能10選

# はじめに
<!-- 発端や概要を記載 -->
こんにちは、エンジニア2年目の嶋田です。
まずは、この記事を開いていただきありがとうございます！
今回は、普段VSCodeを使って開発をしている私が使っていて便利だなと思った拡張機能をご紹介しようと思います！

# 目次
- [ファイルとフォルダの可視化](#ファイルとフォルダの可視化)
    - [vscode-icon](#vscode-icon)
- [コードの可読性向上](#コードの可読性向上)
    - [indent-rainbow](#indent-rainbow)
    - [Trailing Spaces](#TrailingSpaces)
- [タグや括弧の自動補完](#タグや括弧の自動補完)
    - [Auto Close Tag](#AutoCloseTag)
    - [Auto Rename Tag](#AutoRenameTag)
- [テキスト操作の効率化](#テキスト操作の効率化)
    - [change-case](#change-case)
- [コードの変更履歴管理](#コードの変更履歴管理)
    - [Git History](#GitHistory)
    - [GitLens — Git supercharged](#GitLens—Gitsupercharge)
- [ファイルパス自動補完](#ファイルパス自動補完)
    - [Path Autocomplete](#PathAutocomplete)
- [コード内のスペルミス検出](#コード内のスペルミス検出)
    - [Code Spell Checker](#CodeSpellChecker)

<!-- 各チャプター -->
<a id="topic1"></a>
## ファイルとフォルダの可視化

<a id="Chapter1"></a>
### vscode-icon
フォルダやファイルにかわいいアイコン表示されます。
ファイルやフォルダを簡単に識別することができ、効率と気分が少しだけあがります。

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

<a id="topic2"></a>
## コードの可読性向上

<a id="Chapter2"></a>
### indent-rainbow
インデントのレベルによって色を付けて表示する拡張機能です。
ネストされたコードブロックを視覚的に理解しやすくし、コードの可読性を向上させます。
インデントの深さによって色が変わるため、ブロックの範囲が一目で分かるようになります！

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

<a id="Chapter3"></a>
### TrailingSpaces
行末に不要な空白（トレイリングスペース）を検出して表示し、無駄な空白文字を除去してくれる拡張機能です。
コードの品質を向上させ、無駄な空白文字を除去してファイルサイズを削減します。余分なスペースを防ぎ、コードの整形と可読性を高めます！

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

<a id="topic3"></a>
## タグや括弧の自動補完

<a id="Chapter4"></a>
### Auto Close Tag
HTML/XMLタグや一部のプログラミング言語の括弧を自動的に閉じてくれます。
タグや括弧の閉じ忘れを防ぎ、コード正確性の向上が期待できます！

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

<a id="Chapter5"></a>
### Auto Rename Tag
HTML/XMLタグやプログラムの開始タグと終了タグを一括でリネームしてくれます。
タグの名前を変更した際に、それに対応する終了タグも自動的にリネームされるため、コードの整合性を保ちつつ、可読性を向上させてくれます。また、コードのリファクタリング時に便利で、タグの名前変更に伴う手作業ミスを防げます！

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

<a id="topic4"></a>
## テキスト操作の効率化

<a id="Chapter6"></a>
### change-case
選択したテキストを大文字・小文字・キャメルケースなどに変換してくれる拡張機能です。
コーディングの効率を向上させ、テキストのケース変更にかかる手間を省きます。テキストのスタイルをショートカットキーひとつ(Ctrl/Cmd+P)で素早く変更できます！

https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

<a id="topic5"></a>
## コードの変更履歴管理

<a id="Chapter7"></a>
### Git History
Gitリポジトリのコミット履歴を可視化し、ブラウズできるようになる拡張機能です。
各コミットに含まれる変更内容を細かく確認できます。変更されたファイルや行の追加・削除内容を見ることができるので、コードの変更内容を理解しやすくなります。開発プロセスの透明性を高め、チーム全体の品質管理をサポートする強力なツールです！

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

<a id="Chapter8"></a>
### GitLens — Git supercharged
Gitリポジトリのコード内で、各行の最終コミットや作者などの情報を表示してくれます。
コードの変更履歴をより詳細に追跡し、コードの起源や詳細な変更内容を理解しやすくなります！

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

<a id="topic6"></a>
## ファイルパス自動補完

<a id="Chapter9"></a>
### Path Autocomplete
ファイルパスやディレクトリパスの入力を自動補完できるようになります。
パスを手動で入力する手間を省き、ファイルの移動や参照を効率的に行うことができます！

https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

<a id="topic7"></a>
## コード内のスペルミス検出

<a id="Chapter10"></a>
### Code Spell Checker
コード内のスペルミスを検出して警告してくれます。
コード内のスペルミスを早期に発見し、人為的凡ミスを防ぎます。

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

<a id="reference"></a>

# 最後に
コードの可読性が向上したり、作業効率化が図れたり、手作業ミスを防ぐことにつながったりとメリットばかりなので是非インストールしてみてください✔︎
そして、皆さんのおすすめの拡張機能がありましたら是非コメントで教えてください！