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

Posted 2023-02-18

【中文标题】如何使用 VSCode 远程编辑网站文件？

【英文标题】：How to use VSCode to remotely edit website files?

【发布时间】：2018-05-11 20:52:32

【问题描述】：

我需要能够为我的客户远程登录 Web 服务器并远程编辑代码。我主要将其用于 CSS 更改，但也开始使用 php。

我试图让远程编辑器工作，但它不会拾取我放在 /home 文件夹中的 .remote 文件。这些说明并没有真正提供有关设置的详细信息。

我该怎么办？

【问题讨论】：

你试过这些：codepen.io/ginfuru/post/remote-editing-files-with-ssh & marketplace.visualstudio.com/…

你使用什么操作系统？

如果有人正在寻找适用于 Mac 的解决方案：superuser.com/questions/1603556/…

【参考方案1】：

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

或者，您可以使用FTP Sync 之类的扩展名在本地编码，并自动为您同步文件。

【讨论】：

理论上，这种方法没什么问题。我确实发现，无论出于何种原因，FileZilla 都无法识别编辑器的更改，并且仍然使用操作系统默认设置。也许我在命令行中没有必要的选项？

有时我们必须注意权限，即即使我们进行更改并按保存，Filezilla 可能会显示文件正在成功传输，但由于权限原因，在服务器上看不到更改。跨度>

【参考方案2】：

有几种方法都与编辑器无关。

首先，sshfs 是跨平台的，您可以通过操作系统包管理器进行安装。一个简单的方法如下：

mkdir -p ~/mnt/server
sshfs [e-mail]:/path/on/server ~/mnt/server

之后，您可以在 ~/mnt/server 本地获得来自 server.example.com 的完整文件夹结构。确保设置 SSH 密钥以避免每次都输入用户密码。你可以在网上到处找到这方面的教程。

对于仅提供 FTP 访问（共享主机等）的服务器，您可以以相同的方式使用 curlftpfs。

要关闭连接，只需卸载：

umount ~/mnt

对于基于 GUI 的方法，您有多种选择。有 Transmit (macOS)，它将安装连接作为卷，Forklift (macOS)，它是一个 Finder 替代品，可以做同样的事情，ExpanDrive (macOS/Windows) 和我最喜欢的 Mountain Duck (macOS/窗户）。

如果您计划移动大量数据，尤其是大量小文件，根据我的经验，Mountain Duck 的表现最好。

【讨论】：

我喜欢使用 sshfs 的方法，尽管对于某些使用 macOS 的人来说可能会感到害怕，因为您必须允许 kExt。

不幸的是，我发现它不稳定，所以现在我不得不寻找其他方法。 :-)

这个解决方案非常适合我。 EC2 实例并在 Sublime 编辑器中打开 src 文件夹： mkdir -p ~/mnt/server ； sshfs [e-mail]:/path/on/server ~/mnt/server

【参考方案3】：

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

【讨论】：

为了知道使用哪个路径，假设你在Linux机器上，只需在命令行中输入which code，就会显示vscode程序路径。我的输出是“/snap/bin/code”。所以在文件类型关联中，我添加了：“php /snap/bin/code”。

【参考方案4】：

只需输入这是 Filezilla Settings->File Editing-> File Association

php /snap/bin/code

【参考方案5】：

打开filezilla->编辑->文件编辑->使用自定义编辑器->浏览（找到可视化代码路径）

查找可视代码路径->右键单击可视代码并打开位置并将该位置粘贴到浏览菜单并找到可视代码快捷方式

在 filzilla 上按确定后，它会正常工作

【讨论】：

唯一解决我问题的答案。非常感谢。

【参考方案6】：

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

现在您将在窗口的右窗格中看到“自定义文件类型关联：”。 在那里你必须编写打开 VSCode for PHP 文件的命令。

步骤 1：在您的计算机上搜索并找到 VSCode Exe 文件设置安装目录。就我而言，它是 (C:\Users\Shubham\AppData\Local\Programs\Microsoft VS Code/Code.exe)

第二步：复制“.​​exe”文件的目录路径链接，回到Filezilla里面的“自定义文件类型关联：”。

第 3 步：现在输入“php”，然后输入空格并将复制的目录路径粘贴在双引号内，然后再次输入空格并输入“-open”。最终的代码应该是这样的

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

第 4 步：点击确定按钮并喝杯咖啡。

【讨论】：

嗨，兄弟.. Shubham This Side... 工作就像一个魅力:)

感谢您的贡献。第 3 步很有帮助

【参考方案7】：

打开Filezilla -> Edit -> Settings -> File Editing -> Filetype associations 然后输入：

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

注意：用您的 Windows 用户名替换 <username>

奖励： php 可以替换为任何类型的文件格式。只需将文件扩展名写成小写即可。

【参考方案8】：

请务必以管理员身份启动 Filezilla。这就是为什么它对我不起作用的原因。

【参考方案9】：

我看到的大多数答案都是针对 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 

您不需要使用额外的标志，但它们正在菜单快捷方式中使用，因此我将它们包括在内。

【参考方案10】：

打开 Filezilla 并转到 编辑 >> 设置

点击文件编辑，并设置单选按钮使用自定义编辑器

在下面的文本字段中你需要输入Visual Studio Code的完整路径，这个通常在/usr/bin/目录下，所以你需要输入下面的 /usr/bin/code

接下来选择单选按钮始终使用默认编辑器并点击OK完成设置。

【参考方案11】：

我将 Filezilla 编辑器设置为文本文件的默认编辑器，并使用此注册表更新将 vscode 设置为我的默认文本文件编辑器（复制并粘贴到 update.reg，打开 regedit 并导入文件）：

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

之后注册表更新如下：

当然，您不应该相信您在互联网上找到的十六进制编码的注册表更新。所以复制22,00 ... 00,00，去掉所有反斜杠、换行符和空格，通过one of many hex to ascii online converters进行转换，验证导入：

进行此更改后，您甚至可以通过“编辑”上下文菜单条目使用 vscode 编辑文本文件：