メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • VS Code:リモートサーバーのソースコードの編集管理ツール(SFTP)の導入

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」をクリックすれば、プログラムエディター一覧が表示されます
    関連するエディターに結びづける
  • 関連のあるエディターを選んで、関連付けが完了です
  • 関連付けてから、コードの入ライド、補完ができるようになります

 


検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads