VsCode SFTP插件使用介绍
一、前言
二、SFTP安装
三、SFTP原理
四、SFTP配置
4.1 常用配置
4.2 示例配置
五、SFTP使用
六、结语
一、前言
前端开发少不了ftp修改文件的情况,通常我们都会用 FlashFXP 等软件来上传或下载网站文件,但如果我需要进行网站编码开发的时候,那么使用编辑器软件来上传文件就方便多了。
这次我介绍用 VsCode 的 SFTP插件来同步网站文件。
ps:SFTP目前不能处理中文文件,我也找不到解决办法,如果你有,请留言告诉我。
二、SFTP安装
VsCode安装插件很简单,插件管理,搜“SFTP”,然后安装即可。
三、SFTP原理
SFTP原理是这样的:首先本地要有一个项目文件夹,同时远程也有一个项目文件夹,然后通过配置文件来同步二者。
SFTP可以查看远程项目所有文件,但不能直接操作,必须操作本地项目文件,再同步到远程项目。
现在我们本地和远程均有一个文件夹“sftpFolder”,用VsCode打开本地文件夹“sftpFolder”,然后执行 ctrl+shift+p ,搜索 SFTP:Config ,回车后,会生成一个“.vscode/sftp.json”,这个就是配置文件。
同时,如下图左侧会多了一个“远程目录”。
四、SFTP配置
4.1 常用配置
{
"name": "本地文件夹名称(可自定义)",
"host": "ip或域名",
"protocol": "协议:[sftp/ftp]默认ftp",
"port": 22,
"username": "username",
"password":"password",
"remotePath": "远程文件夹地址,默认/",
"context": "本地文件夹地址,默认为vscode工作区根目录",
"uploadOnSave": true,
"downloadOnOpen":false,
"ignore": [
"**/.vscode/**",
"**/.git/**",
"**/.DS_Store"
],
"watcher": {
"files": "*",
"autoUpload": false,
"autoDelete": false
}
}
配置文件不能写注释,所以这里说明一下其中几个属性:
uploadOnSave:本地更新文件保存会自动同步到远程文件(不会同步重命名文件和删除文件)
downloadOnOpen:从远程服务器下载打开的文件
ignore:忽略的文件(匹配的文件不会同步)
watcher:监听器(可以重命名文件和删除文件)
autoUpload:文件变更会自动同步(修改和重命名)
autoDelete:文件删除会自动同步
context:默认当前工作根目录,如果想只上传dist,可以写:“dist”
>>更多配置请看这里
4.2 示例配置
{
"name": "test",
"host": "abc.com",
"protocol": "ftp",
"port": 21,
"username": "username",
"password":"password",
"remotePath": "/",
"uploadOnSave": true,
"ignore": [
"**/.vscode/**",
"**/.git/**",
"**/.DS_Store"
],
"watcher": {
"files": "*",
"autoUpload": false,
"autoDelete": false
}
}
五、SFTP使用
Upload Folder 和 Download Folder 在 uploadOnSave 和 watcher 都关闭的情况下使用。
六、结语
全文结束,希望对你有所帮助。