Git
VSCode

VSCodeのオススメ拡張機能 24選 (とTipsを少し)

言語やフレームワークによらない、オススメの汎用的な拡張機能をまとめました。
ダウンロード数順です。

拡張機能 24選

1. vscode-icons

アイコンがついて見やすくなる。
screenshot.gif

2. GitLens

とにかく強い。
「コミット単位でのファイル比較」や「最新のコミット内容とそのコミッター表示」など色々してくれる。
git blameする手間なくなる。
GitLens_gif

3. GitHistory

Git logが見やすい
GitHistory_gif

4. Bracket Pair Colorizer

カッコの対応を色付きで表示してくれる。
ものすごく読みやすくなって最高&最高!!
なおBeta版ですが、後継となるBracket Pair Colorizer 2も出ています。
BracketPairColorizer_gif

5. Settings Sync

どこでも同じ設定で使いたい人には便利。
「⇧ + ⌥ + U/D」で設定をアップロード/ダウンロードできる。
似たものに、Sycingがある。

6. REST Client

HTTPリクエストの操作を便利にしてくれる。

REST_Client_gif

7. Bookmarks

ブックマークしてジャンプしたり、リスト化できたりする。
Bookmarks_gif1
Bookmarks_gif2

8. PlantUML

UMLの図を書く時に便利。
PlantUML_gif

9. TODO Highlight

TODOやFIXMEなどのコメントハイライトを細かく設定できる。
TODO_Highlight_screenshot

10. Japanese Language Pack

日本人なので。

11. Path Autocomplete

パスの入力を支援してくれる。
Path_Autocomplete_gif

12. Rainbow CSV

CSVを幸せな気持ちで眺められるようになる
Rainbow_CSV_screenshot

13. Partial Diff

選択範囲の差分を手軽に確認できて便利。
Paritial_Diff_git

14. Prettify JSON

JSONの整形に。
pretterを入れるのも手ですね。

15. WakaTime

活動時間を記録してグラフ化してくれる。
WakaTime_screenshot

16. GitHub

プルリクのcheckoutやステータス確認、作成などなどをサポートしてくれる。
GitHub_screenshot

17. gitignore

github/gitignoreを参照して自動でやってくれる。
.gitignoreといえばgitignore.ioですが、これを使うのもありかも。

18. Todo +

高機能にToDoを管理したい場合は、TODO Highlightよりもこちらを使いたい。
似たものにTodo Treeがある。
ToDo+_screenshot

19. Output Colorizer

ログを装飾してくれて便利!
似たものにLog File Highlighterがある。
Output_Colorizer_screenshot

20. proto3

ProtocolBuffers3のハイライトとかスニペットとかを提供してくれる。
proto3_gif

21. Bash Debug

軽い効率化でbash書く時に便利。
Bash_Debug_gif

22. Trailing Spaces

行末の空白を強調表示してくれる。
Trailing_Spaces_image

23. Regex Previewer

正規表現をチェックする時に便利。
Regex_Previewer_gif

24. Add jsdoc comments

jsdoc入力を支援してくれる。
jsdoc_gif

おまけ: 設定などのTips

設定ファイルは、「Code > 基本設定 > 設定」で開ける。

インデントの強調

インデントの強調表示は、v1.25標準サポートされたようです。
highlightActiveIndentGuidetrueにすると有効

プラグインとしては以下が有名です。
Indent Rainbow : 好みが分かれそうですが、人気。
Indenticator
Guides

「code」コマンドのインストール

「⌘ + ⇧ + P」でコマンドパレット開き、「Shell」で検索しインストール。
これでターミナルから「code」コマンドを使ってVSCodeを起動できる。

最終行に改行を自動挿入

"files.insertFinalNewline": true

ファイルの複製

よく複製するなら、Duplicate actionという拡張を入れると便利。

制御文字の表示

"editor.renderControlCharacters": true
これをtrueにしておくと、GitHubにREADMEあげた時に文字化けしちゃうなんてことを防げる
自動で削除したい場合は、Remove backspace control characterという拡張を入れると良さそう

折り返し表示

長い行がよく出てくるなら便利
"editor.wordWrap": "on"

エディタレイアウトの保持

"workbench.editor.closeEmptyGroups": false

ハイライトされたシンボル間の移動

F7あるいはShift+F7で、選択している変数間を移動できる

ターミナルで選択したテキストを自動コピーする

"terminal.integrated.copyOnSelection": true

起動時のページ

無題ファイルを開く設定
"workbench.startupEditor": "newUntitledFile"

コード整形

Prettierが便利。
特にJSでよく使われるイメージ