拡張機能を使用することで
①自分好みの仕様にできる
②標準には無い機能により作業効率を上げる
※あくまでサードパーティなので使用する前に評判の確認を！
機能一覧
色々調べた＋実際に使ってみて良さそうなものをピックアップしました。
（簡単なメモ書きレベルですが時間が出来たらイメージ等追加できたらと思います）
Chrome拡張機能
FireShot
Chromeストア
WEBサイトの全画面を1枚の画像ファイルにする（スクロールで隠れている部分も含めてくれる）
資料作成やエビデンスの取得などで幅広く利用できる。
ClearCache
Chromeストア
キャッシュクリアが１クリックでできる。
削除対象および対象期間をオプションで指定することが可能。
ColorZilla
Chromeストア
カラースポイト。カーソル部分のカラーコードが画面上部に表示される。
HTML5 Outliner
Chromeストア
WEBサイトのアウトラインを表示する。サイトの構造を知るために利用する。
WhatFont
Chromeストア
カーソルを当てた部分のフォントを表示してくれる。
SEO Pro Extension
Chromeストア
SEOに関する指標及びリンクや画像数などが閲覧できる
Lighthouse
Chromeストア
サイトの評価を行い、SEOの向上に役立てる
Dimensions
Chromeストア
要素間の幅を表示する。CSSコーディング時に役立つ。
Quick Source Viewer
Chromeストア
HTML/CSS/JSのソースを表示
Google Font Previewer for Chrome
Chromeストア
選択したGoogleフォントを指定したクラスの部分に疑似的に適用し、プレビューとして見ることが出来る。
VSCode拡張機能
Highlight Matching Tag
HTMLのタグにフォーカスを当てた時に、対応するタグがどれか一目でわかる
Live Server
ローカルサーバーを立ち上げ、そこでWEBサイトを動かすことが出来る
Path Autocomplete
ファイルパスの補完機能
vscode-icons
ファイルに対し種類に応じたアイコンが付与される
zenkaku
全角スペースが色付きになる
Auto Rename Tag
HTMLのタグの片方を直すともう片方も自動で変わる
CSS Peek
HTMLのクラス名の部分でF12を押すと、そのクラス名が関係するCSSがポップアップで表示される
CSSComb
フォーマット方法の設定ファイルを読み込み自動でフォーマットする
(メンバー共通の設定ファイルを使用すれば効率アップ？）
Image preview
画像タグにフォーカスを当てると画像のプレビューが出る
indent-rainbow
インデントにグラデーションが付き、見やすくなる
Autoprefixer
ベンダープレフィックスを自動でつけてくれる
※ベンダープレフィックス＝今後CSSで実装される予定の機能を各ブラウザが先行的に実装しており、その機能を使うために必要な接頭辞
※参考URL ベンダープレフィックスを自動で付ける方法
https://zenn.dev/syu/articles/e37bfef5cc19b1
Bookmarks
ファイル内の特定の行にブックマークを設定、ブックマーク間をジャンプして移動できる。
Code Spell Checker
英単語として間違っていそうな部分を指摘する
Color the tag name（タグに色つけ太郎）
タグがカラフルになる
CSSTree validator
W3Cの基準に準拠できているかチェックしてくれる（HTMLの方もあるらしいが試していない）
ESLint
JavaScriptのリアルタイム検証ツール（スタイル統一などが目標）
HTML CSS Support
HTML/CSSのインテリジェンス（補完機能）
PHP Intelephense
PHPのインテリジェンス（補完機能）
vscode-pets
VSCodeの下のほうに動物が現れる。動いているのが気になる人にはお勧めできないが、
慣れるとけっこうアリ。