How to use VSCode to remotely edit website files?

Viewed 59972

I need to be able to remotely log into web servers for my clients and edit code remotely. I mostly use this for CSS changes, but also am starting to play with PHP as well.

I have tried to get Remote-Editor to work but it won't pick up the .remote file that I placed in the /home folder. The instructions don't really give great details on setting this up.

What do I do?

12 Answers

Use FileZilla, then set VScode as default editor (edit->settings->file editing->filetype associations and insert "php /usr/bin/code"). okey, now u need select your file on FTP and press "View/Edit", then ur file open in VScode editor. Done:)

Open Filezilla -> Edit -> Settings -> File Editing -> Filetype associations

Now you will have "Custom filetype associations:" situated on the right pane of the window. Over there you have to write the command for opening VSCode for PHP files.

Step 1: Search and locate the VSCode Exe file setup install directory on your computer. In my case it was (C:\Users\Shubham\AppData\Local\Programs\Microsoft VS Code/Code.exe)

Step 2: Copy the directory path link of the ".exe" file and come back to the "Custom filetype associations:" inside Filezilla.

Step 3: Now type "php" then give space & paste the directory path that you have copied inside double quotes and then again give space and write "-open". The final code should look something like this

php "C:\Users\Shubham\AppData\Local\Programs\Microsoft VS Code/Code.exe" -open

Step 4: Click the Okay Button and have a coffee.

Just type this is Filezilla Settings->File Editing-> File Association

php /snap/bin/code

Open Filezilla and go to Edit >> Settings

enter image description here

Click on File Editing, and set the radio button to use Custom Editor

In the text field below you need to enter the full path to Visual Studio Code, this is usually found in the /usr/bin/ directory, so you need to enter the following /usr/bin/code

Next select the radio button Always use default editor and click OK to finalise the settings.

enter image description here

open filezilla->edit->file editing->use custom editor->browse(find the visual code path)

for find visual code path->right click on the visual code and open location and paste that location to the browse menu and find the visual code short cut

after that press ok on filzilla it will work fine

It's important that you start Filezilla as an administrator. That was the reason why it wasn't working for me.

Most of the answers I see are for Windows. If anyone wants to associate File Types using Linux in Filezilla, the path is a bit different.

htm /snap/bin/code --force-user-env --no-sandbox --unity-launch
html /snap/bin/code --force-user-env --no-sandbox --unity-launch
js /snap/bin/code --force-user-env --no-sandbox --unity-launch
php /snap/bin/code --force-user-env --no-sandbox --unity-launch 

You do not need to use the extra flags, but they are being used in the Menu Shortcut, so I included them.

Open Filezilla -> Edit -> Settings -> File Editing -> Filetype associations then type:

php "C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code\Code.exe" %f

Note: substitute <username> with your windows username

Bonus: php can be replace with any kind of file format. Just write file extension name on lowercase.

I used this registry update to set vscode as my default text file editor (copy & paste into update.reg, open regedit and import the file):

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\SystemFileAssociations\text\shell\edit\command]
@=hex(2):22,00,25,00,55,00,53,00,45,00,52,00,50,00,52,00,4f,00,46,00,49,00,4c,\
  00,45,00,25,00,5c,00,41,00,70,00,70,00,44,00,61,00,74,00,61,00,5c,00,4c,00,\
  6f,00,63,00,61,00,6c,00,5c,00,50,00,72,00,6f,00,67,00,72,00,61,00,6d,00,73,\
  00,5c,00,4d,00,69,00,63,00,72,00,6f,00,73,00,6f,00,66,00,74,00,20,00,56,00,\
  53,00,20,00,43,00,6f,00,64,00,65,00,5c,00,43,00,6f,00,64,00,65,00,2e,00,65,\
  00,78,00,65,00,22,00,20,00,25,00,31,00,00,00

After that the registry is updated as follows:

enter image description here

Of course you should not trust hex encoded registry updates you found in the internet. So copy 22,00 ... 00,00, remove all backslashes, linebreaks and whitespaces and convert through one of many hex to ascii online converters to verify the import:

enter image description here

After you made this change you can even edit text files with vscode through the "edit" context menu entry:

enter image description here

To set VS Code as default editor for all type of files in mac use below steps:-

  • Click on Edit menu
  • Then click on setting option
  • Then find out File Editing and click on it (Not on submenu(Filetype associations))
  • Click on custom editor and then browse in application or download and select VS Code. And also click on checkbox "Always use default editor" and then click ok.

enter image description here

Related