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

言語やフレームワークによらない、オススメの汎用的な拡張機能をまとめました。
Tipsはここから。

拡張機能 24 選

1. vscode-icons

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

2. GitLens

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

3. Prettier

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

4. Git History

Git logが見やすい

5. Bracket Pair Colorizer

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

6. Settings Sync

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

7. REST Client

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

8. Bookmarks

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

9. PlantUML

UMLの図を書く時に便利。

10. TODO Highlight

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

11. Japanese Language Pack

日本人なので。

12. Path Autocomplete

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

13. Rainbow CSV

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

14. Partial Diff

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

15. Duplicate action

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

16. GitHub Pull Requests

公式による拡張。

17. gitignore

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

18. Todo +

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

19. Output Colorizer

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

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

20. proto3

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

21. Bash Debug

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

22. Trailing Spaces

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

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

"files.trimTrailingWhitespace": true

23. Regex Previewer

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

24. Add jsdoc comments

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

設定などのTips

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

インデントの強調

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

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

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

⌘ + ⇧ + P でコマンドパレットを開き、「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

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

"breadcrumbs.enabled": true

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

⌘ + ⇧ + T

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

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

ショートカットを使う

⌃ + ⌥ + F

JSONでの実行例↓

VSCodeの設定を使う

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

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

キーバインドの設定から、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エディタの色をプロジェクトごとに設定する

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

"workbench.useExperimentalGridLayout": true

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

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

定義にジャンプ
⌘ + クリック

元の位置に戻る
「⌃」 + 「-」

ファイル名検索

⌘ + P

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

赤線と一緒に出るこれ。

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

エディタのグループ移動

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

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

"editor.copyWithSyntaxHighlighting": false