Visual Studio CodeからFTPソフトのTransmitを使用する拡張機能「Transmit」

Macユーザーにとって定番のFTPクライアントの「Transmit」ですが、拡張機能を使えばわざわざアプリを切り替えなくてもVisual Studio CodeからFTP接続してファイルをアップできます。
開発環境に接続しておき、アップしてすぐ確認したい場合に便利です(本番環境はなにがあるか分からないので使用しない方が良いです)。
Transmit

名前の通り、FTPクライアントのTransmitと連携してサーバーに接続してアップロードや同期ができます。
最初に設定が必要ですが、わざわざTransmitを起動する必要がなくなります。
便利ですがミスすると怖いので、あくまで開発環境に対してだけ行うようにしましょう。
基本的な使い方
サーバーの設定
まずは接続するFTPサーバーの設定です。
「”transmit.servers”」配列内にサーバーの設定を追加していくことで何個でも追加できます。
{
"transmit.servers": [ // List of servers
{ // Server object
"favorite": "", // Name of the Transmit favorite to use
"domain": "", // Domain to connect to (e.g. example.com)
"user": "root", // User used in the connection
"protocol": "SFTP", // Protocol used in the connection
"localRoot": "", // Local root path
"remoteRoot": "" // Remote root path
}
]
}| 項目 | 内容 |
|---|---|
| favorite | 使用するTransmitのお気に入りの名前 |
| domain | 接続するドメイン名 |
| user | ユーザー名 |
| protocol | プロトコル(SFTPやFTPなど) |
| localRoot | ローカルルートパス |
| remoteRoot | リモートルートパス |
サーバーへの接続
shift + command + Pでコマンドパレットを開いて、下記それぞれの項目を検索して選択すると、Transmitの操作ができます。

| コマンドパレット | 内容 |
|---|---|
| Transmit: Connect | サーバーに接続する |
| Transmit: Upload | 現在開いているファイルをサーバーにアップロードする |
| Transmit: Download | サーバーからファイルをダウンロードする |
| Transmit: Synchronize | ローカルパスとリモートパスを同期する |
使いこなすためには、サーバーの設定で「localRoot」と「remoteRoot」までちゃんと設定する必要があるので、最初の手間がかかりますが、1度設定してしまえばアップロードが非常にラクになります。



Visual Studio Codeで連番を入力する拡張機能「vscode-input-sequence」
Nuxt.jsでVuexストア連携を行う方法|Nuxt.jsの基本
gulpのwatch機能を使って、監視ファイルに変更があった時にタスクを実行する
iOS Safariで文章の最後の1文字だけ改行されてしまう現象の対処法
「Dart Sass」「LibSass」「Ruby Sass」などSassの種類や記法に関するまとめ
Visual Studio Codeで簡易的なローカルサーバーを起動して、コード保存時に自動でブラウザをリロードする拡張機能「Live Server」
MAMPでローカル開発環境にWordPressをインストールする手順
Visual Studio Codeで「.html」拡張子以外のファイルでもEmmetを使えるようにする
WordPressのヘッダーにツールバーが表示されないときは、wp_headやwp_footerが入っているか確認
Visual Studio Codeとスニペット・ドキュメント検索アプリの「Dash」連携を行うプラグイン
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Figma × Keyboard Maestroでどこまで効率化できる?
Backlogの課題期限をカレンダーアプリのFantastical 3に表示させる方法
Macの文字入力をもっと楽にする小技集
技術的な文章を書く時の自分ルール
属性・Class・IdなどHTMLタグの細かい部分を見ていこう!!
Dashの環境設定やスニペットのバックアップ・同期方法
iPhoneで特定のアプリだけ別の言語設定に切り替える方法
Path Finder 8.5がリリース!ファイル圧縮形式の種類が増えたり、細かい機能がいくつか追加
iTerm2の見た目を設定できる環境設定の「Appearance」タブ
Zoomで画面共有が始まると自動でフルスクリーンになるのをオフにする方法