Technology illustrations by Storyset
こんにちは、開発チームでエンジニアをしている和田です。
先日、開発環境の整理整頓を行っている最中にふと
「そういえば、VScode の拡張機能が増えすぎたな... 掃除するか... 🤔」
と思ったので、今回はそのついでに実際に業務中に活躍している VScode の拡張機能を一覧にしてまとめてみようと思います。
この記事の中で読者の方のエンジニアライフに役立つような便利な開発ツールを見つけていただけると嬉しいです🙏
以前、役に立つ開発ツールを一覧にしてまとめたのでこちらの記事もぜひ読んでみて下さい🙇♂️
Auto Close Tag
筆者はフロントエンドの開発では Vue のプロジェクトをよく触ります。
自動で HTML の閉じタグを補完してくれるため、楽にコーディング作業が進められます👍
Auto Rename Tag
同じく HTML タグの補完ツール。
タグの名称を変更する際に、対応する閉じタグの名称も変更してくれます。
間違いが少なくなるので超便利です。
Trailing Spaces
不要な空白を赤く強調してくれます。
当然、不要な空白は無い方がいいので、コードをきれいに保つために役立ちます！
zenkaku
思わぬ不具合を招く全角文字を白く強調してくれます。
zenkakuがあれば、全角文字列がうっかり混入するなんてことはなくなります。
Code Spell Checker
英単語のスペルミスを教えてくれます。
「動かないと思ったらスペルミスしてた😅」なんていうお決まりのミスが軽減されるので重宝してます。
Prettier - Code formatter
有名なコードフォーマッター。コレを入れてから改行云々で悩むことはありませんね。
チームでも導入必須のプラグインです！
ESLint
ESLint の設定で非推奨な記述をしている箇所に警告を出してくれます。
バグの原因になるような危険な書き方を未然に防ぐことができます🙌
Color Highlight
カラーコードが記述されている箇所に実際の色(パレット)を表示してくれます。
16進数を見るだけで色のわかる超人には不要かも😂
Edit csv
VScode 上でエクセルライクに CSV の編集ができる優れもの。
スプレッドシートやエクセルを、わざわざ開かなくてもCSVをささっと編集できます。
Rainbow CSV
CSV データを VScode で開いたときに、カラムごとに色分けしてくれます。
簡単な編集やデータの確認をする際に便利です！
Git Graph
Git の変更履歴を GUI で確認できます。ブランチが可視化されるので見やすくてありがたいですね。
GitLens - Git supercharged
コードにカーソルを重ねると「いつ誰がどんな変更をしたか？」が確認できる便利ものです。
「なんだこの〇〇コード！！って思ったら自分だ...」なんていう気づきを与えてくれます😇
Markdown All in One
マークダウンでドキュメントを書くときに VScode 上だとマルチカーソルが使えて便利ですよね。
VScode の機能をそのままに GitHub に Issue を書く感覚でマークダウンが書けちゃいます🎉
markdownlint
マークダウンのリンターです。
Markdown All in One と併用して便利にマークダウンが書けます。
Svg Preview
SVG ファイルを見たときに「これどんな画像だっけ？？」という疑問をその場で解消できます。
画像のプレビューを表示してくれるので、 SVG に悩まされるなんてことがなくなりました。
Postman
VScode 上で Postman の操作ができます。
リクエスト・レスポンスの確認にわざわざアプリを開かなくて良くなるのはありがたいですね。
TODO Highlight
TODO コメントなどをハイライトしてくれます。
ところで「いつかやるべき変更」ってコメントはいつやるんでしょうか？笑
Todo Tree
TODO コメントをサイドバーから一覧で確認することができます。
こちらの拡張機能にもハイライト機能はありますが、筆者は TODO Highlight のハイライトの方が好みなので併用しています。
ENV
味気ない env ファイルに色をつけてくれます。
どこまでが変数名でどこまでが値なのかわかりやすくなるので便利です。
YAML
yaml ファイルを触るときに補完や改行のサポートをしてくれます。
docker-compose.yml の作成が捗りますね。
最後に
最後まで読んでいただき、ありがとうございました🙇♂️
いかがだったでしょうか？
今回、紹介した他にも開発に利用している VScode の拡張機能はたくさんありますが、普段の業務で特に活躍しているものを厳選させていただきました！
皆さんのエンジニアライフのお役に立てれば幸いです。
