概要
VScodeはそのままでもとても使いやすいエディターではありますが、拡張機能を入れる事でより効率的に開発を行うことが出来ます。
今回は、React(javascript,typescript)とLaravel(PHP)を使って開発を行う際に入れておくと便利な拡張機能を15個ご紹介します。
VScodeおすすめの拡張機能
基本編
-
Japanese Language Pack for Visual Studio Code
VScodeのUIを日本語化してくれる定番の拡張機能 -
GitHub Theme
VScodeの画面をGitHubのテーマに変更ができる拡張機能。シンプルで視認性も高い為、どんなテーマにしようか迷っている方におすすめです -
Material Icon Theme
VScode上のエクスプローラにファイルの拡張子に合わせたアイコンを表示させる拡張機能。ぱっと見た時にファイルの種類が分かる為、一度使うと手放せない拡張機能の1つです -
zenkaku
全角スペースを検知して教えてくれる拡張機能。不意な全角スペースの混入でコンパイルエラーに悩まされる経験はエンジニアの方なら1度は経験したことがあると思います。この拡張機能を使うことで、全角スペースを入力するとグレーでスペース部分が表示される為、全角スペースが紛れ込んでいるのに気づきやすくなります -
Docker
VScodeでDockerfileの編集を行う際に入力補完を行ってくれたり、Dockerコンテナの状況を確認できる拡張機能。
開発でDockerを使うなら入れておくと痒い所に手が届く便利な拡張機能です -
Dev Containers
Dockerではアプリケーションを動作させる環境を構築する事が出来ますが、Dev Containersを使うことでランタイムやVSCodeの拡張機能などの環境ごとコンテナにすることが可能になります。Aプロジェクトではコードフォーマッタは〇〇をBプロジェクトでは△△をといった異なる環境を構築したい時にも役立ちます -
Git History
コードのバージョン管理をGitを用いて行っている方は多いと思います。VSCode上の画面にGitの履歴を表示したり、ブランチのツリーを確認したりできる拡張機能です。Gitでバージョン管理を行っている方はぜひ入れてほしい拡張機能の一つです
開発編（React,Laravel）
-
ES7+ React/Redux/React-Native snippets
VSCodeでReactを書く際に入力補完を行ってくれる拡張機能。「rfc」タブ補完で、コンポーネントの雛形の作成が行えるなど便利機能が多数追加されるので、ぜひ入れておきたい拡張機能の1つ。 -
VSCode React Refactor
JSX・TSXを編集時にリファクタリングメニューを追加してくれる拡張機能。 -
Prettier - Code formatter
Javascript,Typescriptのコードを自動整形してくれる拡張機能。VSCodeの設定でファイル保存時に自動で整形することも可能 -
Rainbow CSV
CSVファイルをVSCodeで閲覧する際に見やすく色分けしてくれる拡張機能 -
DotENV
.envファイルを編集する際に、見やすく色分けしてくれる拡張機能 -
Laravel Extension Pack
VSCodeでLaravel開発に必要な一連の拡張機能をまとめたパック -
PHP Debug
デバッグを行う時に欠かせないブレークポイントの設定機能などを追加してくれる拡張機能。xDebugと連携することでより詳細なデバッグが行える -
PHP Intelephense
PHPのコード補完や整形を行ってくれる拡張機能。Laravelで開発するならぜひ入れておきたい
番外編
VScodeの拡張機能とは違いますが、合わせて入れておくと便利なChromeの拡張機能もご紹介します
-
React Developer Tools
Reactのデバッグを行える拡張機能。コンポーネント構造の確認などReactで開発するなら必須で入れておきたい -
Xdebug helper
前述のPHP Debugと連携することでLaravelのデバッグを行うことができる。