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



gulpのwatch機能を使って、監視ファイルに変更があった時にタスクを実行する
CSSやJavaScriptでスクロールバーの横幅を取得する方法
「epel-release」インストール後にyum installで「Cannot retrieve metalink for repository」と表示される場合の対処法
HTMLのpattern属性を使ってフォームのバリデーションチェックを行う方法
iTerm2でさらに細かい機能の設定ができる環境設定の「Advanced」タブ
Visual Studio Codeの「Debugger for Chrome」でJavaScriptのデバッグを行う
Visual Studio Codeで対応する括弧に色を付けて見やすくする環境設定
Visual Studio Codeで読み込んだCSSで設定されているclass名の入力補完をしてくれる拡張機能「HTML CSS Support」
Movable TypeでAssetURLやEntryPermalink・ContentPermalinkで出力されるパスを絶対パスから相対パスに変える
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
撮影したスクリーンショットを、Hazleを使って自動的にImageOptimで画像圧縮する方法
疑似クラスの:hoverと:activeのスマホでの挙動の違い
iStat Menusの「センサー」アイコン表示と設定
CSS Nite in Kobe, vol.51「すべての人がカメラを持つ時代の SNS映え・ウェブ映えする写真撮影テクニック と 写真撮影の基礎」に参加してきました
Figmaで様々なグラフ・チャートが作れて、詳細な見た目の設定もできるプラグイン「Chart」
AlfredのWorkflowをコードを書いて作成する方法
Fantastical 3とTodoistを連携してスケジュールとタスクをまとめて管理する!
CSS Nite in Kobe, vol.55「モダンコーディング:XDで作られたデータを元に実装工程のセミハンズオン」に参加してきました
Keynoteのプリセットカラーを好みの色にカスタマイズする方法
超軽量なコードエディタ 「Zed」をサブエディタとして活用する