VSCodeのおすすめ拡張機能【2022年度版】

2022年4月更新

VSCodeでHTML&CSSを使うのにおすすめの拡張機能を紹介します。
拡張機能を色々試す中で最低限入れておいた方がいいと思った物を選びました。

Language Pack for Visual Studio Code
Live Server
SFTP
Auto Rename Tag
HTMLHint
Error Lens
HTML CSS Suppor
CSS Peek

Japanese Language Pack for Visual Studio Code

インストールしたVS Codeは英語なので日本語にしたい場合は「Language Pack for Visual Studio Code」で日本語化します。

１．拡張機能をクリックして「jap・・・」ぐらいまで入力すると「Japanese Language Pack for Visual Studio Code」が表示されるので「install」をクリックしてインストールします。
２．「Restart」をクリックして再起動。
３．日本語化の完了。

Live Server

「Live Server」は編集中の変更内容をブラウザでリアルタイムに確認出来ます。

１．拡張機能をクリックして「liv・・・」ぐらいまで入力すると「Live Server」が表示されるので「インストール」をクリックしてインストールします。
２．インストールすると画面下に「Go Live」が表示されるのでクリックすると編集中のHTMLがブラウザに表示され、コードを編集するとリアルタイムに反映されます。
３．ブラウザの変更は「設定」をクリックして、「拡張機能の設定」をクリックします。
４．「liveServer > settings:Custom Browser」からブラウザを選択します。

SFTP

アップロードするにはFTPソフトなどを使いますが、VS Codeでは「SFTP」を追加する事によってアップロード出来ます。

１．拡張機能をクリックし「sftp」で検索し、「インストール」をクリックしてインストールします。
２．キーボードの「F1」キーを押してコマンドパレットを開き、「sftp」と入力して「sftp.config」をクリックすると「sftp.json」が作成されます。
３．「sftp.json」にサーバー情報を入力します。
ロリポップの例

{
  "1": "任意の名前",
  "name": "test",
  "2": "サーバーのホスト名",
  "host": "ftp.lolipop.jp",
  "3": "接続プロトコル",
  "protocol": "ftp",
  "4": "接続ポート番号",
  "port": 21,
  "5": "サーバーのユーザ名",
  "username": "lolipop.jp-test",
  "6": "サーバーのパスワード",
  "password": "password",
  "7": "サーバーのアップロードディレクトリのパス",
  "remotePath": "test/",
  "8": "保存時に自動的にアップロードする",
  "uploadOnSave": false
}