個人的によく使う VS Code の拡張機能(HTML & CSS & JavaScript編)です。  

本当は知ってる言語全部を一つの記事にまとめたかったのですが、フレームワークも含めると数が多くなったので、とりあえずフロント言語編とします。  

## HTML & CSS

### Emmet

これは拡張機能ではなく標準搭載されているんですが、覚えとくと何かと便利なので一応書いときます。  

[こちら](https://docs.emmet.io/cheat-sheet/) がチートシートになっていて、要するにショートカットコマンドみたいな感じですかね。  
用語的にはスニペットと言うんでしょうか。  

個人的には `w100` と打って `width: 100px` が生成される、ぐらいしか意識して使ったことないです。  

標準搭載されているせいであまりありがたく感じてないのですが、多分 `div` って打って `<div></div>` が生成されるのも Emmet のおかげですよね。ありがとうございます。  


### Auto Rename Tag

対応する閉じタグも変更してくれます。  

[![auto_rename](https://raw.githubusercontent.com/formulahendry/vscode-auto-rename-tag/master/images/usage.gif)](https://raw.githubusercontent.com/formulahendry/vscode-auto-rename-tag/master/images/usage.gif)

### Auto Close Tag

自動で閉じタグを生成してくれます。が、上記の Emmet で大抵生成してくれるので役に立ってる実感がない。  
けど一応いれときます。  

### Path Intellisense

ファイルパスを保管してくれます。  

[![path_intellisense](https://i.giphy.com/iaHeUiDeTUZuo.gif)](https://i.giphy.com/iaHeUiDeTUZuo.gif)

### HTML CSS Support

HTML, CSS の id, class名を補完してくれます。  

## JavaScript

### ESLint

最強の linter ですね。なんですけどどうやって説明すればよいものか。  

多分フレームワークとかいれるときに勝手に環境に ESLint が入ってくれると思うので、そのときとりあえずこの拡張機能をいれとけばいいと思います。  

### Prettier

[前回](https://masopon.com/posts/vscode-common) も紹介したフォーマッターです。  
HTML, CSS, JavaScript のフォーマッターなのでどれか一つでも触るならいれておきたい。  

### Vetur

Vue.js に限ってしまうのですが、Vue を使うならいれておきたい。いれておきたいというか必須レベルですね。