More than 3 years have passed since last update.

ChromeとVSCodeの拡張機能まとめ

Last updated at 2020-01-23Posted at 2020-01-23

現在自分が使っているChromeとVSCodeの拡張機能をまとめた備忘録。
便利なものがあれば随時追加予定。

Chrome

デザインイメージとコーディングしたページを比較するために使用。
ピクセル合わせだけでなく修正漏れ確認時にも活躍。

開始・終了タグの過不足などを検出します。
デベロッパーツールでは閉じタグ漏れなどは補完してしまうので表示崩れてなくとも必ず確認。

定規。
クリックするとマウスが十時マークになり縦横ドラッグした分だけのピクセルが表示されます。

表示されているすべての画像ファイルをダウンロードすることができます。
CSSで背景画像表示している画像も可。

ワパライザー。
表示しているページのCMS、フレームワーク、ライブラリを確認できます。

クリップボードにコピーした複数のURLをまとめて開くことができます。
HTMLのaタグからURLだけを抽出してくれるので別途コピー内容を整形する必要は無いです。

Pastyが使えなくなったタイミングで入れましたが今は使えるのであまり使ってません。
アイコンをクリックした際に出るテキストボックスにコピー内容をペーストして「Extract URLs from text」ボタンを押すとURLを上から順に並べてくれるので、確認用で複数URLを送る時に便利です。

標準のスクショでは撮ることができないページ全体のスクショを撮ることができる。
アイコンをクリックした際に出てくるリストから「Capture entire page」をクリックすると画面が自動でスクロールされ新規タブで保存内容確認ページが開きダウンロードができます。

日本語化できます

FTP接続を可能にし（ワークスペースごとにjsonで別途設定する必要あり）、ファイル保存でアップロードすることができる。
画像は追加したあとに右クリックして「Upload」する必要がある。
Sassで更新されたCSSに関しても別途「Upload」する必要があるが、まぁそういうものか。

タグ打ちが楽になります。
divと打ってエンター押すと「<div></div>」になるなど。

HTML、CSSのclassやid名を補完します。

読み込んでいるCSSのclass名をHTMLでclass指定するときに候補として出してくれます。

[Shift+Enter]で<br>が表示されます。長文の区切りなどで活躍。

インデントの深さが変わるごとに色が変わります。

「.sass」または「.scss」ファイルを用意し保存すると同じディレクトリ内にCSSファイルが出力されます。
gulpなどで既にSassを使っている際は同時に使用するとエラーの元になるので注意。（そういう場合は基本無効にしますが）

###gitを使う場合

コード上にいつ、誰が追加したかなどのコミット内容が表示されるようになります。

コミット履歴が表示されるようになります。
他のGUIで確認せずに済むので良い。