Using VisualStudio Code to Sync Files in Turnkey Linux VM


To keep my working environment clean, I choose to use the ready-to-use Turnkey Linux Yii Framework VM in VirtualBox instead of creating everything from scratch in OSX. I plan to edit codes locally using Visual Studio Code and sync changes with VM by SFTP Protocol. Here is how I do.

Create a New Workspace

The local working folder needs to be added to the workspace. Create the folder in local drive and add it to the workspace in the [EXPLORER] panel. [File] → [Save Workspace As…] to name.

Install and Configure SFTP

Search for “sftp” in the [EXTENSIONS: MARKETPLACE] panel. Install the one developed by “liximomo”. Need to restart Visual Studio Code to activate it.

Open the [EXPLORER] panel and run [sftp:config] in the command line which could be launched using [Command] + [Shift] + [P]. It would create “sftp.jason” in the hidden folder “.vscode”. Refresh the [EXPLORER] panel and to show.

Update the “host”, “username”, and “remotePath” values in “sftp:jason” to match the VM. The default web pages path in VM is “/var/www/yiiframework”. Save the configuration file.

Sync from Remote to Local

Move to the folder name which needs to keep codes in the [EXPLORER] panel. Right-click and choose “Sync Remote -> Local”. It would prompt for the password in the command line. Then run “Sync Remote -> Local” again to begin to sync everything from VM to local.

Sync from Local to Remote

Open and edit the file /frontend/views/site/index.php. Make some change and save. Move to any folder in the [EXPLORER] panel. Right-click and choose “Sync Local -> Remote” to upload changes.

Reference

  1. GregYang Blog: VS Code (Use SFTP)開發模式環境同步
  2. Oracle VirtualBox
  3. Turnkey Linux: Yii Framework
  4. Visual Studio Code
  5. Visual Studio Marketplace: sftp sync extension for VS Code
  6. Wiki: SSH File Transfer Protocol
  7. Yii Framework

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.