![](https://jobtech.jp/wp-content/uploads/vscode.png)
Visual Studio Code おすすめ拡張機能
公開日:2019年09月12日
更新日:2024年06月29日
拡張機能のインストール方法
- 「拡張機能」ボタンをクリック
- 検索ウィンドウに「検索したいキーワード」を入力
- インストールしたい拡張機能の「Install」をクリック
![](https://jobtech.jp/wp-content/uploads/image-1379.png)
拡張機能を一時的に無効にする方法
- 「拡張機能」ボタンをクリック
- 検索ウィンドウに何も入力しないとインストール済みの拡張が一覧表示される
- 無効にしたい拡張機能の「歯車」をクリック
- 「無効にする」を選択
![](https://jobtech.jp/wp-content/uploads/image-1403.png)
拡張機能のアンインストール方法
- 「拡張機能」ボタンをクリック
- 検索ウィンドウに何も入力しないとインストール済みの拡張が一覧表示される
- アンインストールしたい拡張機能の「歯車」をクリック
- 「アンインストール」を選択
- VSCodeを再起動(再起動しなくてもよい場合が多いが念のため再起動することを推奨)
![](https://jobtech.jp/wp-content/uploads/image-1404.png)
基本機能の拡張
Japanese Language Pack for Visual Studio Code
![](https://jobtech.jp/wp-content/uploads/image-1394.png)
メニューの文言などを日本語化する。
IntelliCode
![](https://jobtech.jp/wp-content/uploads/image-1391.png)
予測変換をAIコード補完して使いやすくする。
予測変換が消えてしまったときは、予測変換を表示したい位置にカーソルを移動して「Control」+「Space」を押す。
![](https://jobtech.jp/wp-content/uploads/image-1395.png)
indent-rainbow
![](https://jobtech.jp/wp-content/uploads/image-1392.png)
インデントを色分けして見やすくする。
![](https://jobtech.jp/wp-content/uploads/image-1393.png)
HTML
HTMLHint
![](https://jobtech.jp/wp-content/uploads/image-1385.png)
開始タグと終了タグのセットができていない場合など、簡易的なHTML文法チェックをしてくれる。
![](https://jobtech.jp/wp-content/uploads/image-1386.png)
Live Server
![](https://jobtech.jp/wp-content/uploads/image-1398.png)
画面右下の「Go Live」をクリックすることでWebページを表示確認できる。HTMLファイルやCSSファイルを更新すると自動で画面の内容も更新される。
![](https://jobtech.jp/wp-content/uploads/image-1399.png)
Auto Rename Tag
![](https://jobtech.jp/wp-content/uploads/image-1400.png)
開始タグを変更すると終了タグも変更される。開始タグと終了タグを同時に編集できるので便利だが、知らぬ間にタグが変わっていることが使いづらいと感じる人もいる。使いづらいときはアンインストールすること。
htmltagwrap
![](https://jobtech.jp/wp-content/uploads/image-1401.png)
対象文字列を選択して「Alt」+「W」で、対象文字列を囲むようにタグ付けされる。
初期値が「p要素」なので、div要素に変更する場合は設定を書き換える。
{
/* htmltagwrap */
"htmltagwrap.tag": "div",
"htmltagwrap.autoDeselectClosingTag": true
}
※終了タグが開始タグになってしまう現象が起きる(2022年12月)
同じタグのコンテンツ
同じカテゴリーのコンテンツ