【分野別】VSCodeのおすすめ拡張機能まとめ

## はじめに

今回はVSCodeでおすすめの拡張機能を分野別に紹介していきます。

拡張機能は下記の分野に分けて紹介していきます。

- VSCodeを使う全員向け
- Web制作関連
    - HTML&CSS関連
    - WordPress関連
- フロント向け
    - JavaScript
    - React
    - Vue
- サーバーサイド向け
    - PHP
    - Ruby
- その他

拡張機能を利用することで開発の生産性を上げることができるので、ぜひ参考にしていただければなと思います。

## この記事の対象者

- プログラミング初心者の人
- 分野別におすすめの拡張機能を知りたい人
- 開発の生産性をより上げたい人

## VSCodeを使う人全員向け

まずはじめにVSCodeで開発をしている人、全員におすすめをしたい拡張機能を紹介しておきます。

自分自身が使った拡張機能の中で「**とりあえず入れて損はない**」というものを厳選しています。

それでは紹介していきます。

#### Japanese Language Pack for Visual Studio Code

まずはじめに紹介するのは、VSCodeを日本語化させることができる「**[Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)**」です。

![スクリーンショット 2022-09-04 9.13.26.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/86138d3c-c2e4-f505-bf2c-9e6f3097e02d.jpeg)

VSCodeの標準が英語のため慣れていない人は日本語化させておくことで作業効率を上げることができます。

個人的にはVSCodeをインストールした後に最初に入れるべき拡張機能だと思っています。

#### vscode-icons

