【2022】VSCodeのオススメ拡張機能

(2022 5/28 更新)

こんにちは、初めてQiitaに投稿するMinaki-webです。
今回は独断と偏見で決めたものと一般的なVSCodeのオススメ拡張機能を紹介していきたいと思います。
テーマは別記事でそのうち取り上げようと思います。

https://marketplace.visualstudio.com/

## 便利系
### Japanese Language Pack for Visual Studio Code
VSCodeを日本語化してくれます。

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

---

### advanced-new-file
![advanced-new-file DEMO](https://media.giphy.com/media/l3vRfRJO7ZX6WNJQs/source.gif)
デフォルトの`Ctrl + N`はゴミなので代わりにこれを設定してあげると世界が変わります。
本当です。

https://marketplace.visualstudio.com/items?itemName=patbenatar.advanced-new-file

---

### Colonize
![Colonize DEMO](https://github.com/vmsynkov/colonize/raw/master/images/showcase.gif)
JavaやPHP書く時などセミコロンが行末に要求されるときかなり重宝しています。

https://marketplace.visualstudio.com/items?itemName=vmsynkov.colonize

---

### File Utils
![File Utils DEMO](https://github.com/sleistner/vscode-fileutils/raw/master/images/demo.gif)
マウスからおさらば！！！！！！！！！

https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

---

### Output Colorizer
![Output Colorizer DEMO](https://raw.githubusercontent.com/IBM-Bluemix/vscode-log-output-colorizer/master/github-assets/screenshot-4.jpg)
出力ログ等を色分けして表示してくれます。

https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer

---

### Markdown All in One
![Markdown All in One DEMO](https://github.com/yzhang-gh/vscode-markdown/raw/master/images/gifs/toggle-bold.gif)
Markdownを書くときショートカットキーなどあって便利です。詳しくはリンク先をご覧ください。

https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

--- 

### Live Share
リアルタイムで複数人と共同編集や確認できます。

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

## コード系

### Auto Rename Tag
HTML/XMLタグの名前を自動的に変更する拡張機能です。
わざわざ閉じタグを選択する必要がないのでめっちゃ便利です。

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

---

### htmltagwrap
![htmltagwrap DEMO](https://github.com/bgashler1/vscode-htmltagwrap/raw/master/images/screenshot.gif)
`Alt + W`で選択範囲を囲むタグを挿入してくれます。

https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

---

### indent-rainbow
![indent-rainbow DEMO](https://raw.githubusercontent.com/oderwat/vscode-indent-rainbow/master/assets/example.png)
インデントを色で識別できるようになります。

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

---

### Prettier - Code formatter
最強のコードフォーマッターです。絶対入れましょう。

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

---

### Path Intellisense
![Path Intellisense DEMO](https://i.giphy.com/iaHeUiDeTUZuo.gif)
ファイルパスの補完をサポートしてくれます。

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

---

### Live Sass Compiler
Ritwickdey氏の『Live Sass Compiler』を更新してくれている拡張機能です。
最近Sassはdart-sassで書くことが推奨されているのでそれを自動でコンパイルしてくれるこの子は優秀です！

https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass

---

### Highlight Matching Tag
![Highlight Matching Tag DEMO](https://images2.imgbox.com/71/2a/zIA1XCzK_o.gif)
対になるタグを示してくれます。
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

---

### HTML CSS Support
HTMLファイル内でリンクされたCSSファイルのclass,idの補完やReactやPHPなどのCSSサポートをしてくれます。

https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

--- 

### CSS Peek
![CSS Peek DEMO](https://github.com/pranaygp/vscode-css-peek/raw/master/readme/working.gif)
HTMLファイルに指定されたclass,idの定義先にジャンプできたり、その場でCSSのスタイルを確認できます。

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

--- 

### ES7 React/Redux/GraphQL/React-Native snippets
ReactやGraphQLでよく使うスニペットが詰め込まれています。

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

---

### Rainbow CSV
![Rainbow CSV DEMO](https://i.imgur.com/6eJqeUN.png)
CSVファイルを色分けして表示してくれたり、SQL言語みたいにクエリを実行できるみたいです。

https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

---

### PHP Intelephense
PHPをVSCodeで書く方はおすすめです。補完やコードのフォーマットを行ってくれます。

https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client

##DEMO・デバッグ系

### Five Server 
![Five Server Demo](https://raw.githubusercontent.com/yandeu/five-server/main/img/vscode-preview.gif)
これはHTMLやPHPファイルのライブプレビューができる拡張機能です。
大抵Ritwickdey氏の『[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)』がおすすめされていると思うのですが、こちらはその『Live Server』を更新して、新プロダクトとして提供しています。
PHPファイルはphp.exeとphp.iniへのパスを設定で記述するだけで簡単にライブプレビューができるので楽です！

***(2021/06/05/22:00 追記)ちょっと起動が遅いかもしれない・・・***

https://marketplace.visualstudio.com/items?itemName=yandeu.five-server

---

### Rest Client
![Rest Client DEMO](https://raw.githubusercontent.com/Huachao/vscode-restclient/master/images/usage.gif)
VSCode上でHTTPリクエストを送信できます。

https://marketplace.visualstudio.com/items?itemName=humao.rest-client

---

### npm
![npm DEMO](https://github.com/Microsoft/vscode-npm-scripts/raw/HEAD/images/validation.png)
`package.json`内で定義されているnpmスクリプトや、モジュールの検証を助けてくれます。

https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script

---

### ESLint
VSCodeでESLintを使う方は必須です。

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

---

### Import Cost
JS/TSでimportしたファイルのサイズを表示してくれます。

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

---

### Quokka.js
![Quokka.js DEMO](https://quokkajs.com/assets/img/main-video.gif)
簡単にJS/TSのコードのテストができます

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

---

### Partial Diff
![Partial Diff DEMO](https://raw.githubusercontent.com/ryu1kn/vscode-partial-diff/master/images/public.gif)
ファイルの差分を確認できます。
	
https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff



## Git系

### gitignore
`.gitignore`を言語に合わせて作成してくれます。

https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore

---

### Git Lens
![Git Lens](https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/code-lens.png)
誰がいつコミットしたかをコード上で確認できたりします。
チームでプロジェクトを開発するときは入れるといいかも。

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

## さいごに
人によって必要な拡張機能は違うと思うので他の方の記事も参考にしながら活用してください。
有名なものは他の方のものとかぶっているかもしれませんｗ
それでは、良いハックライフを！