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

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

VSCode1.36です。

Tipsはここから。


拡張機能 24 選


1. vscode-icons

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

screenshot.gif


2. GitLens

とにかく強い。

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

git blameする手間なくなる。

image.gif


3. Prettier

コードのフォーマットは自動でやりましょう!

複数人のこだわりをうんたらするよりも、Prettierに委ねるのが楽。対応言語多い。

関連のTipsはここ

image.png


4. Git History

Git logが見やすい

GitHistory_gif


5. Bracket Pair Colorizer

カッコの対応を色付きで表示してくれる。

ものすごく読みやすくなって最高&最高!!

なおBeta版ですが、後継となるBracket Pair Colorizer 2も出ています。

BracketPairColorizer_gif


6. Settings Sync

どこでも同じ設定で使いたい人には便利。

⇧ + ⌥ + U/D で設定をアップロード/ダウンロードできる。

似たものに、Syncingがある。


7. REST Client

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

REST_Client_gif


8. Bookmarks

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

Bookmarks_gif1

Bookmarks_gif2


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

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


settings.json

"files.trimTrailingWhitespace": true



23. Regex Previewer

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

Regex_Previewer_gif


24. Add jsdoc comments

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

jsdoc_gif


設定などのTips

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

jsonを直接編集するか、GUIから単語検索すればOK。


インデントの強調

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

highlightActiveIndentGuidetrueにすると有効

プラグインとしては以下が有名です。

Indent Rainbow : 好みが分かれそうですが、人気。

Indenticator

Guides : 赤色で強調表示してくれるだけのシンプルな機能強化


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

⌘ + ⇧ + P でコマンドパレットを開き、「Shell」で検索しインストール。

これでターミナルから「code」コマンドを使ってVSCodeを起動できる。


最終行に改行を自動挿入


settings.json

"files.insertFinalNewline": true



制御文字の表示


settings.json

"editor.renderControlCharacters": true


GitHubにREADMEあげた時に文字化けしちゃうなんてことを防げる

自動で削除したい場合は、Remove backspace control characterという拡張を入れると良さそう


折り返し表示

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


settings.json

"editor.wordWrap": "on"



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


settings.json

"workbench.editor.closeEmptyGroups": false



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


settings.json

"terminal.integrated.copyOnSelection": true



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


settings.json

"workbench.startupEditor": "newUntitledFile"



CPU使用の軽減

サイズの大きいファイルがあるとCPU使用率(CodeHelper)が高くなってしまうことがある。

以下のオプションで参照から除外するディレクトリを設定しておくと良い。


settings.json

"files.watcherExclude": {

"**/images/**": true
}


不要な行の削除


settings.json

"files.trimFinalNewlines": true



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

image.png


settings.json

"breadcrumbs.enabled": true



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

⌘ + ⇧ + T


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

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


ショートカットを使う

⌃ + ⌥ + F

JSONでの実行例↓

auto_format_json.gif


VSCodeの設定を使う

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

image.png


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

gif

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


keybindings.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エディタの色をプロジェクトごとに設定する


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


settings.json

"workbench.useExperimentalGridLayout": true


vscode_terminal_fullscreen.gif

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


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

定義にジャンプ

⌘ + クリック

元の位置に戻る

「⌃」 + 「-」


ファイル名検索

⌘ + P


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

赤線と一緒に出るこれ。

image.png

わざわざカーソルを持っていくのは面倒。

⌘ + . でカーソルを動かさずに修正内容を選択できる。

import の時に多用する。


エディタのグループ移動

基本設定 > キーボードショートカット を開くと、ショートカットを一覧できる。

例えば、 ⌃ + ⌘ + → でエディタを右のグループに移すのは多用する。

image.png


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


settings.json

"editor.copyWithSyntaxHighlighting": false