很实用的 VSCode 插件

59 阅读1分钟

GitLens — Git supercharged

image.png

作用1:可以查看每行代码的作者及修改时间,在每行代码的末尾,会有最近一次提交的所有信息

image.png

作用2: 可以在编辑器中查看某个文件的提交历史

image.png

安装方法:在 VSCode extensions 中 搜索 “gitlens” 安装,并重启 VSCode

image.png


Open In Default Browser

image.png

作用:可以对编辑器中的 html 文件右键操作,直接在浏览器快速运行(不需要再单独启动任何服务器),非常适用仅调试一个 Demo 页面上时,在其他电脑或手机上快速访问的场景。效果如下:

image.png

image.png

安装方法:在 VSCode extensions 中 搜索 “Open In Default Browser” 安装,并重启 VSCode

image.png


Remote Development

作用:VSCode 打开远程服务器代码并修改远程服务器代码

image.png

安装方法

1、在 VSCode extensions 中 搜索 “Remote Development” 安装

image.png

2、安装完之后,在左侧菜单中 会出现如下的小图标,代表 Remote Explorer

image.png

3、切换成 SSH Targets ,并点 添加,如下图:

image.png

4、输入 远程服务器地址,选择 ssh config 存放地址

image.png

image.png

5、添加好之后,左侧的 SSH TARGETS 中就会出现刚刚设置好的服务器,点击打开,按提示输入密码

image.png

6、连接成功,打开对应的代码目录即可像在编辑本地文件一样,编辑服务器上的文件

image.png

image.png


待继续更新中..