フロントエンドのどんな環境でも必ずVSCodeに入れる拡張機能

## アジェンダ
私的、フロントエンドの凡ゆる案件で使用可能であることが多く、最低限度あると便利だと考えているVSCodeの拡張機能だけを厳選して紹介したいと思います。

## 厳選拡張機能
### Japanese Language Pack for Visual Studio Code
言わずと知れた、VSCodeの言語を日本語にしてくれる定番拡張機能。
[Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961835/adb2346c-eb6d-295b-b66f-a0d7f86a4a55.png)

### Prettier - Code formatter
コードを整形してくれる拡張機能です。
HTML、CSS、Markdownなどを書く際に重宝します。
[Prettier - Code formatter - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961835/c656bfae-065f-75ca-6ad6-424f2e18b591.png)

### ESLint
JavaScriptとTypeScriptのコードのエラーを検出し、コードの質を高めることに役立ちます。
[ESLint - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961835/f19663ea-5dbe-0202-23f8-3f2f28aed948.png)

### HTML CSS Support
CSSの定義を参照し、HTMLコードを補完してくれます。
classやidなどの自動補完をしてくれます。
[HTML CSS Support - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961835/ccd5f6ad-d28b-658e-23be-7a6a823fc176.png)

### JavaScript (ES6) code snippets
JavaScriptのコードを書く際に、重宝するコードスニペットが揃った拡張機能です。
[JavaScript (ES6) code snippets - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961835/90886d71-443e-5806-3688-146114df0c81.png)

### ES7+ React/Redux/React-Native snippets
Reactで開発を行う際に、重宝するスニペットを使えるようにできます。
[ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961835/cd1a071b-273d-0e98-d1d3-764b0d518152.png)

### Live Server
ページを手動で更新して変更を確認する必要があるところを自動化されたローカルホスト (localhost) を起動して、ブラウザー上で動作させることができます。
[Live Server - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961835/78d3f3d1-8777-a4f4-f4cf-08671599c5f2.png)

### indent-rainbow
インデントを色付けしてくれることで、HTMLのタグやJSの中括弧 ({})の範囲を把握しやすくなります。
[indent-rainbow - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961835/b8da5a61-8a68-50f0-6025-c20aa88c8969.png)

### VSNotes
VSCodeに統合されているので、開発環境を離れることなくメモの作成や編集、検索が可能で非常に重宝します。
使用方法に関しましては、[こちら](https://qiita.com/yukisakakima/items/7f885338c7a779aa84a4)でも紹介しております。
[VSNotes - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=patricklee.vsnotes)

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961835/50287002-3da5-df37-5a0e-1d77e52327f7.png)

### Bookmarks
よく参照したいコードだけ、これでブックマークしてます。
[Bookmarks - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961835/a22b1320-9e64-d457-85ab-fc7be5877b4c.png)

## 今後追加予定
- CSSPeek
- Material Icon Theme
- TODO Highlight
- Path Intellisense
- GitLens
- SVG Preview
- Trailing Spaces
- Better Comments
- Auto Close Tag