【作業効率UP！】VSCodeでコーディングを始める前に必ず入れておきたいおすすめ拡張機能
こんにちは！muu(むぅ）です。
IMG-FLOWでコーディングやECサイトの運用保守を担当しています。
私はコーディングをする時にScodeというテキストエディタを使用しています。
今回はHTML、CSSコーディングがもっと捗るVScodeのおすすめ拡張機能をご紹介します！
INDEX
拡張機能の入れ方
①上記画像の「拡張機能アイコン」をクリック。
②検索窓でインストールしたい拡張機能を検索します。
③インストールボタンをクリックします。
※拡張機能によっては、VScodeを再度立ち上げ直さないと、有効にならない場合があります。
環境構築のための拡張機能
■ Japanese Language Pack for Visual Studio Code
VScodeを日本語化してくれます。
■ Live Server
簡易のローカルサーバーを立てることができる拡張機能。
HTMLやCSSの更新を保存すると、プレビュー画面にも変更を反映・表示してくれます。
■ Live Sass Compiler
Sassを自動でコンパイルしてくれる拡張機能。
Sassを利用中、または今後利用を考えているなら、必ず入れておきたい。
Sass導入のハードルがかなり下がります。
入力補助のための拡張機能
■ Path Intellisense
ファイルパスを入力を補助してくれる拡張機能。
パスの入力中に、ディレクトリ名やファイル名の候補が出てきます。
似たような拡張機能で「Path Autocomplete」というのもあります。お好みで選んでください。
■ Html CSS Support
HTMLでclass名を入力中、CSSで作成したclass名が候補に出るようになります。
class名の記述ミスを防ぎ、時短にもなります。
■ Clipboard Ring
「コピー」や「カット」した内容を複数件、保存しておける拡張機能。
デフォルトでは最大10件の内容を保存できますが、設定で自由に増やすことができます。
視認性向上のための拡張機能
■ indent-rainbow
インデントを色分けしてくれる拡張機能。
インデントが強調され、分かりやすくなります。
■ Bracket Pair Colorizer 2
対応する括弧 { } ( ) [ ] を色分けして表示してくれる拡張機能。
かなり読みやすくなり、ミスも減るので、ぜひ入れておきたい。
コーディングがもっと捗る拡張機能
■ Auto Rename Tag
タグを編集すると、対応するタグも同じように変更してくれる拡張機能。
■ htmltagwrap
選択範囲をタグで囲んでくれる拡張機能。かなり使います。
選択範囲を選んで、 alt ＋ W で使用可能です。
※VScodeの標準機能でも同様の機能がありますが、ショートカットを自分でカスタムする必要がでてきます。
■ zenkaku
全角スペースを強調して表示してくれる拡張機能。
全角スペースが原因となるエラーで、無用な時間を使わずに済む。
日本語を記述することが多いなら、入れておいて損はないです。
■ Trailing Spaces
行末のスペースを強調してくれる拡張機能。
Trailing Spacesの設定を変更することで保存時に自動で行末スペースを削除してくれる機能もあります。
※VScodeの標準機能でも行末スペースを削除してくれる設定があります。私はTrailing Spacesは強調表示の機能のみを使用していて、保存時の行末スペースの自動削除はVScodeの標準機能を使用しています。
アイコン・テーマカラー系
私が現在使用しているアイコンとテーマカラーをご紹介します。
※アイコンやテーマカラーの設定は、視認性と好みの問題なので、色々試して好きなものを選んでくださいね！
■ Vscode-icons
ファイルのアイコンがより分かりやすくなる拡張機能。
■ Miami
水色とピンクを中心とした南国っぽいイメージのテーマです。見やすさと可愛さがあり、結構気に入っています。
色々と試しましたが、現在はMiamiに落ち着きました。
まとめ
今回は特にコーディング初心者におすすめのVScodeの拡張機能についてご紹介させていただきました。
テキストエディタを自分好みにカスタマイズしていくのはわくわくしますよね！
VScodeには、今回紹介した以外にも数多くの拡張機能が用意されています。
作業効率アップのためにも、ぜひ色々な拡張機能を利用してみてください。
最後まで読んでいただき、ありがとうございました！
また弊社では、一緒にWEB業界を盛り上げてくれるメンバーを募集中です！ デザインやWEB制作に興味がある方は、ぜひエントリーページからご応募ください。
