フロントエンドエンジニア入門 VS code 初心者向け初期設定extension(拡張機能) 10選



Visual Studio Code(VS Code)の入門の時最初これあれば開発が便利にできるextension（拡張機能)をまとめました。

## 1.[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
リアルタイムでブラウザ更新がされコードの修正がしやすくなります。コード修正後ブラウザの更新はもういらないです！

![vscode-live-server-explorer-menu-demo-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/42452200-c4d6-ca01-3b19-d42fafda8639.gif)
クイックオープン`Cmd + p ` → `> + live` 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/a7ca9766-b70c-2625-0782-8b73d0e21983.png)
最初のShow Live Server Previewを選択するとサーバーVs Codeの横にが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/be6bd700-db9b-fead-c6bf-1c40d434109f.png)
別のブラウザーがよければVs CodeのfooterにあるGo Liveを押すと別のブラウザが表示されます。


## 2.[Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/7f8ee456-dd08-10c7-7749-bc0bcc2d7194.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/e51bc084-86a4-29f7-cb66-4131216669d1.png)
目に優しいテーマを選択しましょう

## 3.[Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
ファイルがどんなファイルなのかファイルにiconを付けてくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/656255f9-91ca-ddb2-24e0-6a46da52bf12.png)



##4.[Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
自動整形フォーマッター何か作成したらコードを綺麗にしてくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/6ca1145f-1612-83b2-cde9-a05d81f2da88.png)

簡単な設定が必要です。
ショートカット mac-`Cmd + , ` windows`control + ,`で設定画面を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/835f68ee-ce4a-0be0-b5b1-fe0b458bd5f2.png)
基本的には4になっていますが複雑な条件分など多くなると可読性のため2の方が適正

javascriptの方でコードの最後にセミコロンをつけるかつけないか
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/bb0d7dce-b510-0709-4f79-750bce66f837.png)

jsの`single quotation`にするか `double quotation`にするかの自動変換設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/f99304f0-7492-d3e2-e1a1-3bbdd9b4ff42.png)

##5.[Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
プログラムが複雑になると閉じタグがどこなのかわからなくなる時があります。それを分かりやすくしてくれるextensionが[Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)です。カッコ同士に色をつをしてくれるので、どの部分が閉じっているかすごくわかりやすくて便利です。
![example.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/ad93af84-6af4-12ae-54a4-e5e5632ca9ee.png)

##6.[indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
インデントに色をつけてくれるので分かりやすいかと思います。
![example-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/f0de2946-fb1c-fa9f-3cd5-4c8bb9db7574.png)

##7.[Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
開始タグを修正した時、自動的に対になる終了タグを勝手に修正してくれる便利なextensionです。
VSCodeには間違いなく快適になるでしょう！:muscle:

![usage.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/1a797981-68e6-e890-d2fb-5377f69f4eee.gif)

##8.[CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)
cssに定義している箇所を探すのが少し面倒な時この拡張機能で解決！
htmlのクラスから`Cmd`を押しながらクラスをクリックすると対処cssに移動してくれる便利なextensions！

![working.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/9dd2fbe2-aa91-bc55-15ca-47519aa8ae53.gif)

##9.[HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
HTMLを書くときに、CSS側で作ったClass名がオートコンプリートされます。
これがあればクラスの名のミスはしにくくなるでしょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/db7e5a54-a630-b956-de62-42ab0e1f5751.png)


##10.[Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)

micro SoftTypeScript、JavaScriptをオートコンプリートしてくれる良いextensionです。
他にもPython、Javaもサポートをしてくれます。

![python-intellicode.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/7073fcf3-cd9d-3474-a4f7-1ef7220b7985.gif)