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



WordPressで「現在メンテナンス中のため、しばらくの間ご利用いただけません。」の状態でログインできなくなった場合の対処法
HTMLのpattern属性を使ってフォームのバリデーションチェックを行う方法
Gitで最初に設定しておくユーザー名とメールアドレスのグローバル設定
Visual Studio Codeでファイル差分の比較を行う方法
MAMPでローカル開発環境にWordPressをインストールする手順
CSSのカスタムプロパティ(変数機能)の使い方
コーディング時にちゃんと意識したい複数語の連結方法一覧(キャメルケース・スネークケース・ケバブケース)
Vue Routerでページ遷移後にトーストを表示させる方法
WebPに対応して画像サイズを最適化する方法
EJSのincludeで別ファイルを読み込むときの画像パスを指定する方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
gulp-sass 5の「does not have a default Sass compiler」エラーを解消する
ブログをリニューアルして、ダークモードに対応しました(2020年版)
Illustratorで画像内の複数箇所を切り抜いて書き出す方法
サイト運営には不可欠!!自分のブログ用のFacebookPage作ろう。
ATOKの「ATOKパレットの表示」「単語登録」ショートカットキーが、Emacsキーバインドと被るので変更したい
WordPressって何なの?これからWordPressを勉強したい人がとりあえず知っておきたい事
Dart Sassでファイルを分割して管理する方法|Dart Sass入門
Macの高機能diffツール「Kaleidoscope」
Figmaのパス周りの基本操作|基本的な描画方法からペンツールと直線ツールの細かい違いまで