Visual Studio Code几款FTP插件使用总结

投入Visual Studio Code后,很久没有使用过sublime text了,也很久没有用过基于编辑器的ftp工具了,这次专门探索了一下Visual Studio Code几款FTP插件,并作了简单的总结,ftp-sync是最棒的!

平时要维护类似wordpress这样的网站，然后虚拟主机又不支持远程仓的版本管理。总而言之，只能通过下载到本地修改后再通过FTP上传的情况，每次修改后都要开启FTP进行代码提交，相当繁琐。因此就诞生了一些编辑器的FTP插件，其实以前用sublime text的时候还有款插件叫SFTP不错（如果配置好了连接不上可以参考SFTP连接超时），可惜VSCODE上面没有，截至目前（2018年1月17日）可以用的FTP插件如下图：

为了找出最合适的插件，我全部都一个个试过了(关于如何使用参考插件说明,十分简单就不多说了)。然后有以下感想：

ftp-sync是测试中的唯一一个感觉还可以的,但是菜单为啥不全,感觉是一个BUG吧.希望后期能够优化.
ftp-sync菜单
SFTP/FTP sync总是回莫名其妙的卡住(左下角提示transfer就不动了),而且相同文件好像也会再次覆盖,不会跳过.文件比较多的时候出问题,不建议使用.
~~ftp-kr跟Simple FTP/SFTP一样没啥暖用,还不如就用ftp软件操作~~
~~Simple FTP/SFTP没啥暖用,还不如就用ftp软件操作~~

感觉很惨,没有一个真正好用的,而且连ftp传输状态信息也没有.有时候比较惨的误操作了需要中断传输,貌似只能强制关闭编辑器…

最后感觉,还是用sublime text 的SFTP来维护会比较好一点.如果不怎么用sublime text的话,个人建议使用ftp-sync在VSCode上表现还是不错的,有潜力,期待作者进一步优化~

关于sublime text 3(3103)版本Ctrl+Alt+P无法正常使用解决办法

关于sublime text 3(3103)版本Ctrl+Alt+P无法正常使用,自定义快捷键的设置command实际上就是prompt_select_workspace,解决了此问题

过完年回来上班的第一天,打开sublime text 3,提示有更新(Sublime Text 3 Build 3103),没有多想就点下载更新了…更新完后,发现问题严重了,一方面是之前朋友买的key失效了,看到非注册的几个单词在窗口顶部就不自在了.当然这个不是本文重点,至于怎么解决这个问题,我相信不会难倒机智的大家.

而另一方面是很多之前的设置也没了.比如自定义快捷键.我有安装SideBarEnhancements这个插件,设置的F12快速预览也没了,只好找回旧版存档重新设置,其实这个问题也不大.
最糟糕的是,之前习惯用的快速切换项目的Ctrl+Alt+P不能用了,这个是旧版默认设置好的.然后到处找快捷键怎么设置的,我很傻,其实后来发现这个问题很好解决.我却绕了个大弯.

首先,百度肯定是搜不到的.然后去用谷歌找.谷歌是万能的,找到如下内容:

{ "keys": ["ctrl+alt+p"], "command": "prompt_select_workspace" }

这下添加到自定义keymap,问题解决.参考:Quick Switch Project shortcut doesn’t work anymore(当然,他好像说3098版本就去掉了,我并未注意到可能我一直在使用更旧的版本.而changelog里面似乎也没看到3098)

当然这里还要提一点的是,如果一切设置好了发现还是不能用,那多半是快捷键冲突所致,比如输入法的全局快捷键等等,这里推荐一个虽然有点老,但是还不错的工具Windows Hotkey Explorer,大家自行安装后,可以查看系统全局被占用的快捷键,然后对应的关闭调整一下就好了.

总结下来我的自定义快捷键是这样的.

[
    { "keys": ["f12"],
        "command": "side_bar_open_in_browser" ,
        "args":{"paths":[], "type":"testing", "browser":""}
    },
    { "keys": ["alt+f12"],
        "command": "side_bar_open_in_browser",
        "args":{"paths":[], "type":"production", "browser":""}
    },
    {
        "keys": ["ctrl+t"],
        "command": "side_bar_new_file2"
    },
    {
        "keys": ["ctrl+alt+p"],
        "command": "prompt_select_workspace"
    }
]

