VS Code:リモートサーバーのソースコードの編集管理ツール（SFTP）の導入

リモートサーバのソースコード管理ツール：SFTP

  • 作業環境：リモートサーバーの開発環境で行い、ローカルで管理しないことにします（異なる端末で行います）
    • 開発者は一名で、同時に異なる端末でソースコードの編集は行わないので、ソースコードのバージョン管理はしなくて良いです
    • 異なる端末、違う時間帯でソースコードを編集作業するため、全部ローカルにダウンロードして、作業後にサーバーにアップロード（コミット）することが面倒なので、ローカルでソースコードを管理しないことにします
  • VS Code(Visual Studio Code)の拡張モジュールを探してみたところ、SFTPが要望に一致しています
    • VS Codeの拡張検索：sftp を入力して検索すると sftp1.8.4(現時点)があります。これをインストールします
    • インストール後にリロード（reload）リンクをクリックして、SFTPを立ち上げます

SFTP設定ポイント：サーバー名、ログインユーザー名、パスワード、名前

  • File >> Performances >> Settings >> Extensions >> sftp configuration がSFTPの基本管理を行います
    • ローカルでソースコード管理する必要はなければ、「Download When Open In Remote Explorer」をチェックしないままにします。
  • VS Codeのコマンドパレット(command palette、shift+ctrl+p)を開いてSFTPの接続情報(sftp.json)を設定します
    • 初期値としては以下のようです 
      {
    "protocol": "sftp",
    "host": "localhost",
    "port": 22,
    "username": "",
    "remotePath": "/"
}

       

  • 接続設定として、以下の要素が必須です
    • name: 任意の名前（空白でもかまわない）
    • host:  リモートサーバー名
    • port:  22（初期値のままでよい）
    • username:  リモートサーバーをログイン名
    • password:  リモートサーバーをログインパスワード
    • remotePath: リモートサーバー上にソースコードのパス
      接続設定イメージ
  • 注意点：name要素がなければ、エラーとして検出され、サーバーへの接続を行わないです
    接続設定にnameが足りない場合にエラー
    error message: Missing property "name"
  • 上記設定が完了すると、リモートサーバーへの接続ができ、サーバー上のソースコードなどの変更ができるようになります

VSCocde：登録されていないタイプのファイルを関連するエディターに結び付ける方法

初期インストールしたVSCode(Visual Studio Code)がすべてのタイプのファイルを関連付けていない

  • 初期状態のVSCodeがすべてのタイプのファイルを登録していないです
    • 例：Drupalのモジュール(.module)、インクルートされるファイル（.inc）がPHPで作成されています。
  • VSCodeでは、登録されていないタイプのファイルを「plain text」で開いています
    関連付けていないタイプのファイルをplain textで開く
    • 開いたファイルがテキストとして見なされているので、PHPのコード補完、コードの入ライドなどがありません

関連するエディターに結びづける方法：表示された「Plain Text」をクリックして関連するエディターを選択

  • 操作方法が比較的に簡単です。Windowの右下に表示された「Plain Text」をクリックすれば、プログラムエディター一覧が表示されます
    関連するエディターに結びづける
  • 関連のあるエディターを選んで、関連付けが完了です
  • 関連付けてから、コードの入ライド、補完ができるようになります