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

chrome拡張機能

Web Developer
一応入れとく
The QR Code Extension
検証時にスマホでページを開くのが億劫なのでQRコードを作成して読み取れるように
pixel perfect
デザインを重ねて表示できるようになる。
たまにデザインと1pxズレてますとか言われるので
Page Ruler
Pasty
大量のページを開く時などに使用。便利。
Vue.js devtools
HTMLエラーチェッカー
Awesome Screenshot
スクショだけでなく、文字を入力できたりトリミングできたりするので便利。
画面録画もできる。

chromeおまけ拡張機能

crxMouse Chrome™ Gestures
支給されたマウスでもとりあえずはブラウザバックくらい出来るようにしたい…
Advanced Font Settings
windowsのフォントが気に入らないので変更
Muzli
ホーム画面が楽しくなるので

Bookmark

VSCode拡張機能

Japanese Language Pack for Visual Studio Code
日本人だから
Bracket Pair Colorizer2
開始カッコと閉じカッコがわかりやすくなる
1との違いは処理の速さだとかなんとか…
Live Server
ぱぱっとローカルサーバーがたてられる
Project Manager
いちいちファイルごとドロップしなくてもよくなる
Figma for VS Code
VS CodeでFigmaが操作できる

Git関連

GitLens
タダでも十分使いやすい。もはや必須レベル。
Git Graph
Gitのログが見やすい

lint & formatter 関連

ソース関連

Auto Rename Tag
開始タグ・終了タグのどちらかを直すと、対応するタグを自動で変更してくれる
JavaScript (ES6) code snippets
JSの予測変換がでてくる、地味に便利
Svg Preview
SVGのプレビュー表示。色違いのアイコンを作成したいときとかも便利。

setting.json に追加したほうが便利だと思ったもの

"editor.wordWrap": "on", // 行をビューポートの幅で折り返す
"editor.renderWhitespace": "all", // スペースの表示
"editor.minimap.maxColumn": 40, // ミニマップの幅を40文字分に設定する
"editor.wordWrap": "on",// 表示領域の右端で折り返す
"files.trimTrailingWhitespace": true, // 行末のスペースを自動で消す
"files.trimFinalNewlines": true // ファイル末尾の連続した空行を自動で削除
"editor.find.autoFindInSelection": "always", // 範囲選択中はCommand-Fで選択範囲内だけ検索
"editor.codeActionsOnSave": {　// 保存時にESlintで整形
	"source.fixAll.eslint": true,
	"source.fixAll.tslint": true,
	"source.fixAll": 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"
}