如何使用VSCode远程编辑网站文件?

28

我需要能够远程登录我的客户的Web服务器并远程编辑代码。我主要用于CSS更改,但现在也开始尝试使用PHP。

我尝试过使用Remote-Editor,但它无法捕获我放置在/home文件夹中的.remote文件。该说明并没有提供有关设置此项的详细信息。

我该怎么做?


你试过这些吗: https://codepen.io/ginfuru/post/remote-editing-files-with-ssh 和 https://marketplace.visualstudio.com/items?itemName=rafaelmaiolla.remote-vscode - Kanuj Bhatnagar
你使用什么操作系统? - Peternak Kode Channel
如果有人正在寻找Mac的解决方案,请参考以下链接:https://superuser.com/questions/1603556/make-vscode-default-editor-for-files-in-filezilla - HappyHands31
12个回答

17

使用FileZilla,然后将VScode设置为默认编辑器(编辑->设置->文件编辑->文件类型关联并插入“php /usr/bin/code”)。好的,现在您需要在FTP上选择您的文件,然后按“查看/编辑”,然后您的文件将在VScode编辑器中打开。完成:)


4
为了知道要使用哪条路径,并假设你正在使用 Linux 机器,只需在命令行中键入 which code,vscode 程序路径将显示出来。我的输出结果是 "/snap/bin/code"。因此,在文件类型关联中,我添加了:"php /snap/bin/code"。 - Daniel Gitahi

8
使用FTP客户端(例如FileZilla),然后将VSCode设置为默认编辑器。每次打开文件时,它都会在VSCode中打开。我强烈建议您将所有代码下载到自己的计算机上并将其用作开发环境,然后在完成更改后备份您的站点,然后一起上传修改后的文件。不必在自己的计算机上编辑文件,但如果您需要出于任何原因恢复旧版本(例如代码中有错误,现在什么都不能正常工作),则建议这样做。

或者,您可以使用FTP Sync等扩展在本地编码,并自动同步文件。


理论上,这种方法没有问题。但我发现,由于某些原因,FileZilla无法识别编辑器的更改,仍然使用操作系统默认设置。也许我在命令行中没有必要的选项? - tim.rohrer
有时候我们必须要注意权限问题,即使我们进行了更改并保存,Filezilla可能会显示文件成功传输,但由于权限问题,在服务器上看不到更改。 - Wajdan Ali

8

打开Filezilla -> 编辑 -> 设置 -> 文件编辑 -> 文件类型关联

现在您会看到窗口右侧有“自定义文件类型关联:”选项。 在那里,您需要为打开PHP文件的VSCode编写命令。

步骤1: 在计算机上搜索并定位VSCode Exe文件安装目录。在我的情况下,它是 (C:\Users\Shubham\AppData\Local\Programs\Microsoft VS Code/Code.exe)

步骤2: 复制".exe"文件的目录路径链接并返回到Filezilla中的“自定义文件类型关联:”。

步骤3: 现在键入“php”,然后给两个空格并粘贴您已复制的目录路径,放在双引号内,再次给一个空格并输入“-open”。最终代码应该类似于此

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

步骤4: 单击“确定”按钮然后喝杯咖啡。


嗨兄弟,我是Shubham...工作得像魔法一样 :) - Shubham Pandey
针对 Mac 用户:请按照以下步骤进行操作-找到你的代码编辑器(例如Atom),并将路径添加到设置中,如下所示:php /Applications/Atom.app %f - JohnMiky

6
在Filezilla设置中,打开“文件编辑”选项卡,找到“文件关联”设置,然后键入以下内容:php /snap/bin/code

5

有几种方法可以实现此功能,并且都与编辑器无关。

首先,有 sshfs,它是跨平台的,您可以通过操作系统软件包管理器安装。一个简单的方法如下:

mkdir -p ~/mnt/server
sshfs user@server.example.com:/path/on/server ~/mnt/server

接下来,你可以在本地使用~/mnt/server路径访问server.example.com的完整文件夹结构。确保设置SSH密钥以避免每次都输入用户密码。你可以在网络上找到各种教程。

对于仅提供FTP访问(共享主机等)的服务器,你可以以相同方式使用curlftpfs

要关闭连接,只需卸载即可:

umount ~/mnt

如果您选择基于图形界面的方法,有几个选项。有Transmit(适用于macOS),它具有将连接挂载为卷的功能;Forklift(适用于macOS)是Finder替代品,可以做到相同的操作;ExpanDrive(适用于macOS/Windows)和我最喜欢的Mountain Duck(适用于macOS/Windows)。

如果您计划移动大量数据,特别是许多小文件,据我的经验,Mountain Duck是表现最佳的。


我喜欢使用sshfs的方法,尽管对于一些使用macOS的人来说可能会有点吓人,因为你必须允许kExt。 - tim.rohrer
不幸的是,我发现它不稳定,所以现在我必须寻找其他方法。 :-) - tim.rohrer
这个解决方案完美地适合我。在EC2实例中,通过Sublime编辑器打开src文件夹:mkdir -p ~/mnt/server; sshfs user@server.example.com:/path/on/server ~/mnt/server - negrotico19

5

打开Filezilla,进入编辑 >> 设置

enter image description here

点击文件编辑,并将单选按钮设置为使用自定义编辑器 在下面的文本字段中,您需要输入Visual Studio Code的完整路径,通常可以在/usr/bin/目录中找到,因此您需要输入以下内容/usr/bin/code 接下来选择单选按钮始终使用默认编辑器,然后单击确定以完成设置。

enter image description here


3

我看到的大多数答案都是针对Windows系统的。如果有人想在Filezilla中使用Linux来关联文件类型,路径会有所不同。

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 

您不需要使用额外的标志,但它们被用于菜单快捷方式,所以我包含了它们。


3
要将VS Code设置为Mac上所有类型文件的默认编辑器,请执行以下步骤:
  • 点击编辑(Edit)菜单
  • 然后点击设置(Settings)选项
  • 找到文件编辑(File Editing)并单击它(不要单击子菜单(Filetype associations))
  • 单击自定义编辑器(Custom editor),然后浏览应用程序或下载并选择VS Code。还要勾选"始终使用默认编辑器(Always use default editor)"复选框,然后单击"确定(ok)"。

enter image description here


3

很重要的一点是,你需要以管理员身份启动Filezilla。这就是为什么它对我而言无法工作的原因。


2

打开 FileZilla -> 编辑 -> 文件编辑 -> 使用自定义编辑器 -> 浏览 (找到 Visual Studio Code 路径)

如何找到 Visual Studio Code 路径?右键单击 Visual Studio Code 并打开位置,将该位置粘贴到浏览菜单中并找到 Visual Studio Code 快捷方式

完成以上步骤后,在 FileZilla 上按下“确定”,即可正常工作。


1
只有解决了我的问题的答案。非常感谢。 - zahra_oveyedzade

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接