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

     2023-02-18     13

关键词:

【中文标题】如何使用 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 user@server.example.com:/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 user@server.example.com:/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 用户名替换 &lt;username&gt;

奖励: 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 编辑文本文件:

【讨论】:

如何优雅地使用vscode来编辑vue文件?

...lStdioCode).当然vscode对vue也不是原生支持的,今天来扒一扒如何配置vscode以便优雅地编辑vue文件先来扒一扒使用PHPStorm遇到的问题:vue文件虽然可以通过插件来解决高亮问 查看详情

如何优雅地使用vscode来编辑vue文件

参考技术A不可能,目前暂无一个软件能取代LaTeX排版之王的地位。当然,LaTeX的模式并不是每个人都喜闻乐见的。在加之微软统治下的用户恶习,使得大家更倾向于Word的使用。又,题主将Word与LaTeX类比,显然和论文排版有关。 查看详情

使用vscode软件直接编辑调试远程linux主机上的代码

1)使用背景使用Linux默认vim编辑器时,代码显示不美观,没有自动补全复制粘贴操作限制不方便,对于需要从其他地方转移过来调试的代码需要依赖第三方ssh软件,例:Xshell等2)软件介绍此时推荐一款跨平台开源编辑器软件:Visual... 查看详情

如何使用vscode-代码编辑器工具

...电脑版本是Mac、windows或者linux的,系统分为32bit或者64bit如何查看电脑版本系统型号?电脑鼠标右键点击此电脑查看属性,然后根据你自己电脑版本型号下载就OK,文件大概60M样子,下载速度取决你的网速。下载完成后,桌面会出... 查看详情

VSCode:如何垂直拆分编辑器

】VSCode:如何垂直拆分编辑器【英文标题】:VSCode:HowtoSplitEditorVertically【发布时间】:2017-04-0405:01:38【问题描述】:在VisualStudio代码中,前段时间,当我使用View->SplitEditor时,它会垂直拆分。(左边一个文件,右边一个文件。... 查看详情

vscode开发工具的入门及基本使用(代码片段)

VsCode开发工具的入门及基本使用一、VsCode介绍1.VsCode简介2.VsCode特点二、安装VsCode1.下载VsCode2.安装VsCode3.打开VsCode三、设置VsCode中文1.搜索中文语言插件2.安装中文语言插件四、初识VsCode1.VsCode左侧栏模块2.系统设置功能五、VsCode初... 查看详情

优雅地使用vscode来编辑vue文件

... vue.js当然vscode对vue也不是原生支持的,今天来扒一扒如何配置vscode以便优雅地编辑vue文件先来扒一扒使用PHPStorm遇到的问题:vue文件虽然可以通过插件来解决高亮问题,但是 <script> 标签中的ES6代码的识别老是出... 查看详情

hithesis部署和vscode远程编辑tex文件(代码片段)

哈工大学位论文模板:GitHub-dustincys/hithesis:嗨!thesis!哈尔滨工业大学毕业论文LaTeX模板1、在ubuntu下安装TinyTeX1)gitclone https://github.com/dustincys/hithesis.git2)cd目录到hithesis/.github/workflows下执行:s 查看详情

hithesis部署和vscode远程编辑tex文件(代码片段)

哈工大学位论文模板:GitHub-dustincys/hithesis:嗨!thesis!哈尔滨工业大学毕业论文LaTeX模板1、在ubuntu下安装TinyTeX1)gitclone https://github.com/dustincys/hithesis.git2)cd目录到hithesis/.github/workflows下执行:s 查看详情

hithesis部署和vscode远程编辑tex文件(代码片段)

哈工大学位论文模板:GitHub-dustincys/hithesis:嗨!thesis!哈尔滨工业大学毕业论文LaTeX模板1、在ubuntu下安装TinyTeX1)gitclone https://github.com/dustincys/hithesis.git2)cd目录到hithesis/.github/workflows下执行:s 查看详情

使用git上传文件,vscode使用git上传项目

GIT使用方法:1、安装git2、设置用户名和邮箱:  gitconfig--globaluser.name="haokan1113"  gitconfig--globaluser.email=‘1312167352@qq.com‘3、初始化本地库  gitinit4、登录Github网站,建立远程仓库5、克隆远程仓库(远程到本地)  gitcloneg... 查看详情

在vscode里面使用tinymce富文本编辑器

问题在vue里需要用到tinymace富文本编辑器,如何去进行安装。​​方法在浏览器中搜索tinymce,官方网站为英文网站(官方网站地址:https://www.tiny.cloud/get-tiny/self-hosted/)2.进入官网以后先点击上面的Docs选项࿰... 查看详情

VSCode 远程 SSH 连接失败

...【发布时间】:2020-06-1520:42:24【问题描述】:我正在尝试使用Remote-SSH扩展来编辑Debian服务器上的文件。SSH连接已正确建立,但随后我收到一条错误消息:Failedtoconnecttotheremoteextensionhostserver还有日志:[13:19:04.182]Remoteserv 查看详情

在vscode里面使用tinymce富文本编辑器

问题在vue里需要用到tinymace富文本编辑器,如何去进行安装。​​方法在浏览器中搜索tinymce,官方网站为英文网站(官方网站地址:https://www.tiny.cloud/get-tiny/self-hosted/)2.进入官网以后先点击上面的Docs选项࿰... 查看详情

vscode远程连接主机

参考技术Aubuntu下使用vscode编辑器远程连接主机教程一、生成密钥在命令行下执行ssh-keygen命令来生成本机的密钥文件,直接回车使用默认位置,执行成功后会显示生成密钥的路径将生成的密钥发送到远程的服务器上,可以用ssh或s... 查看详情

使用vscode访问和修改远程计算机文件

使用vscode访问和修改远程文件,分三步实现:在远程linux机器上安装rmate;在本地windows上安装openssh;在vscode中安装扩展remotevscode。1、在远程linux机器上安装rmatermate有很多中语言版本,这里用的是python的版本。github地址:https://githu... 查看详情

Vscode : 通过集成终端使用 Remote-SSH 在本地打开文件

】Vscode:通过集成终端使用Remote-SSH在本地打开文件【英文标题】:Vscode:OpenfilelocallyusingRemote-SSHthroughintegratedterminal【发布时间】:2020-05-0701:43:39【问题描述】:我正在使用Remote-SSH插件进行远程开发,并希望使用集成终端(运行远... 查看详情

如何让 VSCode 编辑器停止滚动到文件底部?

】如何让VSCode编辑器停止滚动到文件底部?【英文标题】:HowtomakeVSCodeeditorstopscrollingpastbottomofafile?【发布时间】:2018-01-2600:07:15【问题描述】:在VSCode编辑器中,当你将滚动条拉到文件底部时,你看到的只是一个空白页,因为... 查看详情