よく使うchrome拡張機能やVSCodeの拡張機能などもろもろ

PCが変わるたび＆セキュリティが厳しくてchromeを同期できないときに何を使っていたか覚えられないのでメモ:pencil2:

## chrome拡張機能
- [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm)
一応入れとく
- [The QR Code Extension](https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb)
検証時にスマホでページを開くのが億劫なのでQRコードを作成して読み取れるように
- [pixel perfect](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi)
デザインを重ねて表示できるようになる。
たまにデザインと1pxズレてますとか言われるので:angel_tone1:
- [Page Ruler](https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme)
- [Pasty](https://chrome.google.com/webstore/detail/pasty/hdjihnnclpjhfdbbinmgoiehhoehhlgf)
大量のページを開く時などに使用。便利。
- [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
- [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)
- [Awesome Screenshot](https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ja)
スクショだけでなく、文字を入力できたりトリミングできたりするので便利。
画面録画もできる。

### chromeおまけ拡張機能
- [crxMouse Chrome™ Gestures](https://chrome.google.com/webstore/detail/crxmouse-chrome-gestures/jlgkpaicikihijadgifklkbpdajbkhjo)
支給されたマウスでもとりあえずはブラウザバックくらい出来るようにしたい…
- [Advanced Font Settings](https://chrome.google.com/webstore/detail/advanced-font-settings/caclkomlalccbpcdllchkeecicepbmbm)
windowsのフォントが気に入らないので変更
- [Muzli](https://chrome.google.com/webstore/detail/muzli-2-stay-inspired/glcipcfhmopcgidicgdociohdoicpdfc?hl=ja)
ホーム画面が楽しくなるので

## Bookmark
- [Can I use](https://caniuse.com/)
- [codic](https://codic.jp/)
- [CSS triangle generator](http://apps.eky.hk/css-triangle-generator/)
- [CSS Gradient](https://cssgradient.io/)


## VSCode拡張機能
- [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
日本人だから
- [Bracket Pair Colorizer2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
開始カッコと閉じカッコがわかりやすくなる
1との違いは処理の速さだとかなんとか…
- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
ぱぱっとローカルサーバーがたてられる
- [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)
いちいちファイルごとドロップしなくてもよくなる
- [Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
VS CodeでFigmaが操作できる


### Git関連
- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
タダでも十分使いやすい
- [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
Gitのログが見やすい

### lint & formatter 関連
- [ESlint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [SCSS Formatter](https://marketplace.visualstudio.com/items?itemName=sibiraj-s.vscode-scss-formatter)
- [pug (jade) formatter](https://marketplace.visualstudio.com/items?itemName=ducfilan.pug-formatter)
- [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)

### ソース関連
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
開始タグ・終了タグのどちらかを直すと、対応するタグを自動で変更してくれる
- [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
JSの予測変換がでてくる、地味に便利
- [Svg Preview](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview)
SVGのプレビュー表示。色違いのアイコンを作成したいときとかも便利。

### setting.json に追加したほうが便利だと思ったもの
```
"editor.wordWrap": "on", // 行をビューポートの幅で折り返す
"editor.renderWhitespace": "all", // スペースの表示
"editor.minimap.maxColumn": 40, // ミニマップの幅を40文字分に設定する
"editor.fontFamily": "\"Source Han Code JP\", Menlo, Monaco, 'Courier New', monospace", // フォント変更
"editor.find.autoFindInSelection": "always", // 範囲選択中はCommand-Fで選択範囲内だけ検索
"editor.codeActionsOnSave": {　// 保存時にESlintで整形
    "source.fixAll.eslint": "explicit",
    "source.fixAll.tslint": "explicit",
    "source.fixAll": "explicit"
},
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"files.trimTrailingWhitespace": true, // 行末のスペースを自動で消す
"files.trimFinalNewlines": true // ファイル末尾の連続した空行を自動で削除
"emmet.triggerExpansionOnTab": true, // TAB キーを押したときに Emmet 省略記法が展開
"emmet.includeLanguages": {
    "vue-html": "html"
},
"eslint.enable": true, // ESlint関係
"eslint.debug": true,
"eslint.alwaysShowStatus": true,
"eslint.lintTask.enable": true,
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
"[html]": { // 各言語ごとの設定ができる
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
},
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}
```