查看原文
其他

【第90期】如何在Webstorm/Phpstorm中设置连接FTP,并快速进行文件比较,上传下载,同步等操作

豪情 前端早读课 2020-11-03

PS:此篇附带图片,建议在wifi下查看。


Phpstorm除了能直接打开localhost文件之外,还可以连接FTP,除了完成正常的数据传递任务之外,还可以进行本地文件与服务端文件的异同比较,同一文件自动匹配目录上传,下载,这些功能是平常IDE,FTP软件中少见的,而且是很耗工作时间的一个操作。换句话说,在Webstorm/Phpstorm中操作ftp能找到原来版本控制的感觉。唯一的缺点是:上传,下载的打开链接要稍费时间,适合的场景在于单文件的编辑,这个如果网速够快一般可以忽略,而且就个人体验,虽然链接的速度稍慢,传输的速度并不慢。

1. 设置: 设置的入口有两处,

a. Tools->Deployment->configruation


b. File->Settings->Deployment->configruation


单击左上角加号新增一个FTP服务连接 然后配置FTP host,username,pwd等信息,配置好之后,可以Test FTP connection测试FTP是否连接成功。 然后点击Root path三点,如果有FTP服务端的目录读取出来,那就没问题,如果读取不出来,则在下面的Advanced options中选择Passive mode(被动模式)。 然后在Web server root URL中填写域名信息或者空间商提供的免费三级域名。 然后在Mappings 选择映射目录分别为本地,发布或web路径。



2. 出口:

在与ftp连接的项目文件右击就能发现deployment,分别有四个选项(这个选项只有在连接成功后才能显示):


1). upload to ... 上传到服务端

2). Download from ... 从服务端拉

3). Compare with Deployed Version on ... 本地版本与服务端版本进行比较


4). Sync with Deployed to ... 比较之外还可以直接进行操作.(3,4的差别在于,3只能浏览不能操作,4可以操作)。


3. 显示扩展面板 Tools->Deployment->configruation->Browse Remote host


成功打开之后:


打开的目的在于对文件的方便编辑,可以这样操作:


4. 快捷操作

a. 可以在keymap中添加相应的快捷键操作。

b. 可以在toolbar上添加常用的图标以方便操作,为了防止误操作,建议操作的图标之间最好有隔离图标,虽然误操作可以利用本地历史记录找回来,但工作效率可能有所下降。


另外提供除了版本控制之外的一份本地历史记录,多次挽救我于生死边缘:

右键 -> localhost history -> show history

Pub label是对当前历史记录的一个名称记录


PS:

A:最近早读君在调整团队的前端项目环境,由第一版采用在本地配置项目环境,第二版采用虚拟机环境,到现在采用把项目代码部署到内网环境,为了达到即时可见的效果,要求在本地改完文件后,要自动同步到内网。这样极大提高了前端的对项目的开发效率。

B:phpstorm/webstorm的ftp功能,除了能上传外,还有文件对比功能,这种正式补了ftp的缺陷。有兴趣的同学可以试用。




    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存