# 「フロントエンド開発の便利ツール・設定・プラグインなど」を語るフロントエンドTechCafe#2 下書き

## 前回からの繰越

### 話せなかった「便利ツール・設定・プラグイン」など（庄禮）

* VSCode拡張
* LiveServer
* Bookmarks
* Bracket Pair Colorizer 2
* Todo Tree
* indent-rainbow
* Auto Rename Tag
* Chrome拡張
* iMacros
* tips（クロジーングトークで紹介）
* Chromeのdevツールでminifyを解除する
* Chromeのdevツールでネットワーク速度をエミュレートする
* Webページ関連（参考情報系）
* MDN
* Can I use
* JSライブラリ
* htmlhint
* API関連
* Postman
* WireMock
* Open API generator

### 盛り上がった「便利ツール・設定・プラグイン」など（庄禮）

#### 社員おすすめ

* live share
* 反応よし
* Vue.js Devtools
* おすすめとして話したけど反応的には微妙？

#### 聞きたいランキング

* VSCode拡張
1. Visual Studio Code Remote Development
2. Regex Previewer
* 反応よし（Twitter多め）
3. JSON to TS
* Chrome拡張
1. JavaScript Errors Notifier
2. DevTools z-index
* ポツポツ反応
3. Pesticide for Chrome
* JSライブラリ
1. json server
2. Testing library
* その他
1. Tabnine & kite
* ポツポツ反応

#### 参考（前回タイムテーブル）

1. オープニング（15min）
2. live share（10min）
3. VSCode拡張（15min = 5min×3）
4. Vue.js Devtools（10min）
5. Chrome拡張（7min）
6. JSライブラリ・その他（10〜15min）
7. クロージング(15〜20min)

合計1h40min

## 新規「便利ツール・設定・プラグイン」など

### 庄禮

#### Chrome拡張

* OneTab
* https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall/related
* 開発に使うわけではないが、chromeのタブをストックしておくツール
* 調べ物などで大量にタブを開いておくと、どこになにがあるかわからなくなったりメモリを使うので一時退避におすすめ

#### その他（スマホエミュレータ）

- AndroidStudio（IntelliJ）のAndroidエミュレータ
- https://qiita.com/sasayabaku/items/fc30fa131b23c2e30acb
- 上は古い記事なので最新の記事か自前のに差し替え
- https://t-dilemma.info/chrom-devtools-on-avd/
- XcodeのiPhoneエミュレータ
- https://blanche-toile.com/web/web-devtools-ios-simulator

### 中田
#### VSCode拡張
- Jest Runner
- テスト関数ごとに1クリックでrun/debugできる

#### Chrome拡張
- Awesome Screenshot
- https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ja
- 画像・映像キャプチャの取得、ダウンロード、共有をまとめて行える
- chromeの画面だけではなく、デスクトップ画面全体やカメラのみにも対応
- stylus
- ページに好きなCSSを設定でき、保存もできる
- https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja

#### その他
- Gitpod
- ブラウザで動くVSCode
- Github, BitBacket, GitLabのリポジトリをクローンして開発できる
- https://www.gitpod.io/
- https://qiita.com/mouse_484/items/394a4984f749cc201422

### （藤澤）

`TODO`