VSCode プラグイン

VSCode プラグイン

VSCode で開発するのに便利なプラグインをいくつか見ていきます。

一覧

  • PHP 関連

    • PHP Intelephense
    • PHP Debug
  • Laravel 関連

    • Laravel Artisan
    • Laravel Snippets
    • Laravel Blade Snippets
    • Laravel goto view
  • Javascript関連

    • ESLint
  • Docker 関連

    • Docker
  • Git 関連

    • Git Graph
    • Git History
    • GitLens
  • OpenAPI 関連

    • OpenAPI(Swagger)Editor
    • Swagger Viewer
  • YAML 関連

    • YAML
  • 言語

    • Japanese Language Pack for Visual Studio Code
  • エディター関連

    • code-eol
    • EditorConfig for VS Code
    • Colonize
  • リモート関連

    • Remote Development
    • SFTP

PHP Intelephense

php-intellisense より補完精度がよい
vendor 配下も補完
スピードが速い

PHP Intelephense

PHP Debug

ステップ実行が可能
XDebug のインストールと VSCode への紐づけが必要

PHP Debug

Laravel Artisan

F1 などで、VSCode のコマンドパレットを表示
artisan と入力で候補が表示されるので、任意のコマンド入力で実行できます。

Laravel Artisan

Laravel Snippets

Laravelファサードの接頭辞に沿って候補が表示されます。

Laravel Snippets

Laravel Blade Snippets

Laravelブレードの構文をサポートしてくれます。

Laravel Blade Snippets

Laravel goto view

指定の view ファイルまでクイックジャンプすることができるようになります。

Laravel goto view

ESLint

ESLint を VSコードに統合できます。
ESLint は ECMAScript のコードを識別し、ルールに即していないコードを検出してくれるツールです 。

ESLint

Docker

コンテナを管理することができるようになります。
コンテナ一覧からコンテナの起動、停止、ログインなど操作できます。

Docker

Git Graph

サイドバーのソース管理で任意のリポジトリから Git Graph を表示します。
リポジトリのGitグラフを表示したり、各種 Git 操作が可能です。

Git Graph

Git History

サイドバーのソース管理で任意のリポジトリから、またはエディタータブの右端から Git History を表示します。
gitログ、ファイル履歴の表示、ブランチまたはコミットの比較が可能です。

Git History

GitLens

ソース上のポインタ行に、コミット者、コミット日、コミットメッセージを表示します。
そのため、シームレスにナビゲートが可能となっています。

GitLens

OpenAPI(Swagger)Editor

OpenAPI 形式の yaml ファイルまたは json ファイルを開くと、OpenAPI ファイルであることを自動的に検出し、左側のパネルに OpenAPI ボタンが表示されます。
OpenAPI ボタンを押下すると解析され連動したアウトラインが表示されます。

OpenAPI(Swagger)Editor

Swagger Viewer

json および yaml 形式の swagger ファイルを右クリックして Preview Swagger を選択するとプレビューを表示します。
編集するとリアルタイムで更新したプレシューが表示されます。

Swagger Viewer

YAML

YAML言語のサポートが可能となります。

YAML

Japanese Language Pack for Visual Studio Code

VSコード用日本語パックです。

Japanese Language Pack for Visual Studio Code

code-eol

コードに改行文字を表示できます。

code-eol

EditorConfig for VS Code

さまざまなエディターやIDEで複数の開発者が共通したコーディングスタイルを合わせることができる設定ができます。

EditorConfig for VS Code

Colonize

末尾にセミコロンを簡単に挿入できます。

Colonize

Remote Development

Remote - SSH
Remote - Containers
Remote - WSL
上記のリモート開発拡張パックです。
リモートマシン上の、またはに、コンテナ内の任意のフォルダを開くことができます。

ssh config を編集します。

  • ssh config

config に設定しておくとことで選択できるようになります。

左メニューのリモートエクスプローラー-SSH TARGETSから選択できるようになります。

Remote Development

SFTP

SFTP で同期できます。

コマンドパレットから config 設定や 同期実行ができます。
Windows/Linux: Ctrl+Shift+P
Mac: Cmd+Shift+P

sftp.json を編集します。

  • sftp.json

コマンドパレットのSFTP: Configから編集します。

左メニューのSFTP-SFTP: EXPLORERから選択できるようになります。

  • コマンド例

    • SFTP: Sync Local -> Remote
      ローカルからリモートへタイムスタンプが異なるファイルはすべてコピー

    • SFTP: Sync Remote -> Local
      リモートからローカルへタイムスタンプが異なるファイルはすべてコピー

    • SFTP: Sync Both Directions
      双方向の同期

SFTP

参考リンク

Visual Studio Code

Extensions for Visual Studio family of products

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA