現在自分が使っているChromeとVSCodeの拡張機能をまとめた備忘録。
便利なものがあれば随時追加予定。
Chrome
PerfectPixel
デザインイメージとコーディングしたページを比較するために使用。
ピクセル合わせだけでなく修正漏れ確認時にも活躍。
HTMLエラーチェッカー
開始・終了タグの過不足などを検出します。
デベロッパーツールでは閉じタグ漏れなどは補完してしまうので表示崩れてなくとも必ず確認。
Page Ruler
定規。
クリックするとマウスが十時マークになり縦横ドラッグした分だけのピクセルが表示されます。
Image Downloader
表示されているすべての画像ファイルをダウンロードすることができます。
CSSで背景画像表示している画像も可。
Wappalyzer
ワパライザー。
表示しているページのCMS、フレームワーク、ライブラリを確認できます。
Pasty
クリップボードにコピーした複数のURLをまとめて開くことができます。
HTMLのaタグからURLだけを抽出してくれるので別途コピー内容を整形する必要は無いです。
Open Multiple URLs
Pastyが使えなくなったタイミングで入れましたが今は使えるのであまり使ってません。
アイコンをクリックした際に出るテキストボックスにコピー内容をペーストして「Extract URLs from text」ボタンを押すとURLを上から順に並べてくれるので、確認用で複数URLを送る時に便利です。
Awesome Screenshot
標準のスクショでは撮ることができないページ全体のスクショを撮ることができる。
アイコンをクリックした際に出てくるリストから「Capture entire page」をクリックすると画面が自動でスクロールされ新規タブで保存内容確認ページが開きダウンロードができます。
VSCode
Japanese Language Pack
日本語化できます
SFTP
FTP接続を可能にし（ワークスペースごとにjsonで別途設定する必要あり）、ファイル保存でアップロードすることができる。
画像は追加したあとに右クリックして「Upload」する必要がある。
Sassで更新されたCSSに関しても別途「Upload」する必要があるが、まぁそういうものか。
HTML Snippets
タグ打ちが楽になります。
divと打ってエンター押すと「<div></div>」になるなど。
HTML CSS Support / HTML SCSS Support
HTML、CSSのclassやid名を補完します。
IntelliSense for CSS class names in HTML
読み込んでいるCSSのclass名をHTMLでclass指定するときに候補として出してくれます。
Insert br Tag
[Shift+Enter]で<br>が表示されます。長文の区切りなどで活躍。
indent-rainbow
インデントの深さが変わるごとに色が変わります。
Easy Sass
「.sass」または「.scss」ファイルを用意し保存すると同じディレクトリ内にCSSファイルが出力されます。
gulpなどで既にSassを使っている際は同時に使用するとエラーの元になるので注意。（そういう場合は基本無効にしますが）
gitを使う場合
GitLens
コード上にいつ、誰が追加したかなどのコミット内容が表示されるようになります。
Git History
コミット履歴が表示されるようになります。
他のGUIで確認せずに済むので良い。