BLOG

ブログ

2024/02/15 技術系

VSCodeのおすすめ拡張機能について

この記事を書いた人 Ry.K

こんにちは、Ry.Kと申します。
今回はソースコードエディタの一つであるVisual Studio Code(VSCode)でおすすめの拡張機能を6つ紹介したいと思います。

もし気になった拡張機能があれば、各リンク内ページの「Install」ボタンから、お使いのVSCodeにインストールしてみてください。

Auto Rename Tag

Auto Rename Tag

開始タグを編集した際に対応した終了タグを自動的に変更する拡張機能です。
この機能を入れていると、タグの名前を変更する必要があるときに自動的に対応するタグの名前も変更されるため、スペルミスなどを防止することができます。

Code Spell Checker

Code Spell Checker

コード内の英単語のスペルミスを検出し、波線で表示する拡張機能です。
英語が苦手な人やタイピングミスが多い人におすすめの拡張機能です。
コーディング中にリアルタイムでスペルミスを検出できるのでエラーを未然に防ぐことができます。

indent-rainbow

indent-rainbow

インデントをカラフルに装飾する拡張機能です。
装飾をすることによって、インデントが見やすくなり間違いを減らすことができます。また、インデントを正しく入れることにより、第三者が確認する際にコードが見やすくなります。

zenkaku

zenkaku

全角スペースを可視化する拡張機能で、全角スペースが明確に表示されるようになります。
全角スペースが原因で動かない、表示されないといった場合もあるため、ミスの防止に最適な機能になっています。

Prettier – Code formatter

Prettier – Code formatter

コードをルールに従って自動的にフォーマットしてくれる拡張機能です。
HTML,CSS,JavaScriptなど様々な言語のコードを綺麗に整えてくれるのでコードが見やすくなります。

Image preview

Image preview

HTMLやCSSで画像のファイルパスを指定した際に対象の画像をエディタ上でプレビューしてくれる拡張機能です。
毎回ブラウザなどで確認しなくてもパスがあっているかどうかわかるため、作業効率が良くなりミスも少なくなります。

終わりに

今回はVSCodeでおすすめの拡張機能を6つ紹介させていただきました。
VSCodeはカスタマイズ性が高いソースコードエディタです。今回紹介した拡張機能以外にもたくさんの拡張機能があります。
それぞれにあった拡張機能を入れて、コーディングしやすい開発環境をつくってみてください。



株式会社ウイングドアは福岡のシステム開発会社です。
現在、私達と一緒に"楽しく仕事が出来る仲間"として、新卒・中途採用を絶賛募集しています!
ウイングドアの仲間達となら楽しく仕事できるかも?と興味をもった方、
お気軽にお問い合わせ下さい!

アーカイブ