ChromeとVSCodeの拡張機能まとめ

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

## Chrome

#### [PerfectPixel](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi)
デザインイメージとコーディングしたページを比較するために使用。
ピクセル合わせだけでなく修正漏れ確認時にも活躍。

#### [HTMLエラーチェッカー](https://chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf)
開始・終了タグの過不足などを検出します。
デベロッパーツールでは閉じタグ漏れなどは補完してしまうので表示崩れてなくとも必ず確認。

#### [Page Ruler](https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme)
定規。
クリックするとマウスが十時マークになり縦横ドラッグした分だけのピクセルが表示されます。

#### [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj)
表示されているすべての画像ファイルをダウンロードすることができます。
CSSで背景画像表示している画像も可。

#### [Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg)
ワパライザー。
表示しているページのCMS、フレームワーク、ライブラリを確認できます。

#### [Pasty](https://chrome.google.com/webstore/detail/pasty/hdjihnnclpjhfdbbinmgoiehhoehhlgf)
クリップボードにコピーした複数のURLをまとめて開くことができます。
HTMLのaタグからURLだけを抽出してくれるので別途コピー内容を整形する必要は無いです。

#### [Open Multiple URLs](https://chrome.google.com/webstore/detail/open-multiple-urls/oifijhaokejakekmnjmphonojcfkpbbh)
Pastyが使えなくなったタイミングで入れましたが今は使えるのであまり使ってません。
アイコンをクリックした際に出るテキストボックスにコピー内容をペーストして「Extract URLs from text」ボタンを押すとURLを上から順に並べてくれるので、確認用で複数URLを送る時に便利です。

#### [Awesome Screenshot](https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj)
標準のスクショでは撮ることができないページ全体のスクショを撮ることができる。
アイコンをクリックした際に出てくるリストから「Capture entire page」をクリックすると画面が自動でスクロールされ新規タブで保存内容確認ページが開きダウンロードができます。


## VSCode

#### [Japanese Language Pack](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
日本語化できます

#### [SFTP](https://marketplace.visualstudio.com/items?itemName=liximomo.sftp)
FTP接続を可能にし（ワークスペースごとにjsonで別途設定する必要あり）、ファイル保存でアップロードすることができる。
画像は追加したあとに右クリックして「Upload」する必要がある。
Sassで更新されたCSSに関しても別途「Upload」する必要があるが、まぁそういうものか。

#### [HTML Snippets](https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets)
タグ打ちが楽になります。
`div`と打ってエンター押すと「`<div></div>`」になるなど。

#### [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) /  [HTML SCSS Support](https://marketplace.visualstudio.com/items?itemName=P-de-Jong.vscode-html-scss)
HTML、CSSのclassやid名を補完します。

#### [IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
読み込んでいるCSSのclass名をHTMLでclass指定するときに候補として出してくれます。

#### [Insert br Tag](https://marketplace.visualstudio.com/items?itemName=1natsu.insert-br-tag)
`[Shift+Enter]`で`<br>`が表示されます。長文の区切りなどで活躍。

#### [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
インデントの深さが変わるごとに色が変わります。


#### [Easy Sass](https://marketplace.visualstudio.com/items?itemName=spook.easysass)
「.sass」または「.scss」ファイルを用意し保存すると同じディレクトリ内にCSSファイルが出力されます。
gulpなどで既にSassを使っている際は同時に使用するとエラーの元になるので注意。（そういう場合は基本無効にしますが）

###gitを使う場合

#### [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
コード上にいつ、誰が追加したかなどのコミット内容が表示されるようになります。

#### [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
コミット履歴が表示されるようになります。
他のGUIで確認せずに済むので良い。