Visual_Studio_Code（VSCode）の
おすすめ拡張機能

記事公開日：2024/05/31
最終更新日：2024/05/31

マザーシップウェブ制作事務所です。こんにちは。

当方ではWebサイトのコーディングにVisual Studio Code（VSCode）を利用しています。

無料なのと、拡張機能の豊富さ（カスタマイズ）が魅力のソフトです。

Webデザイナーからアプリやシステムを作るようなプログラマーまで、いろんな職業の方に合う拡張機能が揃っています。

WordPressでホームページを作成している私がVSCodeにインストールしている拡張機能をご紹介する記事です。

有名な拡張機能がほとんどなのですが、参考になりましたら幸いです。

拡張機能のインストール方法

以下の4ステップで簡単にインストールが可能です。

１）アクティビティバー（画面左側）の拡張機能マークをクリックする（四角が4つあるマーク）
２）インストールしたい拡張機能を「検索」する
３）インストールしたい拡張機能を「選ぶ」
４）インストールボタンをクリックする
５）必要に応じて設定

必須拡張機能

 Japanese Language Pack for VS Code

VSCodeを日本語化してくれます。英語で使いたくない場合は必須です。

公式説明URL：Japanese Language Pack for VS Code

 Live Sass Compiler

SCSS→CSSコンパイラーです。@import廃止後の最新バージョンに対応。

公式説明URL：Live Sass Compiler

 SFTP

VscodeのFTPです。保存するだけでファイルをサーバーにアップロードすることが可能です。

公式説明URL：SFTP

Project Manager

VScode内で複数のプロジェクト管理ができるようになる拡張機能です。
制作者は複数のプロジェクトを並行して作業することが多いはずです。
そんなときにこの拡張機能でプロジェクトを整理しておくと、即座にサイトの切り替えができて作業が捗ります。

公式説明URL：Project Manager

おすすめ拡張機能

 Highlight Matching Tag

こちらは対になる開始タグと終了タグをハイライトしてくれる拡張機能です。div等、見失いがちなかたにおすすめです。

公式説明URL：Highlight Matching Tag

Auto Rename Tag

開始タグ、終了タグのどちらかを変更した際に、対のタグを自動で変換してくれるタグです。

</p>を</div>に変更した場合に、開始タグ<p>も<div>に自動変換されるイメージです。

これを使うと、タグの閉じ忘れやタグの変更ミスが防げます。

公式説明URL：Auto Rename Tag

zenkaku

全角スペースを表示する拡張機能です。スペースの種類でエラーが出る問題の解消が可能です。

あと、統一されていたほうが見栄えがいいですよね！

公式説明URL：zenkaku

IntelliSense for CSS class names in HTML

classを付与するのに、なんて名前付けたか忘れたり、タイプミスしたり、ほかに使った場所までコピペするのに探したり面倒だと思ったことはないでしょうか。
この拡張機能を入れておくと、入力候補を表示して手助けしてくれるため、入力がしやすくなります。

公式説明URL：IntelliSense for CSS class names in HTML

WordPress Snippets

WordPressのタグを保管してくれます。

the_t と入力すると the_categoryと候補が出てくるようなイメージです。

公式説明URL：WordPress Snippets

UIkit 3.0 Snippets

私はCSSとJSのフレームワーク、UIkitを導入したうえでてホームページを制作しているのですが、こちらのuikitフレームワークのタグを保管してくれる拡張機能です。

uk-conと入力すると、uk-containerと候補が出てくるようなイメージです。

公式説明URL：UIkit 3.0 Snippets

以上です。

本記事では、VSCodeの拡張機能を紹介しました。

たくさん入れすぎるとソフトが重くなるので最低限を厳選していきたいですね。

拡張機能を駆使して快適なコーディング作業を送っていただけたらと思います。