VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)

、オススメの汎用的な拡張機能をまとめました。
Tipsは**ここ**から。

拡張機能 24 選

1. vscode-icons

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

2. GitLens

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

3. Prettier

コードのフォーマットは自動でやりましょう！
複数人のこだわりをうんたらするよりも、Prettierに委ねるのが楽。
関連のTipsはここ
👁 image.png

4. Git History

Git logが見やすい
👁 gif

5. Bracket Pair Colorizer

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

6. Settings Sync

どこでも同じ設定で使いたい人には便利。
で設定をアップロード/ダウンロードできる。
似たものに、Syncingがある。

7. REST Client

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

👁 REST_Client_gif

8. Bookmarks

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

9. PlantUML

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

10. TODO Highlight

TODOやFIXMEなどのコメントハイライトを細かく設定できる。
似たものにBetter Commentsがある。
👁 TODO_Highlight_screenshot

11. Japanese Language Pack

日本人なので。

12. Path Autocomplete

パスの入力を支援してくれる。
似たものにPath Intellisenseがある。
👁 Path_Autocomplete_gif

13. Rainbow CSV

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

14. Partial Diff

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

15. Duplicate action

ファイルやディレクトリをボタン一つで複製できて便利
👁 duplicate_action.png

16. GitHub Pull Requests

公式による拡張。
👁 image.png

17. gitignore

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

18. Todo +

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

19. Output Colorizer

出力結果を装飾してくれて便利！
👁 Output_Colorizer_screenshot

ちなみに、ログファイルの装飾は Log File Highlighter が便利！
👁 image.png

20. proto3

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

21. Bash Debug

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

22. Trailing Spaces

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

ちなみに、以下の設定をすればファイル保存時に自動で末尾の空白を削除してくれる

"files.trimTrailingWhitespace":true

23. Regex Previewer

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

24. Add jsdoc comments

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

設定などのTips

設定ファイルは、「Code > 基本設定 > 設定」で開ける。
jsonを直接編集するか、GUIから単語検索すればOK。

インデントの強調

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

プラグインとしては以下が有名です。
• Indent Rainbow : 好みが分かれそうですが、人気。
• Indenticator
• Guides : 赤色で強調表示してくれるだけのシンプルな機能強化

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

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

最終行に改行を自動挿入

"files.insertFinalNewline":true

制御文字の表示

"editor.renderControlCharacters":true

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

折り返し表示

長い行がよく出てくるなら便利

"editor.wordWrap":"on"

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

"workbench.editor.closeEmptyGroups":false

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

"terminal.integrated.copyOnSelection":true

起動時に無題ファイルを開く

"workbench.startupEditor":"newUntitledFile"

CPU使用の軽減

サイズの大きいファイルがあるとCPU使用率(CodeHelper)が高くなってしまうことがある。
以下のオプションで参照から除外するディレクトリを設定しておくと良い。

"files.watcherExclude":{"**/images/**":true}

不要な行の削除

"files.trimFinalNewlines":true

階層リンク(パンくずリスト)の表示

👁 image.png

"breadcrumbs.enabled":true

直近閉じたタブを開き直す

コードの自動フォーマット (Prettier以外)

複数人ならPrettierや各種fmt/lintを使うのが良いと思いますが、個人ならショートカットかVSCodeの設定で済ませるのもありです。

ショートカットを使う

JSONでの実行例↓
👁 auto_format_json.gif

VSCodeの設定を使う

「formaton」で検索すると、たくさんの項目が出てくるのでお好みに設定する。
👁 image.png

フォーカスの移動ショートカット

👁 gif

キーバインドの設定から、jsonファイルを開いて以下をコピペするだけ。

[{"key":"cmd+]","command":"workbench.action.nextEditor"},{"key":"cmd+[","command":"workbench.action.previousEditor"},{"key":"cmd+]","command":"workbench.action.nextSideBarView","when":"sideBarFocus"},{"key":"cmd+[","command":"workbench.action.previousSideBarView","when":"sideBarFocus"},{"key":"cmd+]","command":"workbench.action.nextPanelView","when":"panelFocus"},{"key":"cmd+[","command":"workbench.action.previousPanelView","when":"panelFocus"}]

バーの色をプロジェクトごとに変える

参考: Visual Studio Codeエディタの色をプロジェクトごとに設定する
👁 Image

ターミナルを全画面表示する

"workbench.useExperimentalGridLayout":true

👁 vscode_terminal_fullscreen.gif

ちなみに、ターミナルは で開ける。

定義にジャンプ & 元の位置に戻る

定義にジャンプ

元の位置に戻る

ファイル名検索

修正プログラムをコマンドで選択する

赤線と一緒に出るこれ。
👁 image.png

わざわざカーソルを持っていくのは面倒。
でカーソルを動かさずに修正内容を選択できる。
import の時に多用する。

エディタのグループ移動

基本設定 > キーボードショートカット を開くと、ショートカットを一覧できる。
例えば、 でエディタを右のグループに移すのは多用する。
👁 image.png

書式設定なしでテキストをコピーする

"editor.copyWithSyntaxHighlighting":false