Help us understand the problem. What is going on with this article?

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

言語やフレームワークによらない、オススメの汎用的な拡張機能をまとめました。
VSCode1.37です。
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
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away