次に紹介するのファイル等にアイコンを付与してくれる「[vscode-icons](https://github.com/vscode-icons/vscode-icons)」です。

![スクリーンショット 2022-09-04 9.17.19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/01f3964c-9dad-32ef-317a-d4e1419264d4.jpeg)

**vscode-icons**を使うことでファイル名に応じてアイコンを付与してくれるので、視覚的にファイルやフォルダの操作をしやすくなります。

![スクリーンショット 2022-09-04 9.19.37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/907c639a-2b1e-01db-ae72-b8e015a22f90.jpeg)

#### prettier code formatter

次に紹介するのはコードを自動整形してくれる「[prettier code formatter](https://prettier.io/)」です。

![スクリーンショット 2022-09-04 9.21.08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/65cbdeeb-b447-3df2-f31a-e207075be52b.jpeg)

**prettier code formatter**を利用することで、下記のように整形されていないコードを保存時に自動で整形してくれます。

**【整形前】**
![スクリーンショット 2022-09-04 9.31.34.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/f63f24f9-8949-26f2-4a78-6a71659a755f.jpeg)

**【整形後】**
![スクリーンショット 2022-09-04 9.31.56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/626b36b1-2bda-02a5-79d1-e9a6fe9b3845.jpeg)

なおprettierの設定方法についてはこちらの動画がわかりやすのでぜひ参考にしてみてください。

https://www.youtube.com/watch?v=zoaIv5ifoPI

#### indent-rainbow

次に紹介するのはインデントスペースを視覚化してくれる「[indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)」です。

![スクリーンショット 2022-09-04 9.34.34.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/c0d03220-2686-a4bc-ab6c-b7ea37febcbb.jpeg)

**indent-rainbow**を使うことで、下記のようにコードスペースに色をつけてくれるので、インデントによるエラーを未然に防ぐことができます。

![スクリーンショット 2022-09-04 9.35.07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/1c441ede-8c69-4699-31cb-65fbaa2b3282.jpeg)

#### Code Spell Checker

次に紹介するのは英語命名のタイポを防いでくれる「[Code Spell Checker](https://github.com/streetsidesoftware/vscode-spell-checker)」です。

![スクリーンショット 2022-09-04 9.36.38.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/47f66327-933d-0875-2c39-0d29e470eb43.jpeg)

下記のようにスペルが誤っている箇所を推測して波線で知らせてくれます。

![スクリーンショット 2022-09-04 9.38.07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/32b1dd3c-84ac-d730-6c34-2be6178714c7.jpeg)

英語が苦手な人やタイポミスが多い人におすすめの拡張機能です。

#### Path Autocomplete

次に紹介するのはパスの補完補助をしてくれる「[Path Autocomplete](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete)」です。

![スクリーンショット 2022-09-04 9.38.54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/08f12d3b-92d9-c371-5984-7309a551551f.jpeg)

こちらを使うことで外部ファイルを読み込む際にパス候補を自動で表示してくれます。

![スクリーンショット 2022-09-04 9.40.52.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/c32bb9a8-2c2e-b226-d85c-6a7d7fdd5eef.jpeg)

#### zenkaku

次に紹介するのは全角空白によるエラーを防ぐことができる「[zenkaku](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku)」です。

![スクリーンショット 2022-09-04 9.42.07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/4bf1abfb-be1f-9c03-29ce-39abee89c7d6.jpeg)

こちらはエラーの原因にもなる全角があった場合に印をつけてくれるので、全角エラーを防ぐことができます。

![スクリーンショット 2022-09-04 9.44.25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/d6be99c0-4ed1-3131-27f1-90966c8465f8.jpeg)

初心者の人でありがちなミスでもあるのでぜひ入れてみてください。(自分もめっちゃやってました..)

#### GitLens

次に紹介するのコードを書いた人の履歴がわかる「[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)」です。

![スクリーンショット 2022-09-04 9.45.07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/14e4d3b7-84aa-9e76-2f99-f218918e0822.jpeg)

GitLensを使うことでコードの最終編集者が表示されるので質問などがしやすくなります。

![スクリーンショット 2022-09-04 9.46.08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/ae33c527-24e5-0e46-8056-112689853701.jpeg)

その一方で昔自分が書いた(クソ)コードなどもバレてしまう可能性もあります。。

「誰だこのクソコード書いたやつ！」と思ってGitLensを使って確認すると大半が昔の自分であることがほとんどです。。

## Web制作関連

次にHTMLやCSSなどのマークアップをする人WordPressを使う人におすすめの拡張機能を紹介していきます。

#### HTML CSS Support

まず紹介するのは、class名やid名を入力する際に補完をしてくれる「[HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)」です。

![スクリーンショット 2022-09-04 9.51.52.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/6f81ae25-495b-d835-47b4-bdf3098465ef.jpeg)

下記のようにCSSで使われているクラス名をHTML側が自動で補完して表示してくれます。

![スクリーンショット 2022-09-04 9.54.07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/e2708123-c86f-18b0-c7a0-bcce8049bb57.jpeg)

#### CSS Peek

次に紹介するのはHTML側のクラス名をホバーするとCSSコードを表示してくれる「[CSS Peek](https://marketplace.visualstudio.com/itemdetails?itemName=pranaygp.vscode-css-peek)」です。

![スクリーンショット 2022-09-04 9.56.11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/17fdd975-09f0-c934-1051-78cf5cff637b.jpeg)

下記のようにHTMLで命名したクラス名をホバーするとCSSのコードをCSSファイルに行かずとも表示してくれます。

![スクリーンショット 2022-09-04 9.57.32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/3ab99fb2-be4b-a70b-cfe7-d74182908dfd.jpeg)

#### Auto Rename Tag

次に紹介するのは、開始タグと終了タグを自動で保管してくれる「[Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)」です。

![スクリーンショット 2022-09-04 9.58.23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/aca26ecc-b1ed-9be7-faf3-31784dcf383b.jpeg)

Auto Rename Tagを使うことで開始タグを修正した際に終了タグも自動で修正してくれるのでタグ修正時のエラーを防ぐことができます。

#### Live Sass Compiler

次に紹介するのはSassファイルを自動でコンパイルする「[Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)」です。

![スクリーンショット 2022-09-04 10.02.35.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/429b4c5d-5c63-36fc-d50a-03175f3e6b8d.jpeg)

こちらはSassで記述したコードを自動でCSSにコンパイルしてくれる拡張機能になっています。

基本的なプロジェクトではGulpを使って自動でコンパイルを行うことが多いのですが、初心者の人がSassを勉強する時や、簡易的なWebサイトのポートフォリオを制作する際にはおすすめの拡張機能です。

#### Live Server

次に紹介するのは、ローカルサーバーを簡単に立ち上げることができる「[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)」です。

![スクリーンショット 2022-09-04 10.05.22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/934edd5c-a133-3c88-2417-dac6b7e4c244.jpeg)

Live Serverを使うことでHTMLやCSSで書いたコードの表示を簡単にローカル環境で確認することができます。

![スクリーンショット 2022-09-04 10.07.23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/59c79e08-0c0b-60c2-1e28-d70b0e9bf757.jpeg)

ライブサーバーを起動するとブラウザ上に表示されます。

![スクリーンショット 2022-09-04 10.07.32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/c171927a-39eb-2a93-f844-06b85a9d482c.jpeg)

#### WordPress Snippet

次に紹介するのはWeb制作をする上で必ず使うといっても過言ではない、WordPressの機能を補完してくれる「[WordPress Snippet](https://ja.wordpress.org/plugins/code-snippets/)」です。

![スクリーンショット 2022-09-04 10.08.51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/3a663214-0d15-6808-8151-d16947b9f62a.jpeg)

WordPress Snippetを使うことでWordPressで使われる関数等の候補を表示してくれるので開発の効率を上げてくれます。

## フロント向け

次にフロント開発向けの拡張機能を紹介していきます。

### React

#### ES7+ React/Redux/React-Native snippets

まずはじめにReactを使って開発をしてる人はほぼ全員入れるであろう「[ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=rodrigovallades.es7-react-js-snippets)」です。

![スクリーンショット 2022-09-04 10.10.12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/d18141eb-44c6-0a02-d79f-46dee4fc87d2.jpeg)

こちらの拡張機能を使うことで下記のようにReactファイルで「rafc」と入れるだけで簡単に骨格を作成してくれます。

![スクリーンショット 2022-09-04 10.11.57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/11edcb4b-acd0-9abf-385d-2add74dd817c.jpeg)
![スクリーンショット 2022-09-04 10.12.39.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/4ca4bc09-b512-56f2-0931-9f89c36079f4.jpeg)

他にもReact開発をする上で便利な機能を多数揃えている拡張機能なので、Reactでの開発をしている人はぜひ入れていただきたい一品になっています。

#### vscode-styled-components

次に紹介するのはStyled-componentsを使うときに自動で補完をしてくれる「[vscode-styled-components](https://github.com/styled-components/vscode-styled-components)」です。

![スクリーンショット 2022-09-04 10.14.21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/61f192fc-af68-836d-88ef-124c96dc191c.jpeg)

styled-componentを使った開発でかなり便利なのでぜひ使ってみてください。

#### Tailwind CSS IntelliSense

次に紹介するのはTailwind CSSの開発で役立つ「Tailwind CSS IntelliSense」です。

![スクリーンショット 2022-09-04 10.16.04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/8a469114-4ca1-7c7e-e2c6-43833e45c67a.jpeg)

Tailwind CSSは該当のクラス名を付与することでスタイルを整えることができます。

こちらの拡張機能ではTailwind CSS側で用意されているクラス名を補完してくれる拡張機能になっています。

### Vue

次にVueの開発で役立つ拡張機能を紹介していきます。

#### Vetur

まず紹介するのはVueで開発する人におすすめな「[Vetur](https://github.com/vuejs/vetur)」です。

![スクリーンショット 2022-09-04 10.18.41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/a3110ac2-354d-a2c7-5827-d7131a0c7217.jpeg)

こちらはVueの開発をする上で必要な機能が網羅的に入っている拡張機能になっています。

具体的にはシンタックスハイライト、スニペット、Emment、エラーチェック、フォーマットといった機能を使うことができます。

#### Vue docs

次に紹介するのは公式ドキュメントに簡単にアクセスできる「Vue docs」です。

![スクリーンショット 2022-09-04 10.21.29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/3424cc73-feb4-2fa3-16b5-007d5918c096.jpeg)

VSCode上から簡単にメソットなどを公式ドキュメントにアクセス確認することができる拡張機能になっています。

#### Vue Peek

次に紹介するのは作成したコンポーネントに簡単にアクセスできる「[Vue Peek](https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek)」です。

![スクリーンショット 2022-09-04 10.22.58.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/d66284f0-94ed-47cb-d7f1-69c0e72a0c09.jpeg)

## バックエンド向け
### PHP

PHP開発でおすすめの拡張機能を紹介していきます。

#### PHP Intelephense

まず紹介するのは、PHPの開発をする上でコードを自動で補完してくれる「[PHP Intelephense](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client)」です。

![スクリーンショット 2022-09-04 10.25.32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/f997829a-2a87-a76e-22ff-c6d8b8867376.jpeg)

こちらはPHPで開発する人全員におすすめの拡張機能になっています。

### Ruby

次にRubyで使うおすすめ拡張機能を紹介していきます。

#### Ruby

まずはじめに紹介するのはRubyのベーシックなシンタックスハイライトが有効になる拡張機能「Ruby」です。

![スクリーンショット 2022-09-04 10.28.14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/3e165177-656f-33c6-0219-41e14beb60e5.jpeg)

Rubyコードを書く人は全員入れるべき拡張機能になっています。

#### endwise

次に紹介するのはRubyの終了タグ(end)を自動補完してくれる「[endwise](https://marketplace.visualstudio.com/items?itemName=kaiwood.endwise)」です。

![スクリーンショット 2022-09-04 10.29.09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/383fa3ec-49bc-45a3-be0c-5c3b15c2e035.jpeg)

こちらの拡張機能を使うことで見落としがちなendタグを自動で補完してくれます。

#### Rails

次に紹介するのはRailsのスニペットやナビゲーションを提供する「[Rails](https://marketplace.visualstudio.com/items?itemName=bung87.rails)」です。

![スクリーンショット 2022-09-04 10.31.10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/ff5bd0c0-4d7a-1010-485b-e04b178740fd.jpeg)

## 最後に

いかがだったでしょうか。

今回はVSCodeのおすすめの拡張機能を分野別に紹介しました。

ぜひこれからVSCodeを使う上で参考にしていただければなと思います。

他にもいろいろなQiita記事を出しているので読んでいただけると嬉しいです。

https://qiita.com/KNR109/items/e50c981e0518141be28f

https://qiita.com/KNR109/items/3b14e2e8f89a33c0f959