【初学者】個人的に導入して良かったVSCodeの拡張機能をChatGPTに紹介してもらってみた！

# はじめに
お疲れさまです！
おおくまです！

現在、私はプログラミングスクールにて``Ruby on Rails``を中心に学習しています！
また、``エディタ``は``VSCode``を使用しています！
これまでに様々な``VSCode``の``拡張機能``を試してみました！
その中で個人的に導入して良かったものをいくつかご紹介します！
解説は``ChatGPT``にお願いしました！
そのため誤った内容がある場合があります！
ご了承ください！

# 注意点
:::note warn
私はプログラミング学習中で、初学者です。
内容に誤りがある場合があります。
コメント等で教えていただけると幸甚です。
:::

# プロンプト
:::note info
この``VSCode``の``拡張機能``について教えてください。
:::

# 拡張機能

## Dracula Official
[Dracula Official](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula)は、Visual Studio Code（VSCode）用のテーマ拡張機能で、Draculaテーマファミリーの一部です。Draculaは、さまざまな開発環境で利用可能な、ダークモードのコードエディタテーマとして広く人気があります。この拡張機能は、VSCodeの外観をDraculaテーマに合わせて変更し、ダークで洗練された外観を提供します。

https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula

:::note info
VSCodeを開いた状態で、commandキーを押しながら、K、Tの順に押すとインストール済みのテーマの中からテーマを選択し、変更することができます！
:::

## Code Spell Checker
[Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)は、Visual Studio Code（VSCode）の拡張機能で、コード内のスペルミスや文法エラーを検出し、修正するのに役立つツールです。主にソフトウェア開発者やプログラマー向けに設計されており、コード内のコメントや文字列リテラル内のスペルミスを見つけるのに役立ちます。

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

## endwise
[endwise](https://marketplace.visualstudio.com/items?itemName=kaiwood.endwise)は、Visual Studio Code（VSCode）の拡張機能で、Rubyプログラムの記述をサポートするツールです。Rubyは、コードブロックを do と end キーワードで囲む言語であり、ブロックの終了部分の end キーワードを正確に配置することが重要です。endwise 拡張機能は、Rubyコードの記述を効率的にするために設計されています。

https://marketplace.visualstudio.com/items?itemName=kaiwood.endwise

## indent-rainbow
[indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)は、Visual Studio Code（VSCode）の拡張機能で、コードのインデント（字下げ）を視覚的に強調表示するツールです。この拡張機能は、コードの可読性を向上させ、インデントレベルを一目で理解できるようにするのに役立ちます。

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

## Prettier - Code formatter
[Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) は、Visual Studio Code（VSCode）の拡張機能で、コードのフォーマットを自動化し、コードの一貫性を保つのに役立つツールです。この拡張機能は、多くのプログラミング言語に対応しており、コードのスタイルや構造を整え、可読性を向上させます。

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

## Rainbow End
[Rainbow End](https://marketplace.visualstudio.com/items?itemName=jduponchelle.rainbow-end)コード内で "end" キーワードを視覚的に区別しやすくするツールです。特にプログラミング言語において、制御構造やブロックの終了を示す "end" キーワードが多く使われる場合、コード内で対応する "end" キーワードを見つけることが難しくなることがあります。Rainbow End 拡張機能は、異なる "end" キーワードの階層を色で強調表示することにより、これを解決します。

https://marketplace.visualstudio.com/items?itemName=jduponchelle.rainbow-end

## Rainbow Tags
[Rainbow Tags](https://marketplace.visualstudio.com/items?itemName=voldemortensen.rainbow-tags)は、コード内のHTMLやXMLタグを視覚的に区別しやすくするツールです。HTMLやXMLなどのマークアップ言語では、開始タグと終了タグがペアで対応していることが多く、特に複雑な構造を持つドキュメントでは、タグの対応を追跡することが難しくなることがあります。Rainbow Tags 拡張機能は、この問題を解決するために、開始タグと終了タグを異なる色で強調表示し、視覚的に対応を示します。

https://marketplace.visualstudio.com/items?itemName=voldemortensen.rainbow-tags

## SQLite Viewer
[SQLite Viewer](https://marketplace.visualstudio.com/items?itemName=qwtel.sqlite-viewer)は、Visual Studio Code内でSQLiteデータベースを閲覧および編集するためのツールとして提供されています。SQLite Viewer 拡張機能は、SQLiteデータベースファイルを直接Visual Studio Code内で開き、データベースの内容を閲覧、クエリを実行し、データを編集できるようにします。

https://marketplace.visualstudio.com/items?itemName=qwtel.sqlite-viewer

## Tailwind CSS IntelliSense
[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)は、Tailwind CSSフレームワークを使用する開発者向けに設計されており、Tailwind CSSのコーディングを支援するためのツールです。Tailwind CSSは、HTML要素に直接クラスを適用することでスタイリングを行うCSSフレームワークで、非常に人気があります。Tailwind CSS IntelliSense 拡張機能は、Tailwind CSSのクラスやスタイルを自動補完し、コードの記述を効率化します。

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

## Trailing Spaces
[Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)は、コード内の余分な空白文字（主に行末に存在する空白文字）を検出し、削除するためのツールです。

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

## vscode-icons
[vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)は、ファイルとフォルダのアイコンをテーマ別に表示し、Visual Studio Codeのワークスペース内のファイルとフォルダを視覚的に区別するためのツールです。

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

## zenkaku
[zenkaku](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku) は、テキストの全角文字を半角文字に変換するためのツールです。この拡張機能は、主に日本語のテキスト編集に役立ちます。日本語の文字には半角文字と全角文字があり、テキストの整形やデータの正確性のために、半角文字と全角文字を適切に使い分ける必要があります。Zenkaku 拡張機能は、テキスト内の全角文字を半角文字に変換することができます。

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

# さいごに
他にも便利な``VSCode``の``拡張機能``がたくさんあると思います！
教えていただけると幸甚です🙇
最後まで読んでいただきありがとうございました！