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

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

• Can I use
• codic
• CSS triangle generator
• CSS Gradient

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 関連

• ESlint
• Prettier - Code formatter
• SCSS Formatter
• pug (jade) formatter
• EditorConfig

ソース関連

• 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"
}