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度設定してしまえばアップロードが非常にラクになります。



PS Auto Sitemapを使って自分のブログのサイトマップを作成する
ウェブサイト上で簡単にWYSIWYGエディタを実装する「TinyMCE」
Visual Studio CodeをMarkdownエディターとして使用する
Visual Studio Codeの拡張機能「Trailing Spaces」でコードの中にある余計なスペースを表示する
WordPressでコンタクトフォームを設置したいならこれ!!Contact Form 7のインストール方法
Sassのマップ機能を使った変数の管理方法
JavaScriptで配列内から特定条件の要素を探す方法
WordPressで既に公開済みの記事の更新を、指定した日付に反映する方法「PublishPress Revisions」
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
iTerm2で画面の見た目や細かい設定などを「プロファイル」単位で保存・管理する環境設定の「Profiles」タブ
高機能で定番なテキストエディタ「Jedit Ω」で自分好みの編集を実現する
Alfredで複数のアプリケーションを一気に起動できるようにする
Google Chromeの「お使いのデバイスに送信」機能を使ってiPhoneに閲覧中のサイトを送信する方法
ウェブ開発時のテスト環境と本番環境の取り違えを防ぐChrome拡張機能「Environment Marker」
Client Folder Makerでよく使うフォルダ構成を一気に作成する
Figma × Keyboard Maestroでどこまで効率化できる?
Vue CLIで共通のSCSSファイルを読み込む方法
Movable Typeでコメントアウトして出力時に無視する方法
作業効率化に大きく貢献してくれているMacのアプリ達