VS CodeでSFTPを使うには

VS Codeでは､サイト上のページを直接編集し､保存と同時にアップロードさせることも可能です｡
今まで私は､Adobe Dreamweaverを使っていましたが､VS Codeなら無料だし､使い勝手もいい｡
ただし､Dreamweaverのようなビジュアルエディタは用意されていません｡
そのため､主に手打ちでページを作成したり､JavaScriptのコードを書くのに適しています｡

VS CodeにFTPの機能を追加

VS CodeにFTPの機能を追加

ただし､ノーマルのVS Codeでは､ファイルのアップロード機能やサーバーに接続する機能はないので､｢FTP｣の機能を追加させます｡
VS Codeに別の機能を追加させるには､｢拡張機能｣という方式を利用します｡
ブラウザの拡張機能と考え方はほぼ同じ｡

拡張機能のSFTP

で､最も人気が高く導入も簡単な｢SFTP｣という拡張機能がお勧め｡私も使っています｡
今回は､SFTP導入後､サーバーに接続させる設定方法を紹介します｡

SFTPのインストール

VS Codeの拡張機能の管理はこれ｡クリックします｡

検索欄があるので､｢SFTP｣と入力してエンター｡

同じ名前のSFTPがいろいろありますが､｢Natizyskunk｣と書かれているものを選択してください｡
最も人気があり､評価も高いです｡
なお､その下の｢liximomo｣は､開発停止状態なのでインストールしないでください(インストール出来なくなっているが)｡

インストールをクリックします｡
これで､SFTPがVS Codeに追加されました｡
続いて設定をおこないます｡

sftp.jsonの作成

SFTPの設定は､sftp.jsonと言うファイルを作成します｡と言ってもどうやって？
最初はちょっと戸惑うと思うので､細かく解説していきます｡

まずは｢SFTP｣がインストールされているか確認｡
VS Codeの｢拡張機能｣を管理する部分をクリックし､インストールされている拡張機能の中に｢SFTP｣があるか確認してください｡

VS Codeの設定(画面の左下のダイアルのアイコン)をクリックします｡

一番上の｢コマンドパレット(Ctrl+Shift+P)｣を選択します｡

SFTP: Config

と入力します｡

するとSFTPでサーバーに接続するためのテンプレートsftp.jsonのタブが表示されました｡
これを適切に書き換えます｡

書き換える部分は､
“name” : わかりやすい名前に
“host” : サーバーのアドレス
“username” : ID
“remotePath” : ディレクトリのパス

passwordを追加する

これだけだと､パスワードの項目がありません｡そこで追加します｡最後に､

,
"password": ""

と追加して､””の中にパスワードを入力します｡
jsonは､カンマ(,)を区切りにしているので､”,”を忘れないように｡

保存時に自動アップロード

デフォルトだと､ソースを保存した場合､ローカルに保存されるだけ｡なので､保存と同時にアップロードも実行させるには､

"uploadOnSave": false,

これを

"uploadOnSave": true,

このように｢ture｣に変更します｡

VS Codeの設定ファイルはアップロードしない！

さて､最も大事な設定｡VS Codeでワークスペースを保存した場合､sftp.jsonなどの設定ファイルが｢.vscode｣というフォルダの中に作成されることがあります｡
このsftp.jsonは絶対に他人には見られてはいけないファイルなので(なにしろパスワードなどが記述してある)､この｢.vscode｣内のファイルはサーバーにアップロードしないように記述します｡

,
    "ignore": [
        ".vscode",
        ".git",
        ".DS_Store"
    ]

ignore:無視する

このようにしておくと｢.vscode｣｢.git｣｢.DS_store｣といった名前のフォルダはアップロードされません｡

.git : Gitと言う分散型バージョン管理システムのリポジトリ(管理領域)が保存される隠しフォルダ｡

.DS_Store : macOSのFinderがフォルダごとの表示設定を記録するために自動生成する隠しファイル｡

保存する

最後に保存します｡

すべて正しいと､VS Codeの左側に｢SFTP｣のアイコンが追加され､クリックするとサーバー側のディレクトリなどがツリー表示されます｡

試しになにかページを作成して保存します｡

サーバーからファイルをダウンロードする

SFTPを有効化すると､Visual Studio Codeの左側に｢SFTP｣のアイコンが表示され､ここをクリックするとサーバー側のファイルやフォルダのリスト(SFTP.EXPLORER)が表示されます｡

