VSCode 入ってるプラグイン2024

2024/02/03に公開

個人的に必須系

JavaScript and TypeScript Nightly

https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next
TS開発は必須です。

Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
整形は必須です。

ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
ちょくちょくウザいけど、怒られてちゃ成長できないね。
コードの品質保つにも必要。

Github Copilot

https://marketplace.visualstudio.com/items?itemName=GitHub.copilot
手を出したらもう戻れない。。。

Dev Containers

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
docker環境をしようしているので必須

あると便利かも系

Tailwind CSS IntelliSense

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
自分はこれ入ってないと開発に支障が出ます。
覚えられない。。。

TypeScript Importer

https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter
自動でインポートしてくれる

Auto Close Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
閉じタグも一緒に。

Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
最初のタグ変更したら、閉じタグも変換してくれる。

Git History

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
ファイルの変更ログをたまーに見るので、あると便利です。

GitLens — Git supercharged

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
一部有料ですが、git周りの操作をGUIでできるのでよく使います。

GitHub Pull Requests and Issues

https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github
プルリクもGUIでやってしまおうって人向け
公式のプラグインだし、ブラウザの行き来しなくて済むから入れて損なしだと思う
pushしたらプルリクしますかって通知くるのも良い

Markdown All in One

https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
マークダウン書く人向け

Git Graph

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
見やすいグラフ

Todo Tree

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree
Todoコメントの一元管理

Highlight Matching Tag

https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
どこに閉じタグがあるかすぐわかる。

Pretty TypeScript Errors

https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors
コンパイルエラーを綺麗に表示してくれます。

Color Highlight

https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
カラーを見やすく

Tailwind Documentation

https://marketplace.visualstudio.com/items?itemName=alfredbirk.tailwind-documentation
Tailwindのドキュメントすぐ見れる

Path Intellisence

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
絶対パスとか相対パスとかあんまりわからないので、これ入れて楽してます
/入れると補完が出てくる
正しくない時もあるけど

テーマ系

テーマは好みです。
テンション上がるエディタにしましょう。
キラキラするものは目が疲れますので気をつけて。

One Dark Pro

https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

Gruvbox Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=JonathanHarty.gruvbox-material-icon-theme

スニペット系

あんまり使わんけど入れてるよ
自作すればいいんだけどめんどい

ES7+ React/Redux/React-Native snippets

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

Discussion