Web制作に便利なVSCodeのおすすめ拡張機能

プログラミングやコーディングを行う際、「エディタ」と呼ばれるソフトウェアを使用します。
(エディタとは高機能なメモ帳のようなものです。)

エディタには多くの種類がありますが、その中でも現在エンジニアの間で最も利用されていると言われているのが「Visual Studio Code（ビジュアル・スタジオ・コード、通称：VSCode）」です。

VSCodeの拡張機能は様々ありますが、扱う言語や目的によって適したものを使うことでかなり業務の効率化が図れます。

今回は、私がWeb制作で実際に使用しているテキストエディタ「Visual Studio Code」の便利な拡張機能についてご紹介します。

1.Japanese Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

Visual Studio Codeを日本語化する。

2.Project Manager

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

ワンクリックで対象のプロジェクトを開くことができる。

3.indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

インデントに色を付ける。

4.SFTP

https://marketplace.visualstudio.com/items?itemName=liximomo.sftp

FTPソフトを立ち上げなくても、ファイルアップロードを自動で行うことができる。

5.Highlight Matching

https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

HTMLの開始タグと対応する終了タグをわかりやすく表示してくれる。

6.HTML CSS Support

https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

Class名入力時に、CSS側でスタイル適用しているClass名を候補に出力させる補完機能。

7.htmltagwrap

https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

選択文字列部分をhtmlタグで囲む。

8.PHP Intelephense

https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client

コード補完やコードチェックをしてくれる。