使っているVSCode拡張機能一覧(2023)

# 使っているVSCode拡張機能一覧

<aside>

- [初めに](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#%E5%88%9D%E3%82%81%E3%81%AB)
- [HTML 関連](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#html-%E9%96%A2%E9%80%A3)
    - **[Auto Rename Tag](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#auto-rename-tag)**
    - [Live Server](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#live-server)
- [CSS 関連](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#css-%E9%96%A2%E9%80%A3)
    - **[Live Sass Compiler](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#live-sass-compiler)**
    - **[Tailwind CSS IntelliSense](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#tailwind-css-intellisense)**
- [JavaScript 関連](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#javascript-%E9%96%A2%E9%80%A3)
    - **[ES7+ React/Redux/React-Native snippets](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#es7-reactreduxreact-native-snippets)**
    - [Turbo Console Log](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#turbo-console-log)
    - [JSDoc Generator](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#jsdoc-generator)
- **[Prettier - Code formatter](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#prettier---code-formatter)**
    - **[ESLint](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#eslint)**
    - [Import Cost](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#import-cost)
- [C# 関連](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#c-%E9%96%A2%E9%80%A3)
    - [C#](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#c)
    - **[C# XML Documentation Comments](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#c-xml-documentation-comments)**
- [Python 関連](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#python-%E9%96%A2%E9%80%A3)
    - [autoDocstring](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#autodocstring)
    - [autopep8](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#autopep8)
    - [indent-rainbow](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#indent-rainbow)
- [MarkDown 関連](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#markdown-%E9%96%A2%E9%80%A3)
    - **[Markdown All in One](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#markdown-all-in-one)**
    - **[Markdown Preview Mermaid Support](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#markdown-preview-mermaid-support)**
    - **[Mermaid Markdown Syntax Highlighting](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#mermaid-markdown-syntax-highlighting)**
- [その他](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#%E3%81%9D%E3%81%AE%E4%BB%96)
    - **[Discord Presence](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#discord-presence)**
    - **[DotENV](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#dotenv)**
    - **[Error Lens](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#error-lens)**
    - **[Git Graph](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#git-graph)**
    - **[GitHub Copilot](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#github-copilot)**
    - **[GitHub Copilot Chat](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#github-copilot-chat)**
    - **[Material Icon Theme](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#material-icon-theme)**
    - **[Output Colorizer](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#output-colorizer)**
    - [Trailing Spaces](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#trailing-spaces)
    - **[VSCode Animations](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#vscode-animations)**
    - **[Better Comments](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#better-comments)**
    - **[CodeSnap](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#codesnap)**
- [終わりに](notion://www.notion.so/hosimi/8e0e08f48a634c7c8282b3f5beead632?v=88f4e87f4f5a4b05ba5f766eaf38f0a2&p=1e243abfc9d0482aaf93fbd3523644be&pm=c#%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB)
</aside>

## 初めに

今回は私が普段使っているVSCodeの拡張機能一覧を並べてみました。
面白そうなものがあったら是非ご覧になった皆さんも使ってみてください。

## HTML 関連

### **[Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)**

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/7a6c1fd7-d179-aac5-12fe-9d4985fb9fc0.png)

特徴

- 1つのHTML / XMLタグの名前を変更すると、ペアのHTML / XMLタグの名前が自動的に変更されるようになります。

---

### [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

![Untitled 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/0b994425-0a55-7194-7cfe-f397bfc4adb7.png)

特徴

- ポート番号5500でブラウザが立ち上がり、編集しているHTML、CSS、JSファイルを保存するたびにホットリロードでブラウザが更新されるようになります。

---

## CSS 関連

### **[Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass)**

![Untitled 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/1ab92465-4b9b-9237-bec5-d0b99dd34aca.png)


特徴

- SASS & SCSS を リアルタイムでコンパイルしてくれます。

---

### **[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**

![Untitled 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/2cddfd92-aa9b-739b-0711-247f3e3a75ab.png)


特徴

- Tailwind CSS の 補完機能を提供してくれます。

---

## JavaScript 関連

### **[ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)**

![Untitled 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/d32e4b7a-d4ad-9649-9e19-55282f63b01f.png)

特徴

- React/Reduexのスニペットを提供してくれます。
- `jsx,tsx` ファイルで `rafc または rafce` を入力してから tab を押すと Reactコンポーネントのひな型が生成されます
- その他にも、ctrl + shift + r  で 登録されているコマンドを一覧できます

---

### [Turbo Console Log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)

![Untitled 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/b548e5dc-90c7-ffea-0d2f-da6cac823313.png)


特徴

- `ctrl + alt + l` を 押すことでConsole.logをカーソルの位置に書いてくれます。

---

### [JSDoc Generator](https://marketplace.visualstudio.com/items?itemName=kimlimjustin.jsdoc-generator)

![Untitled 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/89ed51ff-bcfe-c7db-c616-2669aac82606.png)


特徴

- `ctrl + shift + p` から 選択することでJSDocを生成してくれます

---

## **[Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)**

 ![Untitled 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/06b35487-cbab-1d1c-aa63-1bb36a900133.png)


特徴

- 設定したルールに基づいて、コードをフォーマットしてくれます。

---

### **[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)**

![Untitled 8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/e2ce2a8a-fe55-83a6-bffe-a79b829c2b89.png)


特徴

- ESLintをVS Code に統合し、画面上に表示してくれます。
- プロジェクトにインストールされているESLintライブラリを使用します。
- インストールされていない場合はグローバル版のESLintを使用します

---

### [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

![Untitled 9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/743d14bf-0c99-2d51-a614-d2eb18da025f.png)


特徴

- インポートされたパッケージのサイズをエディタ上に表示してくれます。

---

## C# 関連

### [C#](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp)

![Untitled 10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/938d11bd-8f30-c2e7-fe7f-797c7ce62cce.png)


特徴

- C#のコードを書くうえで必要な機能（リファクタリング、ナビゲーション、インテリセンス、リンティング）がそろっています。

---

### **[C# XML Documentation Comments](https://marketplace.visualstudio.com/items?itemName=k--kato.docomment)**

![Untitled 11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/bf004d21-3536-ae6a-719c-d13ee30f6225.png)


特徴

- `///` と 記述するだけで xml documentを生成してくれます。

---

## Python 関連

### [autoDocstring](https://marketplace.visualstudio.com/items?itemName=njpwerner.autodocstring)

![Untitled 12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/86de7dbb-208a-d2f8-f6e3-c329616e2e95.png)


特徴

- 関数内にカーソルを合わせて `ctrl+shift+f2` でDocstringを生成してくれます。

---

### [autopep8](https://marketplace.visualstudio.com/items?itemName=ms-python.autopep8)

![Untitled 13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/e8b2a8f9-c1ca-66ff-c0db-a19665364b73.png)


特徴

- Pythonのautopep8をサポートしたフォーマッタです。

---

### [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

![Untitled 14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/955f4cc7-19d3-f32f-be9f-8ebbcd6f6912.png)


特徴

- インデントを分かりやすく色付けしてくれます。

---

## MarkDown 関連

### **[Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)**

![Untitled 15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/060cb070-bec8-6dca-192e-95b863a9123d.png)


特徴

- マークダウンを書くために必要なもの（目次、自動プレビューなど）を提供してくれます。

---

### **[Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)**

![Untitled 16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/6a150041-5fc8-31ce-16d9-0b9d057e86ee.png)


特徴

- マークダウン内で書いたmermaid記法のチャートをプレビューしてくれるようになります。

---

### **[Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)**

![Untitled 17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/af9d4849-2b44-d48d-18fd-aa3237f9d66c.png)

特徴

- mermaid記法で書かれたものをシンタックスハイライトしてくれます。

---

## その他

### **[Discord Presence](https://marketplace.visualstudio.com/items?itemName=icrawl.discord-vscode)**

![Untitled 18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/a5a15a18-6289-01f0-82f8-c4196d2682d5.png)


特徴

- DiscordのステータスにVSCodeをプレイ中と、編集しているファイル名が表示されるようになります。

---

### **[DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)**

![Untitled 19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/cfb9a494-8737-aa5c-757d-a79f6fcd997d.png)


特徴

- `.env` の ファイルをシンタックスハイライトしてくれます。

---

### **[Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)**

![Untitled 20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/a98a2554-5048-e44a-aa82-1a822b731639.png)


特徴

- エラーが起こっている箇所をハイライトしてくれます。
- 行の末尾にエラーの原因を表示してくれます。

---

### **[Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)**

![Untitled 21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/b183fd11-2d77-3140-60e3-4c4411b03c9e.png)


特徴

- リポジトリのGirグラフを表示してくれます。
- 簡単にブランチをダブルクリックすることで簡単にチェックアウトできます。
- この他にも簡単にGitのアクションを実行することができるようになります。

---

### **[GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)**

![Untitled 22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/c72eb3e0-7390-d912-ad1c-08c7b34955ba.png)


特徴

- コードを書きながらAIが内容を推測してリアルタイムで書くべきコードを提案してくれます。

---

### **[GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat)**

![Untitled 23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/9369f42a-b0d8-1561-2b9e-4b9b5c97039e.png)


特徴

- 上記の Copilot に付随する拡張機能です
- Chat GPTのように VS Code 上で AIとチャットすることができます

---

---

### **[Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)**

![Untitled 24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/3e84e40f-8af1-04b7-776d-7f189e3209f3.png)


特徴

- エクスプローラーやタブに表示されるアイコンを変更してくれます。

---

### **[Output Colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)**

![Untitled 25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/544df752-056f-f0a1-8064-5d8a12ed975e.png)


特徴

- VSCode内の出力、デバッグパネルに表示される文字をカラー化してくれます。

---

### [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)

![Untitled 26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/3bb6e08a-e901-9c43-1e1a-1875cb0a5692.png)


特徴

- コード内にある不要な空白を保存時に削除してくれます。

---

### **[VSCode Animations](https://marketplace.visualstudio.com/items?itemName=BrandonKirbyson.vscode-animations)**

![Untitled 27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/f5b38fdc-5ce4-4642-f3c0-12db8986c7e5.png)


特徴

- VSCode内の挙動をアニメーションしてくれるようになります。

---

### **[Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)**

![Untitled 28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/c9fb70f3-f6c1-81ea-7f39-4de6687f279d.png)

特徴

- コメントを強調表示したり、TODOや警告などいつものコメントの文字色を変更することができます。

---

### **[CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)**

![Untitled 29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918370/391ded5f-d9be-9b25-1c61-ee5fe9907962.png)


特徴

- 自身が選択した範囲のコードをスクショすることができます。
- ctrl + shift + p でコマンドパレットを呼び出し、CodeSnapを選択することで撮影モードに入ります。

## 終わりに

いかがだったでしょうか？
ここで挙げた以外にも有用な拡張機能はたくさんあります。

ぜひご自身でもストアで探してみてください。