WebStorm Code With Me 实现多人远程协同编程

场景

当无法使用公司的 vpn 又需要开发项目，但项目的接口环境不是属于公网的，在家里访问不到。

解决方法

1. 直接使用远程连接工具如向日葵、TeamView 等，这种方式虽然可以使用，也可以写代码，但是写代码的体验将会极差。

2. 使用 webstorm 自带的 code with me

code with me 是什么？

Code With Me 是一款功能强大的工具，可让您协同工作以处理代码。可以多人更改代码。并且可以将主机的端口转发到其他主机。

使用步骤

• 找到 code with me 主机开启邀请链接（或者，从 Tools -> code with me）

• 在 code with me 对话框中，配置访问者的访问权限。
  • Read-only：为访客选择此权限，以对文件，终端和运行操作具有只读访问权限。
  • Edit files：如果您希望访客仅编辑文件而不访问终端或执行代码，请选择此权限。
  • Full access：选择此权限可为您的访客授予对计算机上所有文件，终端和运行操作的完全访问权限。
  • Custom:自定义

• 配置权限后，单击 Enable Access

• 出现这个状态就是创建成功

• 复制邀请链接，然后发送给对应的开发人员

• 当访客单击链接，需要下载一个 code with me 客户端程序（600k 左右）

• 下载完成后，输入邀请链接，点击链接

• 这时主机会收到其他人员开发加入开发的提示，主机需要点击弹出窗口的 accept

现在配置就完成了，当你写代码时，只需要在自己的电脑中写，远程的主机会同步更新。

如何配置端口转发

上述的操作配置成功后，可以在本机写代码了，但是想要在浏览器实时预览效果并调试，还是需要到远程的主机。 code with me 仍旧有方法可以解决这个问题，比如你项目的端口是 3001，即可在如图的配置中添加 3001 端口。 这时远程主机的 3001 端口就被转发到你自己的机器上面了，就可以在自己机器的浏览器实时看到效果并调试了。