POSTED | 2023.07.18

Web制作に便利なVisual Studio Codeのおすすめ機能拡張（2023年版）

WWEBのこと

WRITER : アプリコットデザインスタッフ

Web制作に便利なVisual Studio Codeのおすすめ機能拡張（2023年版）

アプリコットデザインのスタッフが綴っています。

ごきげんよう！ナカノです。
いよいよ夏本番！暑さがものすごいですが皆様いかがお過ごしでしょうか。

今回はコーディングで使用しているエディタ「Visual Studio Code」の機能拡張について、以前ご紹介したときから2年が経過し、いくつか変更になったり増えたりしましたので、2023年7月現在で愛用している機能拡張についてご紹介したいと思います。

以前書いた記事はこちら。

Visual Studio Codeのおすすめ機能拡張

おすすめ機能拡張

01.Japanese Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
Visual Studio Code自体を日本語化してくれます。

02.DartJS Sass Compiler and Sass Watcher

https://marketplace.visualstudio.com/items?itemName=codelios.dartsass
DartSassを使用してSassをCSSへ変換してくれます。

03.Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
開始タグ、終了タグのどちらかを変更すると、対応しているタグ両方変更してくれます。

04.Blockman – Highlight Nested Code Blocks

https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman
ネストされたブロックを強調表示してくれます。

05.Highlight Matching Tag

https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
対応している開始タグ、終了タグに黄色の下線を表示してくれます。
※上記の「Blockman」が入っていれば不要な気もしますが一応インストールしています。

06.WordPress Snippet

https://marketplace.visualstudio.com/items?itemName=tungvn.wordpress-snippet
WordPress関連のコードを補完してくれます。

07.ACF Snippets – VSCode

https://marketplace.visualstudio.com/items?itemName=baerkins.acf-snippets-vscode
WordPressのプラグイン「Advanced Custom Fields」を使う際に、コードの補完を行ってくれます。
例：tf　で　the_field('field_name');と変換してくれます。

08.jQuery Code Snippets

https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets
jQueryのメソッドなど自動保管してくれます。

09.open in browser

https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser
HTMLファイル形式でコーディングしているときに、OS（Windows/Mac）で設定されているデフォルトのブラウザで開いたり、他のブラウザを選択して開くこともできます。

10.Trailing Spaces

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces
行末尾の半角のスペースにマークをつけてくれます。
余計なスペースがあるかないかがすぐにわかるのであると便利です。

11.zenkaku

https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku
全角・半角スペースにマークをつけてくれます。

12.Project Manager

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
ワークスペースまたはフォルダを登録しておくことで、毎回新規ウィンドウを開く→テーマフォルダを読み込むといった手順なしに一覧からワークスペースを切り替えられるのでとても便利です。