ファイルをダブルクリック(もしくはシングルクリック)すると､ファイルを開くことが出来ます｡

ところが編集しようとすると､このように｢読み取り専用のエディタは編集できません｣と表示されてしまいます｡

編集できないファイルはタブのところのファイル名に｢~｣がつきます｡

もし､サーバー側(リモート)のファイルを編集したい場合は──

sftp.jsonにdowonloadOnOpenを追加する

sftp.jsonに以下を加えます｡

{
  // 既存の接続設定...
  "downloadOnOpen": true,
  "uploadOnSave": true,          // 必要に応じて（保存時にアップロードしたい場合）
  "syncMode": "update",          // または "full"（おすすめは update）
  
  // 必要に応じて追加
  "watcher": {
    "files": "**/*", 
    "autoUpload": false,         // downloadOnOpenと競合しやすいのでfalse推奨
    "autoDelete": false
  }
}

コメントの部分は削除してくださいね｡
この設定だと､はじめてローカルエクスプローラーで開く場合に､自動的にサーバーからファイルをダウンロードします｡

設定	意味	おすすめ値
`downloadOnOpen`	リモートファイルを初めて開くときに自動ダウンロードする	`true`
`syncMode`	同期モード（update = 差分のみ、full = 常に最新を確認）	`"update"`
`uploadOnSave`	保存時に自動アップロード（双方向編集したい場合ON）	`true` / `false`
`watcher.autoUpload`	ファイル監視による自動アップロード（競合の原因になりやすい）	`false`

基本はローカルエクスプローラーから開く

ただし､｢SFTP.EXPLORER｣のファイルをダブルクリックしても､相変わらず編集が出来ないので､編集する場合はローカルエクスプローラーから開いてください｡

まず､一度サーバー上のファイルをローカルに保存しておきます｡

SFTP.EXPLORERのツリー上のフォルダを右クリックして､｢Download Folder｣を選択すると､そのフォルダ内をローカルにダウンロードしてくれます｡

編集してアップロードしたい場合は､｢(ローカル)エクスプローラー｣のツリー上のファイルを開きます｡

エラーが出た場合

うまく接続できない場合は､ログを確認します｡

ログは､VS Codeの下に表示されている｢出力｣タブを開きます｡

出力がなくなった！？

もし､｢出力｣が見当たらない場合は､

Visual Studio Codeのメニューの｢表示｣をクリックし､｢出力｣を選択します｡

sftpのエラーを表示

｢出力｣多分をクリックしてもなにも表示されない場合は････

右側の｢タスク｣の部分をクリックします｡

リストの中から｢sftp｣を探して選択｡
もし､一覧の中に｢sftp｣がない場合は､sftpがうまくインストールされていないか､無効になっているか｡

このように､
[ debug ] > NOOP
と表示されていれば､接続できています｡

Permission denied

このログに｢Permission denied(許可が拒否されました)｣のような文字が合った場合､

ユーザー名またはパスワードが間違っている
鍵認証を使っている場合､秘密鍵とサーバー上の公開鍵がペアになっていない
鍵ファイルのパーミッションが広すぎる

などの可能性があります｡

No such file

｢No such file｣のような文字列がある場合､接続先のサーバーのパス(remotePath)が間違っている可能性があります｡

アップロードされていない気がする

sftp.jsonに以下のような設定を書き込むと､コードなどを保存すると自動でサーバーにアップロードされます｡

"uploadOnSave": false,

が､どうもアップロードされていないような場合は､同じくsftp.jsonの

"remotePath": "/",

この部分のパスが正しいか確認してください｡

ワークスペースとして保存

サーバーの管理をVisual Studio Codeでおこないたい場合は､一度､ワークスペースとして保存し､次回はそのワークスペースから起動するようにすると､sftpがうまく動作するはずです｡

｢ファイル｣の｢名前をつけてワークスペースを保存｣を選択し､適当な場所に保存します｡

次回からはワークスペースのファイルから開くと､sftpはうまく動作するはずです｡

まとめ

VS Code＋SFTPの組み合わせは､むかしいちいち更新するたびにFTPでアップロードしていた私にとっては夢のような組み合わせ｡
ずっとDreamweaverを使ってきましたが､今はこちらがメインです｡

なお､一度SFTPを導入すると､新しいワークスペースでも使えますが､SFTPの設定はリセットされるので､再び設定し治します｡