ごきげんよう！ナカノです。
いよいよ夏本番！暑さがものすごいですが皆様いかがお過ごしでしょうか。
今回はコーディングで使用しているエディタ「Visual Studio Code」の機能拡張について、以前ご紹介したときから2年が経過し、いくつか変更になったり増えたりしましたので、2023年7月現在で愛用している機能拡張についてご紹介したいと思います。
以前書いた記事はこちら。
おすすめ機能拡張
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年版としてまとめてみました。
整理している中でインストールしたけどあんまり使ってないなといったものもあったので定期的に見直さないとなと思いました。
もちろんこれ以外にもとても便利な機能拡張がたくさんあるので、環境に合うものをお探しいただければと思います。
JOURNALが気に入ったら「いいね」してね！
