げっとシステムログ

WEB開発メモ

VSCode でリモートサーバーのソースを編集する

これまで vim で開発を行ってきたが、 VSCode が良いというのを聞いて使ってみたくなった。 ただし、 Mac にインストールするものは最小限にしたい。

VSCode -> CoreOS

CONTENTS
  1. VSCode のインストール
  2. SFTP Config
  3. VSCode Config
  4. GitHub flow の運用
  5. まとめ
  6. 参考資料

TOP

VSCode のインストール

VSCode は適当にインストールする。

今回の構成では以下の Extension は必須。

  • SFTP : リモートにソースをコピーするのに、 SFTP を使う
  • Vim : Vim も入れて操作感をこれまでと合わせたい

Recommended と言われたので GitLens も入れた。 最終更新を表示してくれるのでなかなか良い感じ。

TOP

SFTP Config

SFTP Config で設定を追加する。

{
    "protocol": "sftp",
    "host": "REMOTE_HOST",
    "port": 22,
    "username": "USER",
    "remotePath": "/path/to/app",
    "privateKeyPath": "/path/to/.ssh/id_rsa",
    "ignore": [
        ".vscode",
        ".git",
        ".DS_Store"
    ],
    "syncMode": "full",
    "uploadOnSave": true,
    "watcher": {
        "files": "**/*",
        "autoUpload": false,
        "autoDelete": false
    }
}

詳しい説明は Readme を読むとして、ハマったところを書いておく。

watcher.autoUpload を true にすると、 git pull とかで更新されたファイルが一斉にアップロードされる。 サーバーでファイルを watch してコンパイルしている部分で大変なことになった。

TOP

VSCode Config

settings.json を載せておく。

{
  "workbench.colorTheme": "Solarized Light",
  "editor.fontFamily": "'APJapanesefontT', Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 16,
  "editor.lineHeight": 16,
  "explorer.confirmDelete": false,
  "editor.minimap.enabled": true,
  "elm.makeCommand": null,
  "vim.leader": "<space>",
  "vim.normalModeKeyBindingsNonRecursive": [
    {
        "before": ["<leader>","s"],
        "commands": ["workbench.action.files.save"]
    },
    {
        "before": ["<leader>","w"],
        "commands": ["workbench.action.closeActiveEditor"]
    },
    {
        "before": ["<leader>","q"],
        "commands": ["workbench.action.closeFolder"]
    },
    {
        "before": ["u"],
        "commands": ["undo"]
    },
    {
        "before": [";"],
        "commands": ["workbench.action.showCommands"]
    },
    {
        "before": ["<leader>","n"],
        "commands": ["workbench.action.nextEditor"]
    },
    {
        "before": ["<leader>","h"],
        "commands": ["workbench.action.previousEditor"]
    },
    {
        "before": ["<leader>","t"],
        "commands": ["workbench.action.terminal.new"]
    },
    {
        "before": ["<leader>","a"],
        "commands": ["git.stageAll"]
    },
    {
        "before": ["<leader>","c"],
        "commands": ["git.commitStaged"]
    },
    {
        "before": ["<leader>","b"],
        "commands": ["git.branch"]
    },
    {
        "before": ["<leader>","j"],
        "commands": ["git.checkout"]
    },
    {
        "before": ["<leader>","f"],
        "commands": ["git.pull"]
    },
    {
        "before": ["<leader>","d"],
        "commands": ["git.deleteBranch"]
    },
    {
        "before": ["<leader>","p"],
        "commands": ["git.push"]
    },
    {
        "before": ["<leader>","u"],
        "commands": [
            "git.checkout",
            "git.pull",
            "git.deleteBranch"
        ]
    }
  ]
}

vim の設定でマクロ的なことができるので、これで色々やってみよう。

あと、 Vim の undo がすごく undo するので、この設定で Cmd + Z にしてある。 こうすると Ctrl + R で元に戻らなくなるので、ショートカットの設定も追加してある。

TOP

GitHub flow の運用

VSCode から git.commit, git.push などを行う。

しかし、ローカルで変更したファイルをリモートにコピーするので、リモートの git は当然 modified な状態になる。 このため、 git を同期する方法を用意しておく。

$ git checkout -b <branch>
$ git add -A .
$ git fetch pub
$ git merge pub/<branch>
$ git reset

これでリモートに push したブランチを同期できる。

pull request を投げるスクリプトを用意してあるのだが、 Mac にデプロイしたくないので、リモートで作業する。 pull request をマージしたら、 pub/master に push しておく。

VSCode では、 git.checkout, git.pull, git.deleteBranch することでブランチを削除する。

TOP

まとめ

ローカルとリモートで git の管理をしなければならないので面倒になるが、これで VSCode を使用できる準備が整った。

VSCode の力を最大限発揮するには Mac に実行環境をインストールするべきなのだろうが今回は見送る。 これらしばらく経過観察してみよう。

TOP

参考資料

TOP