トップページ > ブログ > Web制作に便利なVisual Studio Codeのおすすめ機能拡張(2023年版)

BLOG

ブログ

UPDATE:2023.7.18

CATEGORY

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

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

13.vscode-icons

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

ファイルツリーに、そのファイルタイプにあったアイコンをつけてくれます。

まとめ

2年経過したので改めて2023年版としてまとめてみました。
整理している中でインストールしたけどあんまり使ってないなといったものもあったので定期的に見直さないとなと思いました。
もちろんこれ以外にもとても便利な機能拡張がたくさんあるので、環境に合うものをお探しいただければと思います。

Happiness in Design

シアワセをデザインする会社

営業ゼロで年間600件以上
お問い合わせをいただいている
ノウハウを惜しみなく。

アプリコットデザインには創業当初から営業マンはいません。
創業当初からWEBを活用することに重点を置いて、これまで試行錯誤してきました。その結果、年間600件以上の問い合わせををこのホームページから得ています。ホームページという集客ツールを提供している私たち自身が、自社のホームページで集客できないのでは、お客様に自信を持ってオススメすることはできません。自社の実験から「WEBを活用して集客するためのノウハウを蓄積」した上で、誰よりもホームページの素晴らしさを知り、自信をもってお客様にご提供していきたいと考えます。

VIEW MORE

CONTACT

お問い合わせ・ご相談は
お気軽にどうぞ。

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

プロジェクト

それぞれの
らしさ溢れる日常を。

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ/ドッグサロン/
ネイルサロン/スクール

tone village

We're open.

採用情報

recruit info

豊かで彩りのある社会をつくる!

私たちは仕事を通して、一人でも多くの人が未来に対する希望を描けるような、そんなワクワクする社会をつくっていきたいと思っています。

VIEW MORE