Begin by saying something about your troubles and the background of writing this article. I have a low-powered MacBook and a powerful desktop. I had been running front-end projects on the Mac, and that desktop was mostly idle, used occasionally to read documents. Later, as I needed to do server development, sometimes I had to run several projects at the same time, the low-powered Mac began to get hot, the fan whirled, and it became more and more jammed. That affected my work efficiency and development experience, so I decided to make good use of that desktop.

My own idea was to write code on the Mac and then sync it to the desktop in time, running the project on the remote desktop. This synchronization process must be fast and automatic, otherwise it will greatly affect the development experience.

Some people might say, what if you just develop on the desktop? Ha ha, can be can, but it is a little far from my ideal state. The productivity tools and development tools available on macOS are hard to replace on the Ubuntu desktop, and the desktop is not portable enough for meetings. If I can fulfill my needs, I can combine the best of both, so why not?

At first, I planned to make a set of things to fulfill this requirement by myself. Later, I found that VS Code has a ready-made plug-in to meet my needs. The experience was very good and I saved myself a lot of trouble. Now let’s take a look at the plugin:

Do a search for FTP-kr in VS Code’s plugin market, and then perform a Reload Window to refresh the VS Code Window to make the plugin work. Let’s take a look at the basic use of the plugin:

The plug-in configuration

Start by executing ftP-kr: Init, which will generate an FTP-kr. json file in the.vscode folder in the project root directory. Let’s look at how to configure this plug-in:

The following comments are for easy explanation only. Json does not allow comments. Please be careful when copying the following configuration.

{" host ":" ", / / remote machine IP "username" : "", / / FTP/SFTP username" password ": RemotePath: "", "protocol": "SFTP ", // protocol" port": 22, // port "fileNameEncoding": "utf8", // fileNameEncoding" autoUpload": true, // whether to automatically upload "autoDelete": "AutoDownload ": false, // Whether "ignore": [/ / sync files/folders "git", "/. Vscode", "/. Happypack", "/ node_modules"]}Copy the code

Detailed configurations can be found here.

The plug-in command

Once configured, let’s take a look at the common commands for plug-ins:

  • ftp-kr: Upload All– Upload files of different sizes from those on the remote machine
  • ftp-kr: Download All– Downloads all files that do not exist locally from the remote machine
  • ftp-kr: Upload This– Upload this file
  • ftp-kr: Download This– Download this file
  • ftp-kr: Delete This– Delete this file from the remote machine
  • ftp-kr: Diff This– Diff Indicates the file
  • ftp-kr: Refresh– Refreshes remote files
  • ftp-kr: Reconnect– Reconnect to the remote machine
  • ftp-kr: SSH– Run the SSH command to directly locate the corresponding directory on the remote machine

For all commands, see the plug-in introduction.

Some tips

  • Some front-end projects have large JS packages in debug mode, which can cause browser problems if the network is slownet::ERR_CONTENT_LENGTH_MISMATCHError or slow refresh. Using WebPack devServer as an example, setting the Compress attribute of devServer to true solves this problem.
  • In VS Code’s EXPLORE TAB on the left, hover over the file and right click to list some common commands. And the EXPLORE TAB will have an ftP-Kr: EXPLORE, which allows you to view files on your remote machine.

After using it for a few days, I found that the experience is much better than in the direct running project. Students who have the same trouble as I did before can try it. VS Code has other plug-ins that are similar to this, I have tried some of them and they are not as good as this experience. If you are interested, you can try and compare them, or you can develop one yourself.