UPDATE：2023.7.18
- CATEGORY
Web制作に便利なVisual Studio Codeのおすすめ機能拡張（2023年版）
Contents
- おすすめ機能拡張
- 01.Japanese Language Pack for Visual Studio Code
- 02.DartJS Sass Compiler and Sass Watcher
- 03.Auto Rename Tag
- 04.Blockman – Highlight Nested Code Blocks
- 05.Highlight Matching Tag
- 06.WordPress Snippet
- 07.ACF Snippets – VSCode
- 08.jQuery Code Snippets
- 09.open in browser
- 10.Trailing Spaces
- 11.zenkaku
- 12.Project Manager
- 13.vscode-icons
- まとめ
いよいよ夏本番！暑さがものすごいですが皆様いかがお過ごしでしょうか。
今回はコーディングで使用しているエディタ「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-jaVisual Studio Code自体を日本語化してくれます。
02.DartJS Sass Compiler and Sass Watcher
https://marketplace.visualstudio.com/items?itemName=codelios.dartsassDartSassを使用して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-snippetWordPress関連のコードを補完してくれます。
07.ACF Snippets – VSCode
https://marketplace.visualstudio.com/items?itemName=baerkins.acf-snippets-vscodeWordPressのプラグイン「Advanced Custom Fields」を使う際に、コードの補完を行ってくれます。
例：
tf で the_field('field_name');と変換してくれます。08.jQuery Code Snippets
https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippetsjQueryのメソッドなど自動保管してくれます。
09.open in browser
https://marketplace.visualstudio.com/items?itemName=techer.open-in-browserHTMLファイル形式でコーディングしているときに、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年版としてまとめてみました。整理している中でインストールしたけどあんまり使ってないなといったものもあったので定期的に見直さないとなと思いました。
もちろんこれ以外にもとても便利な機能拡張がたくさんあるので、環境に合うものをお探しいただければと思います。
