Help us understand the problem. What is going on with this article?

VSCode に必ず入れておきたい拡張機能

普段使用しているエディタはPhpStormですが、PHP以外を書くときはVSCodeはとても便利なので重宝しています。

私が個人的におすすめする拡張機能を紹介します。
他にも良い拡張機能があればコメントにて教えてもらいたいです。

この記事があなたのお役に立てれば幸いです。

拡張機能の探し方

https://marketplace.visualstudio.com

マーケットプレイスが用意されているので、ここからお好みの拡張機能を探すと良いでしょう。

  • Featured: おすすめ、注目されている拡張機能
  • Trending: 急上昇の拡張機能
  • Most Popular: 最も人気のある拡張機能
  • Recently Added: 最近追加された拡張機能
    • まだ評価されてない追加されたばかりのものが多いので追加する場合はご注意ください

基本

Material Theme

https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

VSCodeの数あるテーマの中の一つです。

スクリーンショット 2020-04-16 0.31.48.png

歯車のアイコンから Set Color Theme を選ぶをいくつかバリエーションを選択できます。

スクリーンショット 2020-04-16 0.31.37.png

私は Material Theme Darker Hight Contrast を使っています。

追記: GitHub Theme

https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme

GitHub公式のテーマがリリースされました!
Material Theme から GitHub Dark テーマに乗り換えました!

80668639-595e9e00-8add-11ea-8673-4a481cc7e2dd.png

Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

fileIcons.png

拡張子に合わせてアイコンを表示してくれる拡張機能です。
とても見やすくなります。

Japanese Language Pack for Visual Studio Code

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

VSCodeを日本語化します。
日本語化したい人は入れると幸せになれるかと思います。
ちなみに私は入れてないです。

キーマップ(キーボードショートカット)

Preferences > Keyboard Shortcuts (Command + K, S)
から登録されているショートカットキーを確認できます。

他のエディタから乗り換える人は新しくショートカットの組み合わせを覚えるのはとても大変です。
拡張機能としてキーマップが用意されていますので、そちらを利用すると幸せになれるかもしれません。

Preferences > Keymaps (Command + K, M)

  • Vim
  • Sublime Text Keymap and Settings Importer
  • Atom Keymap
  • IntelliJ IDEA Keybindings
  • Notepad++ keymap
  • Eclipse Keymap
  • Visual Studio Keymap
  • Emacs Keymap
  • Delphi Keymap

これは好みの問題ですが、オススメは標準のショートカットキーに慣れるか、Atom Keymap がいいかなと思います。

整形

EditorConfig for VSCode

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

EditorConfig のVSCode版の拡張機能です。
様々なエディタやIDEでコーディングスタイルを統一するためのツールです。

.editorconfig にルールを定義して、プロジェクトに配置して使います。
使い方は公式サイトや他の記事をご参考ください。

チームで開発する際は必ず入れておきたい拡張機能です。

Bracket Pair Colorizer 2

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

example.png

対応する括弧を色分けして表示してくれる拡張機能です。
これがあるとないとで開発効率が全然違うので入れておいて損はないです。

indent-rainbow

example (1).png

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

インデントを虹色に表示してくれる拡張機能です。
インデントが強調されて見やすくなります。

Trailing Spaces

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

行末のスペースを削除してくれる拡張機能です。

追記

公式機能で行末のスペースを削除してくれる設定があります。
公式機能の方を利用しましょう。

Command + , で設定を開き「Trim Trailing Whitespace」設定を有効化する。

スクリーンショット 2020-05-04 15.43.08.png

zenkaku

https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

全角スペースを強調して表示してくれる拡張機能です。
不本意ではありますが、全角スペース起因の問題で時間を費やしたくないので入れておくのが無難でしょう。

Prettier - Code formatter

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

Prettierはソースコードを解析して、ルールに応じてコーディングスタイルを適用してくれるコードフォーマッターです。
ルール等の設定は公式サイトや他の記事をご参考ください。

Code Spell Checker

example.gif

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

スペルミスを検出してくれる拡張機能です。タイポを減らせます。

補完

Auto Rename Tag

usage.gif

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

ペアになっているHTML/XMLタグの名前を自動的に変更する拡張機能です。
普通に便利です。

Auto Close Tag

usage (1).gif

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

HTML/XMLの終了タグを自動的に追加してくれる拡張機能です。

Path Intellisense

iaHeUiDeTUZuo.gif

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

ファイルパスを補完してくれる拡張機能です。入れておいて損はないです。

Clipboard Ring

https://marketplace.visualstudio.com/items?itemName=SirTobi.code-clip-ring

クリップボードを機能を拡張する拡張機能です。
コピー(Command+C)やカット(Command+X)をするたびにクリップボードリングにも追加されます。

クリップボードリングから貼り付け(Command+Shift+V)を数回押して貼り付けたいアイテムを選択します。
通常の貼り付け(Command+V)も可能です。

デフォルトでは最大10個のアイテムを保存します。
これは設定で自由に増やせます。

"clipring.maxRingItems": 128

change-case

3c5e29b6-7a9c-11e5-9ce4-7eb944889696.gif

1a9019e8-7a9c-11e5-8f06-91fd2d7e21bf.gif

https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

単語の大文字・小文字変換をしてくれる拡張機能です。

