【随時更新】使ってるVSCodeの拡張機能のまとめ

ピン留めされたアイテム

僕がVSCodeに入れてる拡張機能をまとめておきます。フロントエンド周りのものが多めです。

随時更新します。
おすすめの拡張機能があれば、お気軽にコメントをどうぞ。
「それ不要だよ」みたいなものがあればご指摘ください。

Bracket Pair Colorizer 2 → 標準搭載になったので不要

開き括弧（{）に対応する閉じ括弧（}）に色をつけて見やすくしてくれる
「2」はパフォーマンスと正確性が向上しているとのこと

この機能は本体に標準搭載になったので不要そうですね

以下の設定を追加すれば括弧記号色付け機能が使えるようになります！

{
    "editor.guides.bracketPairs": true,
    "editor.bracketPairColorization.enabled": true
}

おー、情報ありがとうございます！！！！

Debugger for Chrome

JSのデバッグのため
使い方はVisual Studio CodeでのJSのデバッグ方法がわかりやすい

DotENV

DotENVファイルにシンタックスハイライトが効いて見やすくなる

Material Icon Theme

ディレクトリやファイルの前に表示されるアイコンがカラフルに見やすくなる
気分が高まるので必須

Prettier

説明不要のフォーマッターのVSCode拡張
これがないとCSSとかJSとか書くのしんどい

ESLint

JSを書くので

TODO Highlight

TODO: やFIXME: から始まるコメント部分を見やすくしてくれる

YAML

yamlファイルを書くのが楽になる

zenkaku

全角スペースを目立たせてくれるので、うっかり全角スペースを入れてしまったときにすぐに気づける

Remove backspace control character

日本語を書いていると、バックスペース文字が入ってしまう（デフォルトの設定では見えない）ことがあるが、これを保存時に削除してくれる。
もしくはVSCodeのsettings.jsonにeditor.renderControlCharacters: trueと書いておくと、バックスペース文字が見えるようになるので、見落としを防げる

Path Intellisense

ファイルやディレクトリのパスを書くときにオートコンプリートが効くようになりはかどる

Quit Control for VSCode

⌘+Qをうっかり押してVSCodeが閉じてしまうのを防げる（確認のウィンドウが表示されるようになる）
Macの設定でもできるだろうけど楽なので

Guides

インデントが分かりやすいようにガイドライン（うっすらと表示される縦線）をたくさん表示してくれる

Import Cost

npmパッケージをimportするときにサイズを教えてくれる

Dockerで作った開発環境で開発するときに使ってる。vscodeのインテリセンス等の機能を有効に出来る。

恥ずかしながら今Remote Containersというものを知ったのですがすごく良さそうですね。

DockerとRemote Containersでの開発環境が最高過ぎる

教えていただき、ありがとうございます。

SSH越しにvscodeで編集出来る。Raspberry Piのコードを変更するときに使ってる。

Git Graph

gitの履歴を綺麗なグラフとして表示してくれます( 差分ファイルの表示も出来ます )
gitの履歴が見やすくなるので、おすすめです。

以下のオプションを有効にすればコミット時の電子署名もチェックしてくれるのですね。

settings.json

{
  "git-graph.repository.commits.showSignatureStatus": true
}

署名のチェックまでしてくれるツールは少ないので地味に有り難いです！

そんな便利なオプションがあったんですね！恥ずかしながら知りませんでした！
教えてくれてありがとうございます🙏
今度使ってみます💪

自分の編集画面を他の人に共有したり、一緒にファイルの編集をすることができます
リモートでペア・モブプログラミングや勉強会などをする時にオススメです

ありがとうございます！こちら知りませんでした。今度使ってみます！