VisualStuido2019/2022のオススメの拡張機能

# 目的
　オススメのVisualStudio2019に対応している拡張機能を紹介したかったからです。それ以上でもそれ以下でもありません。(笑)それと、「おすすめの拡張機能を知ってる！」という方は、是非コメントで教えてしてください。

:::note
追記（変更）内容

+ 余りにも多くなってきたので整理しました
+ VisalStudio2022に対応しているかを確認して、記述しました
    + もし「対応してるよ」というものがあればお知らせください。修正します。
+ 追加で22対応の拡張機能を記述しました
    + 「〇」： 対応済み
    + 「△」： 似たような拡張機能が存在
    + 「✕」： 非対応
+ Qiitaでの新しい書き方に対応しました（この欄）
    + 個人的には「PlantUML」が使えるようになっているのは驚きました
:::

# 目次
　気になった拡張機能の名前をクリックしてください。詳細欄へ移動します。
※ 確認はするようにはしていますが、移動しない場合はコメントください。修正します。

|種類|名前|簡易説明|2022対応|
|:---:|:---:|:---:|:---:|
| テキストエディタ系 | [Better Comment](#better-comments) | コメントに色を付与 | 〇 |
| 〃 | [Code alignment](#code-alignment) | ソースコードを揃える | ○ |
| 〃 | [CodeMaid](#codemaid) | ソースコードを綺麗に | ○ |
| 〃 | [Collapse Level](#collapse-level) | ソースコードの折り畳みを自動化 | ○ |
| 〃 | [Duplicate Selection](#duplicate-selection) | 「CTRL+D」で複製 | × |
| 〃 | [Git Deff Margin](#git-deff-margin) | git上の変更が左バーで表現 | ○ |
| 〃 | [Doxygen Comments](#doxygen-comments) | Doxygenのコメントを補完生成 | ○ |
| 〃 | [Line Press](#line-press) | 空白行だけを圧縮 | △ |
| 〃 | [HLSL Tools for Visual Studio](#hlsl-tools-for-visual-studio) | HLSLにインテリセンスを付与 | ○ |
| 〃 | [Match Margin](#match-margin) | カーソル上の単語と等しいものを強調 | ○ |
| 〃 | [SmartPaster](#smartpaster2019) | 貼り付ける時にコメントなどに自動変換 | ○ |
| 〃 | [Snippet Designer](#snippet-designer) | コードスニペット作成ツール | ○ |
| 〃 | [Surround Selection](#surround-selection) | 選択した範囲をキーワードで囲む | × |
| 〃 | [Swap Selection](#swap-selection) | 選択した範囲同士を入れ替え | ○ |
| 〃 | [Toggle Comment](#toggle-comment) | 「CTRL+/」でコメントの切り替え | ○ |
| 〃 | [Trailing Whitespace Visualizer](#trailing-whitespace-visualizer) | 無駄な空白を強調・削除 | ○ |
| 〃 | [UnrealMacroGenerator](#unrealmacrogenerator) | UE4用のマクロを自動作成 | △ |
| 〃 | [Viasfora](#viasfora) | カッコに色を付与 | ○ |
| 〃 | [Visual-Studio-Translator](#visual-studio-translator) | 選択範囲を自動翻訳 | ○ |
| 〃 | [Word Highlight With Margin](#word-highlight-with-margin) | 選択単語を強調表示 | ○ |
| ソルーションエクスプローラー・UI系 | [FileIcons](#fileicons) | アイコンを変更 | ○ |
| 〃 | [Open In Explorer](#open-in-explorer) | エクスプローラーで開くを追加 | ○ |
| 〃 | [Solution Error Visualizer](#solution-error-visualizer) | エラー表示を視覚的に | ○ |
| 〃 | [Visual Studio Restart](#visual-studio-restart) | VSのリセット | △ |
| マウス・スクロール・ショートカット系 | [Mouse Navigation](#mouse-navigation) | ５ボタンマウスで戻る・進む | × |
| 〃 | [Reset Zoom](#reset-zoom) | 拡大率リセット | ○ |
| 〃 | [Smooth Scroll](#smooth-scroll) | スクロールを滑らかに | △ |
| 〃 | [Middle Click Scroll](#middle-click-scroll) | 中ボタンでスクロール | ○ |
| 〃 | [SideScroller](#sidescroller) | 「SHIFT」とマウスで横スクロール | ○ |
| 〃 | [Double-Click Maximize](#double-click-maximize) | ウィンドウの最大・最小化 | ○ |
| 〃 | [Mouse Fast Scroll](#mouse-fast-scroll) | 高速スクロール | ○ |
| 見た目系 | [ClaudiaIDE](#claudiaide) | 背景にお気に入り | ○ |
| 〃 | [Clear Tracked Changes](#clear-tracked-changes) | 変更履歴を削除 | ○ |
| 〃 | [Output enhancer](#output-enhancer) | 出力ウィンドウを色を付与 | ○ |
| 〃 | [VSColorOutput](#vscoloroutput) | 出力ウィンドウを色を付与 | ○ |

---

# <font color="red">テキストエディタ系</font>

## Better Comments
https://marketplace.visualstudio.com/items?itemName=OmarRwemi.BetterComments

https://marketplace.visualstudio.com/items?itemName=OmarRwemi.BetterCommentsVS2022

+ コメントでの「!」「?」「TODO」「x」に色を付けることを可能とする拡張機能です。あとは、コメントのサイズ変更・フォントの変更・イタリックの有無などを変更できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/3d2e4035-f9d5-36fa-dc69-eda9e1be4f10.png "「x」だと何かと事故るので、設定から「~~」にしています。")

## Code alignment
https://marketplace.visualstudio.com/items?itemName=cpmcgrath.Codealignment

+ ソースコードを「=」「;」「//」など特定の記号や文字で綺麗に揃えれる拡張機能です。
+ [ここ](http://baba-s.hatenablog.com/entry/2016/06/10/100000 "http://baba-s.hatenablog.com/entry/2016/06/10/100000")で分かりやすく説明されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/d3c8dfd1-3708-0b89-c2e0-46c7ee0e8e26.png "揃えられる文字一覧です。一番左は自由に設定できる欄になっています。")

## CodeMaid
https://marketplace.visualstudio.com/items?itemName=SteveCadwallader.CodeMaid

https://marketplace.visualstudio.com/items?itemName=SteveCadwallader.CodeMaidVS2022
+ ソースコードを綺麗にする拡張機能です。詳細は上のURLを見てください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/745b72a1-cbd0-5713-047d-fa37157dcaf9.png)

## Collapse Level
https://marketplace.visualstudio.com/items?itemName=mwilski.CollapseLevel
+ プログラムコード（関数・条件式・コメントなど）の最小化・最大化を「ALT+9」で**自動化**してくれる機能です。詳細は上記のURLを見てください。
![PuFMTMy.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/35ec49b2-a710-f4d2-5fb0-aa851e36f738.gif)

## Duplicate Selection
https://marketplace.visualstudio.com/items?itemName=ctlajoie.DuplicateSelection
+ CTRL+Dで選択範囲を複製・選択していない時は一行丸ごと複製できる拡張機能です。

## Git Deff Margin
https://marketplace.visualstudio.com/items?itemName=LaurentKempe.GitDiffMargin
+ git上の変更が左のバーに色・形（追加は<font color="MediumAquaMarine">**薄い緑の線**</font>、変更は<font color="LightBlue">**薄い青い線**</font>、削除は<font color="LightSalmon ">**薄い赤の三角形**</font>）で表現され、その部分をクリックすると、その部分のみ「変更を元に戻す」・「古いコードをクリップボードにコピー」などを可能とする拡張機能です。他にも「ファイルの比較(ファイル全体ですが、選んだ箇所が中心になります)」・「次/前の変更点へ移動」などがあります。

:::note warn
注意
　.vshistoryという隠しファイルが生成され、変更を加えたファイルごとにファイルを生成、変更を加えた際に保存するとファイル内部に.gzファイルが出現します。表面上の扱う単位はコミット単位なのにもかかわらず。
　といっても、一つ当たり、数キロバイトなので余り気になりませんが...。塵も積もれば山となる。とならないように適度に消しておきましょう。[^6]
:::

[^6]: 自分としてはデメリットよりも、メリットの方が大きいので気にしていません。

## Doxygen Comments
https://marketplace.visualstudio.com/items?itemName=FinnGegenmantel.doxygenComments
+ Doxygenのコメントを補完してくれる機能です、VSではSummaryとして補完してくれますが、Doxygenではされません
+ そんな時に役に立ちます。ちゃんと関数の引数に応じて補完もされますし、変更があった時もメニューから更新をかけれるので安心です
+ 標準では「``\brief``」となっていますが、設定で「``@brief``」のように自由に変更が可能です


## HLSL Tools for Visual Studio
https://marketplace.visualstudio.com/items?itemName=TimGJones.HLSLToolsforVisualStudio
+ HLSLを記述する際にインテリセンスを付与する神機能です。
![statement-completion.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/a104250c-de76-5377-062d-a87084ade347.gif)

## Line Press
https://marketplace.visualstudio.com/items?itemName=OmarRwemi.LinePress

https://marketplace.visualstudio.com/items?itemName=VisualStudioPlatformTeam.SyntacticLineCompression2022
+ 何も書いていない行の上下幅を縮小します。設定で圧縮率や特定の記号の無視などを変更出来ます。

## Match Margin
https://marketplace.visualstudio.com/items?itemName=VisualStudioPlatformTeam.MatchMargin

https://marketplace.visualstudio.com/items?itemName=VisualStudioPlatformTeam.MatchMargin2022
+ カーソル位置上の単語と等しい全てのテキストを強調表示できる拡張機能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/c609bf4b-a0d2-aaad-9906-2cc6f58d59bd.png)

:::note
Word Highlight With Marginとの違いについて
詳細は[Word Highlight With Margin](#word-highlight-with-margin)をご覧ください。
:::

## SmartPaster2019
https://marketplace.visualstudio.com/items?itemName=martinw.SmartPaster2013
+ クリップボードのテキストを張り付ける際に「Paste As...」で「コメントとして貼り付け（Paste as comments）」「リテラル文字列として貼り付け（Paste as literal string）」などを追加する拡張機能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/4a868524-f518-50c9-17e9-05592622bbb9.png)

## Snippet Designer
https://marketplace.visualstudio.com/items?itemName=vs-publisher-2795.SnippetDesigner

https://marketplace.visualstudio.com/items?itemName=vs-publisher-2795.SnippetDesigner2022
+ コードスニペットを作成する際に使用しています。
+ コードスニペットの作成の仕方は[このサイト](https://qiita.com/HnniTns/items/793683e06696fe94d5a4)を見て下さい
![紹介.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/8a71ed50-c0db-c768-857b-251eec4de0df.gif)
コードスニペットは検索候補に出てくる便利な機能です。

## Surround Selection
https://marketplace.visualstudio.com/items?itemName=PRIYANSHUAGRAWAL92.SurroundSelection
+ 選択した範囲を二重引用符、中括弧、括弧などで囲める拡張機能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/0aea8907-806a-3e2b-8acf-9c5d1d25edb2.png)

## Swap Selection
https://marketplace.visualstudio.com/items?itemName=SSDiver2112.SwapSelection
+ 選択した範囲同士を入れ替える拡張機能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/c9e39af8-646e-ac61-ec66-ba31b3eaab4d.png)

## Toggle Comment
https://marketplace.visualstudio.com/items?itemName=munyabe.ToggleComment

https://marketplace.visualstudio.com/items?itemName=TechHypno.ToggleComment
+ 「Ctrl+/」で「コメント化/コメント解除」を出来るようにする拡張機能です。

## Trailing Whitespace Visualizer
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.TrailingWhitespaceVisualizer

https://marketplace.visualstudio.com/items?itemName=MadsKristensen.TrailingWhitespace64
+ 行の末尾の空白を強調表示して削除する拡張機能です。[^3]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/21931052-6345-f1d2-858a-a6fdb53f47bd.png)

 [^3]: 削除タイミングは「CTRL+K, CTRL+\」か「保存時（設定で無効にもできます）」です。

## UnrealMacroGenerator
https://marketplace.visualstudio.com/items?itemName=Naotsun.Naotsun-UE-UMG
+ UnrealC++用の間違えかねないマクロ生成を自動化してくれる拡張機能です。
+ 例えば、UPROPERTY・UFUNCTION・UE_LOGなどのパラメーターを選択&入力する事によって拡張機能が他の部分を生成してくれます。UnrealC++を使っているなら神機能です。ただし、一部不満はある模様。
+ 別の拡張機能があるのですが、残念ながら有料版なので選びませんでした。

:::note
VS2022対応について
制作者ではないものの、有志の方が対応させたみたいです。詳細は下記のURLをご覧ください
https://github.com/Naotsun19B/UnrealMacroGenerator/issues/1
:::

## Viasfora
https://marketplace.visualstudio.com/items?itemName=TomasRestrepo.Viasfora

　恐らく、VS2022専用になっています。以前のバージョンが見当たらないので、もしかしたら既に削除されているかもしれません。

+ 括弧を階層ごとに色を付けることが出来る拡張機能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/45a53045-cdad-e5e7-8ad6-2a579c5e6120.png)

## Visual-Studio-Translator
https://marketplace.visualstudio.com/items?itemName=vs-publisher-1462295.Visual-Studio-Translator
+ 選択範囲のコード（コメントも）を翻訳してくれる機能したり、翻訳結果を実際に書き換えたりできる拡張機能です。更に言うと、選択範囲を指定するだけで「翻訳が出てくる＆翻訳をクリックすると翻訳結果に書き換える」機能もあります[^7]。
+ 設定で「英語から日本」「日本語から英語」に変更したり、翻訳サービスを「Google翻訳・Bing翻訳」に変更できます。
![record_000002](https://user-images.githubusercontent.com/52647796/107915550-08566280-6fa8-11eb-9725-374b49f22bd8.gif)

[^7]: 「Auto Translate Setting」という項目です。ただし、実際に使うかどうかは別問題です。

## Word Highlight With Margin
https://marketplace.visualstudio.com/items?itemName=TrungKienPhan.WordHighlight-18439
+ 選択した単語の全ての出現箇所をハイライト表示できるようになります。[^5]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/60fcb9ba-12e4-67cd-e0a4-ddca4761525d.png)

:::note worn
Match Marginとの違いについて
+ Match Margin
    + 単に、カーソル上の位置に存在する単語が強調表示される
+ Word Highlight With Margin
    + 単語を選択（ダブルクリック）しないと強調表示されない
:::

---

# <font color="red">ソルーションエクスプローラー・UI系</font>
## FileIcons
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.FileIcons
+ ソルーションエクスプローラー上のアイコンを変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/9522eb38-ca6f-03f0-52d4-44fdf3faec1e.png)

## Open In Explorer
https://marketplace.visualstudio.com/items?itemName=tux.OpenInExplorer

https://marketplace.visualstudio.com/items?itemName=Charles-Ant.OpenInExplorer2022
+ ソリューションエクスプローラー上のファイルを「エクスプローラーで開く」・「ファイルをクリップボードにコピー」などを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/530a2794-ebf7-18a8-2d3e-53230dadc623.png)

## Solution Error Visualizer
https://marketplace.visualstudio.com/items?itemName=VisualStudioPlatformTeam.SolutionErrorVisualizer

https://marketplace.visualstudio.com/items?itemName=VisualStudioPlatformTeam.SolutionErrorVisualizer2022
+ エラーや警告を含むファイルをソリューションエクスプローラで強調表示できる拡張機能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/b0e89a8c-d7b3-ffa7-c856-8927e35483e9.png)

## Visual Studio Restart
https://marketplace.visualstudio.com/items?itemName=PaulMelia.VsRestart001

https://marketplace.visualstudio.com/items?itemName=pedoc.RestartVisualStudioforvs2022preview
+ 名前の通り、VisualStudioの再起動を追加します。それだけです。
+ 自分はツールバーのカスタマイズ機能を使って、常に表示するようにしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/b3cf5da9-4788-fd0f-bd41-b491187d73d9.png)

---

# <font color="red">マウス・スクロール・ショートカット系</font>
## Mouse Navigation
https://marketplace.visualstudio.com/items?itemName=SamHarwell.MouseNavigation
+ ５ボタンマウスの「進むボタン」「戻るボタン」で「進む」「戻る」![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/2bbf3b91-79fa-7cf7-311e-46e3cd482e6e.png)
ができるようになる拡張機能です。

## Reset Zoom
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ResetZoom
+ 設定したズーム(デフォルトでは100％)に「CTRL+0, CTRL+0」で変更出来る拡張機能です。

## Smooth Scroll
https://marketplace.visualstudio.com/items?itemName=lkytal.SmoothScroll

https://marketplace.visualstudio.com/items?itemName=SergeyVlasov.SmoothCaret
+ マウスホイールによるスクロールを滑らかに出来る拡張機能です。

## Middle Click Scroll
https://marketplace.visualstudio.com/items?itemName=VisualStudioPlatformTeam.MiddleClickScroll

https://marketplace.visualstudio.com/items?itemName=VisualStudioPlatformTeam.MiddleClickScroll2022
+ マウスの中ボタンを押してマウスを動かすと、スクロール![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/78160fe0-a5e7-271f-7c03-9dbc02e7ddeb.png)が出来るようになります。

## SideScroller
https://marketplace.visualstudio.com/items?itemName=drewnoakes.SideScroller
+ シフトキーを押しながらマウスホイールを押すと、左右にスクロールが出来るようになります。

## Double-Click Maximize
https://marketplace.visualstudio.com/items?itemName=VisualStudioPlatformTeam.Double-ClickMaximize

https://marketplace.visualstudio.com/items?itemName=VisualStudioPlatformTeam.Double-ClickMaximize2022
+ ウィンドウバーをダブルクリックすると、最大化が出来るようになります。

## Mouse Fast Scroll
https://marketplace.visualstudio.com/items?itemName=SamHarwell.MouseFastScroll
+ コントロールキーを押しながらスクロールすると、拡大縮小が無効になり、代わりにスクロールを高速化させる事が出来ます。

---

# <font color="red">見た目系</font>
## ClaudiaIDE
https://marketplace.visualstudio.com/items?itemName=kbuchi.ClaudiaIDE2019

https://marketplace.visualstudio.com/items?itemName=kbuchi.ClaudiaIDE
+ 背景に画像を表示できるようにする拡張機能です。[^1]

 [^1]: そのかわりソースコードが見づらくなるというデメリット付きです。

## Clear Tracked Changes
https://marketplace.visualstudio.com/items?itemName=bsivanov.ClearTrackedChanges
+ ソースコードの左側にある変更履歴（色で表示されています）を消せる拡張機能です。 [^2]

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/3da50968-a596-3d1b-7b28-f73e1c8c70c6.png)

 [^2]: Gitでプッシュ・マージした際に一旦VSをリセットする意味で使えるかもしれません。

## Output enhancer
https://marketplace.visualstudio.com/items?itemName=NikolayBalakin.Outputenhancer
+ 出力ウィンドウの警告とエラーに色を付ける拡張機能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/1a6504bb-9eb4-779d-16d6-e741a361479c.png)
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/739c189a-efe4-c5ed-3917-fe0acb56da96.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540257/87ae69cf-f019-db46-0171-7cd88ac186a6.png)

## VSColorOutput
https://marketplace.visualstudio.com/items?itemName=MikeWard-AnnArbor.VSColorOutput

https://marketplace.visualstudio.com/items?itemName=MikeWard-AnnArbor.VSColorOutput64
+ 出力ウィンドウに警告・エラー・ビルド開始・ビルド終了などの色付けを可能にする拡張機能です。[^4]

 [^4]: 自分の環境では「Output enhancer」では色が付かず、代わりにこの拡張機能を使用しています。あと、この拡張機能は出力ウィンドウの最後に「寄付してくれ～」的なコメントが出力されるのですが、設定画面から「Yes, I Donated!」をTrueにすれば消すことが出来ます。

# 最後に
自分が導入している拡張機能は大体こんな感じです。いざまとめてみると結構ありますね。
皆さんも色々と拡張機能を導入して、快適なプログラミング生活を送りましょう～。