vscode-input-sequence

https://marketplace.visualstudio.com/items?itemName=tomoki1207.vscode-input-sequence

screenshot.gif

連番入力をサポートしてくれる拡張機能です。

フロント系

REST Client

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

VSCode上でHTTPリクエストを送信できる拡張機能です。

エディター上で下記のように簡易的にリクエストを書くことができます。

https://example.com/comments/1

メソッド、ヘッダー、および本文をRFC 2616で送信できます。

POST https://example.com/comments HTTP/1.1
content-type: application/json

{
    "name": "sample",
    "time": "Wed, 21 Oct 2015 18:27:50 GMT"
}

GraphQLにも対応しています。

POST https://api.github.com/graphql
Content-Type: application/json
Authorization: Bearer xxx
X-REQUEST-TYPE: GraphQL

query ($name: String!, $owner: String!) {
  repository(name: $name, owner: $owner) {
    name
    fullName: nameWithOwner
    description
    diskUsage
    forkCount
    stargazers(first: 5) {
        totalCount
        nodes {
            login
            name
        }
    }
    watchers {
        totalCount
    }
  }
}

{
    "name": "vscode-restclient",
    "owner": "Huachao"
}

HTML CSS Support

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

HTMLドキュメントに対するCSSのサポートを行う拡張機能です。
主にクラス属性の補完、ID属性の補完、css、scssファイルの検索をしてくれます。

意識せずサポートしてくれるので、入れておいて損はないです。

サポートしてる言語: html, laravel-blade, razor, vue, pug, jade, handlebars, php, twig, md, nunjucks, javascript, javascriptreact, typescript, typescriptreact

CSS Peek

working.gif

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

ブラケットのCSSインラインエディターのように、HTMLのidやclassへ定義ジャンプしたり、HTMLファイル上でCSSスタイルを確認できる拡張機能です。

npm

validation.png

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

package.json で定義されたnpmスクリプトの実行、および定義された依存関係に対するインストール済みモジュールの検証をサポートしてくれる拡張期機能です。

yarn

https://marketplace.visualstudio.com/items?itemName=gamunu.vscode-yarn

yarnコマンドを実行してくれる拡張機能です。

Live Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

簡易的なローカルサーバを立てることができる拡張機能です。
起動方法が3つあるので、好きな方法で起動できます。

  • サイドバーのファイルを右クリックして Open with Live Server を選択
  • 起動したいファイルを開いた状態で Command + L, O
  • 右下にある Go Live クリック

http://127.0.0.1:5500 がブラウザで表示されます。
ファイルの変更を検知してブラウザが自動リロードされます。

Import Cost

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

import-cost.gif

JavaScriptやTypeScriptでimportしたファイル容量を表示してくれる拡張機能です。
コーディング時の指標になるかもです。

CSV, JSON

Rainbow CSV

PRFKVIN.png

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

csvやtsv形式のファイルで列ごとに色分けして表示してくれる拡張機能です。

また、RBQLクエリ言語インタープリターが組み込まれていて、SQLっぽくデータを抽出することもできるので驚きです。

HsBG2Y1.png

Json Editor

https://marketplace.visualstudio.com/items?itemName=nickdemayo.vscode-json-editor

JSONファイルをツリー表示してくれる拡張機能です。
大きいJSONを編集する際に役立ちます。

Paste JSON as Code

demo-interactive.gif

https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype

JSONデータをクラスに変換して貼り付けられる拡張機能です。

Git

Git Graph

demo.gif

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

コミット履歴をツリー形式で表示してくれる拡張機能です。

Git Lens

gitlens-preview.gif

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

サイドバーにGitLensのアイコンが表示されます。
リポジトリ一覧からブランチのコミット履歴を確認できたり、ファイル履歴、行履歴、コミットの検索等が行えます。

またソースコードの行またはコードブロックがいつ、誰がコミットしたのか表示されコードの歴史を知るのに役立ちます。

共有、設定、その他

Settings Sync

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

GithubのGistを使って複数のマシンでVSCodeの設定を共有できる拡張機能です。
設定方法は公式サイトを参照。

Live Share

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

リアルタイムで共同編集やデバッグができる拡張機能です。
ペアプログラミングをする際におすすめです。

Todo Tree

screenshot.png

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

TODOやFIXMEなどのコメントタグを検索し、エクスプローラーペインのツリービューに表示してくれる拡張機能です。
ツリービューをクリックすると対象のファイルの対象のコメント行を表示します。

vscode-reveal

https://marketplace.visualstudio.com/items?itemName=evilz.vscode-reveal

Markdown でプレゼン資料を手軽に作成できる拡張機能です。
ライトニングトークや社内の軽いプレゼン資料作りにおすすめです。

公式デモサイト

HTML や PDF として出力もできます。

Draw.io Integration

https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

Draw.ioのVSCode拡張機能です。

Draw.io Integration

Draw.io Integration-png.gif

Draw.io Integration-xml.gif

ucan-lab
Backend Developer at ROLO. I love PHP and I'm focusing on Laravel, Docker, GraphQL.
https://u-can.pro
miraito-inc
システムデザインを中心に置いた開発により高品質で使いやすいシステムを提供いたします。業務システム構築、アプリ開発、コンサルティングまで幅広く手がけています。
https://miraito-inc.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした