More than 3 years have passed since last update.

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

Last updated at 2021-05-06Posted at 2020-04-16

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

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

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

VSCode 関連記事

VSCode の初期設定

拡張機能の探し方

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

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

基本

Material Theme

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

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

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

追記: GitHub Theme

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

Material Icon Theme

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

Japanese Language Pack for Visual Studio Code

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 がいいかなと思います。

2020.01.12追記: Atom Keymap を使っていた理由が、 Command + Shift + l に割り当てられていた Add Cursors to Line Ends が便利だったのですが、キーボードショートカットを変更したので、デフォルトキーマップのまま使ってます。

VSCode 選択した複数行をマルチカーソルにするキーボードショートカット

整形

EditorConfig for VSCode

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

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

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

Bracket Pair Colorizer 2

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

indent-rainbow

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

Trailing Spaces

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

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

追記

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

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

zenkaku

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

Prettier - Code formatter

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

Code Spell Checker

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

補完

Auto Rename Tag

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

Auto Close Tag

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

Path Intellisense

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

Clipboard Ring

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

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

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

"clipring.maxRingItems": 128

change-case

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

vscode-input-sequence

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

VSCodeで連番を入力できる拡張機能を作りました

フロント系

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"
}