【エンジニア必見】VsCodeに必ず入れたい拡張機能(第一弾)

vscode

(2021年12月に更新)

・ VsCode入れたけど拡張機能って何入れるのがよいの?
・ 拡張機能の種類が多くてどれを入れたらいいのか全然わからない。
・ 現場でよく使われている拡張機能っって何?

1つずつ詳しく紹介します、

この記事はそんな悩みがある方に向けて書いています。

今回はTwitterで反響が大きかった『現役エンジニアが重宝している拡張機能5選』を使い方も合わせ、丁寧に解説します。

プログラミング初心者には意外と知られていないものだけを厳選しました。

導入から具体的な使用例までを丁寧に解説しています。

✔︎ 本日のテーマ

現役エンジニアが重宝している拡張機能5選

✔︎ 現役エンジニアが重宝している拡張機能5選

・① prettier code formatter
・② indent-rainbow
・③ WordPress Snippet
・④ ZenKaku

・⑤ code spell checker

それでは1つずつ詳しく紹介します、



① Prettie code formatter

prettierの拡張機能のvscode上の画像

こちらの拡張機能はコードを自動整形してくれる超有能ツールです。
実際にどのように整形されるのかを具体的に見ていきます。

こちらにインデントがバラバラなコードがあります。

pretiterを利用する前のコードの画像

コマンド+shift+s」で保存すると以下のように、一瞬で整理されます。

pretiter利用後のコード

Prettie code formatterの設定方法

Prettie code formatterの設定は2ステップで、サクッとできます。

① 保存時に自動整形される設定にする
② フォーマットの設定をする

① 保存時に自動整形される設定にする

vsocdeの左下の歯車マークをクリックして設定画面を開きます。

vscode上で拡張機能を設定する歯車アイコン

検索窓の中に「on save」と入れると「Format On Save」チェックボックスが出てくるのでチェックを入れます。

vscode上の設定画面の検索窓

これでコードを保存するタイミングで自動整形が効くようになります。
設定によっては、ビルド時やgitにpush時に自動整形が効くようにすることができます。

② フォーマットの設定をする

続いてフォーマットの設定を行います。
先程と同様に歯車マークに行き検索窓に「format」と入れます。
すると以下のような選択メニューの設定画面が出てくるので、「Pretiier – Code formatter」を選択します。

vscode上の設定画面の検索窓にformatを入力

これにてVsCodeで保存時にPretiierによって書いたコードが自動整形せれるようになります。

より詳細な使い方を知りたい人はエンジニア系Yotuber「しまぶーさん」の動画がおすすめです。
解説もわかりやすくすぐに応用につなげることができます。
しまぶーさんのPrettierの使い方解説動画は「こちら」から見れます。



② indent-rainbow

indent-rainbowのダウンロード画像

こちらの拡張機能は、インデントを合わせやすくするために、インデントに色をつけてくれます。
indent-rainbowよって、視覚的にインデントの調整を行うことができます。
今回はインデントの位置が肝である、『pug』を利用して実際に使ってみます。

indent-rainbow利用後のコード

このようにindexntがわかりやすいように色をつけてくれます。
indent-rainbowを使うことで、インデントによる要素配置のミスを避けることができます。

インデントの整理は、web制作などなどでもかなり重要項目となってくるので、学習する中でインデントの整理は意識することが大切です。

またweb制作についての具体的な学習方法は『【2021年版】web制作学習ロードマップ』でも解説しているので、ぜひ参考にしてみてください。

【2021年版】web制作学習ロードマップ



③ WordPress Snippet

WordPress Snippetの拡張機能のダウンロード画像

最後に紹介するのが『WordPress Snippet』
こちらはWordPressのテンプレートタグを自動で保管してくれます。

WordPressのテンプレートタグは長いものが多く、タイポしてしまう可能性もあるので、この拡張機能で実装効率を爆上げすることができます。

実際にWordPressのテンプレートタグである「get_footer()」を書いてみます。

コードが補完されている画像

このように補完機能が働いてWordPressで準備されている関数を表示してくれます。
こちらも設定は無しにインストール後に利用することができます。

また『WordPressの学習について知りたい』という人は、3000円以下で出来る、WordPressの案件獲得までの具体的な学習手順も合わせて参考にしてみてください。

【図解で解説】WordPress学習ロードマップ(2021年)

 

④ ZenKaku

拡張機能zenkakuのvscode上の画像

こちらの拡張機能はコードを記述する際に見落としがちな「全角」を判別して印をつけてくれます。
全角エラーは非常に気付きにくいので初心者は重宝です。
全角空白のエラーほど見つけにくいものはないですからね…😭

zenkaku利用前のコード

拡張機能をインストールするだけで設定もなく利用することができます。
プログラミングの学習始めたての頃はこのエラーで長時間かかってしまうこともありますからね。
無駄なエラーは拡張機能を利用して起こさないようにし、効率的に学習を進めましよう。



⑤ code spell checker

code spell checkerの拡張機能の画像

「code spell checker」は、コードの文字のスペルをチェックしてくれる便利ツールです。
スペルミスがある箇所にマーカを引いてくれるので英語が苦手な人におすすめです。
変数の命名などを行う際にとても重宝しています。

実際に存在しない英単語を入れてみるとマークをつけてくれます。

スペルミスしているコードの画像

code spell checkerも、入れたら設定なしに利用することができます。

チーム開発においては命名規則でタイポをすると指摘されてしまうので、早い段階で気づけるように、「code spell checker」は入れるようにすることが大切ですね。

いかがでしたでしょうか。

vscodeの拡張機能は種類が多いですが現場で重宝しているものだけを今回は厳選しました。

最後にもう一度、今回紹介した拡張機能をまとめます。

・① prettier code formatter
・② indent-rainbow
・③ WordPress Snippet
・④ ZenKaku

・⑤ code spell checker

web制作学習についての学習方法を、より詳しく学びたいという人は、『【2021年版】web制作学習ロードマップ』で徹底解説しているので、ぜひ参考にしてください!

【2021年版】web制作学習ロードマップ