Contents
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 Debug
ステップ実行が可能
XDebug のインストールと VSCode への紐づけが必要
Laravel Artisan
F1 などで、VSCode のコマンドパレットを表示
artisan と入力で候補が表示されるので、任意のコマンド入力で実行できます。
Laravel Snippets
Laravelファサードの接頭辞に沿って候補が表示されます。
Laravel Blade Snippets
Laravelブレードの構文をサポートしてくれます。
Laravel goto view
指定の view ファイルまでクイックジャンプすることができるようになります。
ESLint
ESLint を VSコードに統合できます。
ESLint は ECMAScript のコードを識別し、ルールに即していないコードを検出してくれるツールです 。
Docker
コンテナを管理することができるようになります。
コンテナ一覧からコンテナの起動、停止、ログインなど操作できます。
Git Graph
サイドバーのソース管理で任意のリポジトリから Git Graph を表示します。
リポジトリのGitグラフを表示したり、各種 Git 操作が可能です。
Git History
サイドバーのソース管理で任意のリポジトリから、またはエディタータブの右端から Git History を表示します。
gitログ、ファイル履歴の表示、ブランチまたはコミットの比較が可能です。
GitLens
ソース上のポインタ行に、コミット者、コミット日、コミットメッセージを表示します。
そのため、シームレスにナビゲートが可能となっています。
OpenAPI(Swagger)Editor
OpenAPI 形式の yaml ファイルまたは json ファイルを開くと、OpenAPI ファイルであることを自動的に検出し、左側のパネルに OpenAPI ボタンが表示されます。
OpenAPI ボタンを押下すると解析され連動したアウトラインが表示されます。
Swagger Viewer
json および yaml 形式の swagger ファイルを右クリックして Preview Swagger を選択するとプレビューを表示します。
編集するとリアルタイムで更新したプレシューが表示されます。
YAML
YAML言語のサポートが可能となります。
Japanese Language Pack for Visual Studio Code
VSコード用日本語パックです。
Japanese Language Pack for Visual Studio Code
code-eol
コードに改行文字を表示できます。
EditorConfig for VS Code
さまざまなエディターやIDEで複数の開発者が共通したコーディングスタイルを合わせることができる設定ができます。
Colonize
末尾にセミコロンを簡単に挿入できます。
Remote Development
Remote - SSH
Remote - Containers
Remote - WSL
上記のリモート開発拡張パックです。
リモートマシン上の、またはに、コンテナ内の任意のフォルダを開くことができます。
ssh config を編集します。
- ssh config
config に設定しておくとことで選択できるようになります。
|
1 2 3 4 5 6 7 8 9 10 |
Host web HostName 127.0.0.1 User username Port 22 UserKnownHostsFile /dev/null StrictHostKeyChecking no PasswordAuthentication no IdentityFile /Users/username/.ssh/private_key IdentitiesOnly yes LogLevel FATAL |
左メニューのリモートエクスプローラー-SSH TARGETSから選択できるようになります。
SFTP
SFTP で同期できます。
コマンドパレットから config 設定や 同期実行ができます。
Windows/Linux: Ctrl+Shift+P
Mac: Cmd+Shift+P
sftp.json を編集します。
- sftp.json
コマンドパレットのSFTP: Configから編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
{ "name": "My Server", "host": "127.0.0.1", "protocol": "sftp", "port": 22, "username": "username", "remotePath": "/var/www/xxx/", "privateKeyPath": "/Users/username/.ssh/private_key", "uploadOnSave": true, "downloadOnOpen": true, "ignore": [ "**/.vscode/**", "**/.history/**", "**/.git/**", "**/.DS_Store" ], "sshConfigPath": "/Users/username/.ssh/config", "syncOption": { "delete": true, "skipCreate": false, "ignoreExisting": false, "update": false }, "watcher": { "files": "**/*", "autoUpload": true, "autoDelete": true } } |
左メニューのSFTP-SFTP: EXPLORERから選択できるようになります。
-
コマンド例
-
SFTP: Sync Local -> Remote
ローカルからリモートへタイムスタンプが異なるファイルはすべてコピー -
SFTP: Sync Remote -> Local
リモートからローカルへタイムスタンプが異なるファイルはすべてコピー -
SFTP: Sync Both Directions
双方向の同期
-