VSCodeおすすめ拡張機能

※このページにある画像はMacでのキャプチャ画像のため、Windowと表示が異なる場合があるかもしれません

はじめに - 拡張機能の追加方法

• 左のアイコンが縦に並んでいるところからテトリスみたいなアイコンをクリック

• その右に拡張機能検索窓が表示される

  • この検索窓に自分が追加したい拡張機能の名前を入力すると結果が表示される

    • 検索窓には入力するのはほとんど英語になると思う

• インストールボタンを押すと拡張機能がインストールされ、使用できるようになる

おすすめ拡張機能

Git

GitLens

• Git管理されているファイルを開いているとき、各行の最終変更履歴の情報が表示される

• 薄い文字で以下のような情報が表示される

  • 変更者, いつ, 変更された時のコミットメッセージ

    • わざわざSourcetreeを見に行かなくてよい（でも深く調べるときはSourcetreeを見るのが1番）

Git History

• 各ファイルの変更履歴がVSCode上で見られる

• ファイルを開いた状態でCtrl + Shift + P

  • 出てきた入力窓にGit historyと入力

• Git: View File Historyを選択

• 開いているファイルの変更履歴一覧が表示される

開発言語に関係なく便利なもの

Bookmarks

• ファイル内の好きな行でブックマークできる

• ブックマークしたい行で右クリック→Bookmarks→Toggle

• 左のアイコンタブからブックマーク一覧が見られる

indent-rainbow

• インデントをカラフルにしてくれる

  • カラフルすぎて目がチカチカするのが嫌という方にはあまり合わないかも

Path Intellisense

• パスの入力補完をしてくれる

• 勝手にパス補完してくれる（すごい）

TODO Highlight

• `TODO:` , `FIXME:` などを入力したときにハイライトしてくれる

• デフォルトではTODO: , FIXME: がハイライトされる

• 自分で好きな文言をハイライトさせるようにカスタマイズもできる(私はNOTE:を追加しています)

// setting.json
"todohighlight.keywords": [
  {
    "text": "NOTE:",    // ハイライトさせたい文言
    "color": "#ffffff",    // 文字色
    "backgroundColor": "#00BFFF"    // 背景色
  }
],

Trailing Space

• 行末にスペースがあると赤くハイライトしてくれる

  • 綺麗なコードを保つのにあると便利かも

zenkaku

• 全角スペースを薄いグレーでハイライトしてくれる

  • インデントにうっかり全角スペースが紛れ込んでエラー！ということが防げるかも

vscode-icons

• 各ファイルのアイコンを表示してくれる

• カラフルで楽しい

• ぱっと見でどんなファイルかの推測がしやすくなる

おまけ

• 各言語ごとに便利な拡張機能を入れたいときはとりあえず言語名で拡張機能を調べるとよい

  • ex.) Reactの拡張機能を入れたいなら”React”と検索してみる

  • トップに表示されるやつは利用者が多い拡張機能をがほとんどなので、それをインストールするといい感じになる（多分）

• もっと便利な拡張機能が知りたい場合はググる🔍