最后来说说为啥我笨死了.其实关于这个command,我找不到的话,我直接找旧版本的sublime text的default keymap查一下就好了嘛…笨笨笨………..还费了老大功夫.其他朋友有遇到类似问题也可举一反三,自行配置一个好用的sublime text咯~~~~

工具虽好,务必不要再WIN10下使用该软件,会发生十分可怕的事情!(2017年8月25日更新)

SublimeText3的css文件引用图片转base64快速方法

如果在SublimeText3的css文件引用图片里将图片快速转换为base64(Data URL)的方法,以及利用chrome开发者工具获取图片的Data Url的方法

在你做的css文件中,起初背景图都是直接引用目录的切好的图片.如下:

.icons {background-image:url(../images/icon.png);}

那么在做移动端页面的时候,有时我们需要将小图直接转换成base64格式,一般只能借助第三方工具.
这里其实用sublime text 3 的快捷键ctrl+’可以直接快速转换.
当然页面的图片建议是压缩(例如tinypng工具)后的,要不然转换出的字符将会很长.
如果能确定页面的图片都可以直接转换,你可以直接选择 url( 然后快捷键 alt+f3 ,接着按 ctrl+’ ,这样一来css的图片就全部转换好了.

另外还有一种通过chrome快速获取网页上图片的Data Url方法.如图

SublimeText3突然无法通过快捷键F12预览页面

最近我的sublime text 3突然无法用F12预览正在制作的页面了.相反,倒是成了提示” unable to find xxx”,还真是奇怪,当然本身这是用的一个侧边栏插件SideBarEnhancements,但是好好的插件,为什么无缘无故的快捷键就坏了呢.

最近我的sublime text 3突然无法用F12预览正在制作的页面了.相反,倒是成了提示” unable to find xxx”,还真是奇怪,当然本身这是用的一个侧边栏插件SideBarEnhancements,但是好好的插件,为什么无缘无故的快捷键就坏了呢.不过最近似乎每次启动sublime text的时候,都有更新什么插件,于是就想到本来已装的插件SideBarEnhancements的设置,可是初看又看不出来什么名堂.于是只好去看看是不是插件更新了什么.

找到插件主页,看到了大大的F12 key的说明片段:

(Please note that from version 2.122104 this package no longers provides the key , you need to manually add it to your sublime-keymap file (see next section))

这句话说的很清楚了.但是我就想作为全局使用的快捷键,毕竟养成的习惯不易更改嘛…继续向下看,找到F12 key conflict, 官方也有说明啦:

On Sublime Text 3 F12 key is bound to "goto_definition" command by default. This package was conflicting with that key, this no longers happens. You need to manually add the keys now: Go to Preferences -> Package Settings -> Side Bar -> Key Bindings - User and add any of the following:

[
    { "keys": ["f12"],
    "command": "side_bar_open_in_browser" ,
    "args":{"paths":[], "type":"testing", "browser":""}
    },
    { "keys": ["alt+f12"],
    "command": "side_bar_open_in_browser",
    "args":{"paths":[], "type":"production", "browser":""}
    },
    {
    "keys": ["ctrl+t"],
    "command": "side_bar_new_file2"
    },
    {
    "keys": ["f2"],
    "command": "side_bar_rename"
    },
]

其实很简单,将上面内容复制到

SideBarEnhancements_keybindings_user — 用户自定义键位绑定

保存就行了,如果想要鱼和熊掌兼得的朋友,就请自行设置成其他快捷键咯.

另外奉献两个参考地址:

SideBarEnhancements

Sublime 3 – Set Key map for function Goto Definition

PS: 注意官方提供的修改方案,设置了F2的快捷键,覆盖了之前的定位功能,如果不需要这个重命名文件功能请自行删除(2014年11月28日)

Side​Bar​Enhancements

Sublime 3 – Set Key map for function Goto Definition

SideBarEnhancements