今までSublime Textをメインに使っていましたが、最近Atomを使い始め、作業環境を徐々に移行してみました。

Sublime Textで最も多用していたのが、プロジェクト切り替え機能と、SFTP機能（Sutlime SFTPというパッケージを利用）だったので、そちらは変わらない形で運用したい・・。

Atomでも同様の環境が構築できますが、パッケージの仕様に少々クセがあったので、問題点と対処法をメモしておきます。

使用するパッケージ

japanese-menu
解説を分かりやすくするため、メニューを日本語化しています。
project-manager
プロジェクト毎にサイドバーに登録したフォルダを保存し、切り替えることができます。
SFTP-deployment
Atom上から右クリック等で直接ファイルのアップロード／ダウンロードが行えます。

前提＆問題点

Atomでは、メニューから「ファイル」→「プロジェクトフォルダを追加」を実行することで、サイドバーに作業ディレクトリを追加することができる。
「project-manager」を使用すると、サイドバーにフォルダを追加した状態を保存し、いつでも呼び出すことができる。
「SFTP-deployment」を使用すると、右クリックまたは「パッケージ」→「FTP/SFTP」メニューから、プロジェクトフォルダ上のファイルをアップロード／ダウンロードすることができる。
ただし「SFTP-deployment」は、プロジェクトフォルダのルートを起点とする設定しかできないので、プロジェクトの階層とサーバ側のドキュメントルートが一致しない場合は、利用することができない。

※「SFTP-deployment」は、以下のような設定ファイルによって通信を行っていますが、プロジェクトのルートディレクトリに設置しないと動作しません。

deployment-config.json

{
  "type": "ftp",
  "host": "example.com",
  "user": "username",
  "password": "password",
  "port": "21",
  "remotePath": "/example/path"
}

解決法

上記の問題を解決するために、サイドバーに複数のプロジェクトフォルダを登録してSFTPを利用する方法を紹介します。

例として、以下のようなディレクトリ構成でWebサイトを制作しているケースを想定しましょう。

「_work」下で編集したjadeファイルやSassファイルをコンパイルし、
「htdocs」下にHTMLとcssファイルを生成しているような場合、
「prj1」フォルダをプロジェクトフォルダとして登録してしまうと、
FTP/SFTPでのアップロードが利用できません。
（サーバ側と階層が一致しない場合があるため）

prj1
│
├── htdocs
│   ├── index.html
│   ├── img
│   │   └── logo.png
│   ├── css
│   │   └── style.css
│   └── js
│       └── script.js
│
└── _work
    ├──src
    │   ├── index.jade
    │   ├── img
    │   │   └── logo.png
    │   └── css
    │       └── style.scss
    │
    ├── package.json
    ├── gulpfile.js
    └── node_modules

ところが、Atomのサイドバーには、複数のプロジェクトフォルダを追加することが可能で、
追加した複数のフォルダは「project-manager」にプロジェクトとして保存することができます。

さらに、複数のプロジェクトフォルダが追加されている場合でも、
一番上に（一番最初に）追加されたプロジェクトフォルダだけは、
「SFTP-deployment」がルートディレクトリとして認識してくれるようです。

そこで、まず「htdocs」をプロジェクトフォルダとして追加し、
次に「_work」という順番でサイドバーにフォルダを追加してみましょう。

その状態で、「パッケージ」→「FTP/SFTP」→「Map to remote…」を実行すると、
「htdocs」直下にSFTP用の設定ファイルが生成されます。

このファイルに必要な接続情報を記述すれば、「htdocs」下のファイルをアップロード／ダウンロードすることができます。

htdocs
├── index.html
├── img
│   └── logo.png
├── css
│   └── style.css
├── js
│   └── script.js
│
└── deployment-config.json

_work
├──src
│   ├── index.jade
│   ├── img
│   │   └── logo.png
│   └── css
│       └── style.scss
│
├── package.json
├── gulpfile.js
└── node_modules

これら2つのフォルダが追加された状態で、
「パッケージ」→「Project Manager」→「Save Project」を実行し、
『prj1』という名前で保存しておきましょう。

すると、次回から「Ctrl+Cmd+P」で、複数のフォルダが登録された状態をいつでも呼び出すことができます。

プロジェクトフォルダの確認方法

「パッケージ」→「Project Manager」→「Edit Projects」
を実行すると、登録済みプロジェクトの情報が記述された設定ファイル（cson形式）が開き、該当のプロジェクトに追加されているフォルダのパス一覧が確認できます。
（複数のフォルダが追加されている場合は、「paths:[〜]」の間に、複数のパスが記述される）
また、このファイルを直接編集することで、プロジェクトフォルダの追加・削除を行うこともできます。

補足：SFTP-deploymentの使い方

編集中のファイルをPUT/GET

ファイルをエディタで開いた状態で、ウィンドウ内を右クリックし、「FTP/SFTP」→「Upload current file/Download current file」
または、
メニューから「FTP/SFTP」→「Upload current file/Download current file」を実行

開いている全てのファイルをPUT

複数のファイルをエディタで開いた状態で、
メニューから「FTP/SFTP」→「Upload open files」を実行

サイドバーからファイルを選択してPUT/GET

サイドバーからファイルを選択して右クリックし、「FTP/SFTP」→「Upload current file/Download current file」

フォルダを選択して実行すれば、フォルダごとファイルを転送できます。

また、Cmdキーを押しながら、複数のファイルを選択した状態で実行すると、選択した全てのファイルを一度に転送することもできます。

Atomで複数フォルダをプロジェクトに登録してSFTPする方法