Visual Studio Code 让高效进行到底
一直都是用 sublime text 作为开发工具，用久了自然而然会觉得生活无趣，于是决定试试微软的新产品 Visual Studio Code 。
下载地址：https://code.visualstudio.com/
安装完后给我的第一感觉就是天边送来了一波难以抵抗的视觉盛宴。
在这里界面里你就可以看到一个非常有情怀的快速链接：安装键盘快捷方式（你可以安装包括但不限于 Vim、Sublime、Atom 的键盘快捷方式），所有这个 coding 工具还是非常容易上手的。
从体积来说比 Sublime text 大了不少，30多兆，启动速度也肯定会慢一些，但还是在可接受的范围内，这个还跟机器有关系。
Visual Studio Code 的快捷键设置是统一管理的，所以你只需要修改一个文件就可以了。我们先来看看 Visual Studio Code 的常用快捷键。
Visual Studio Code 有两个比较重要的文件，一个是 setting.json （基本设置），另一个是 keybindings.json（配置快捷键文件）。它们 分别在【文件】-【首选项】-【设置】和【文件】-【首选项】-【键盘快捷方式】。
如果看不清可以到官网去查阅：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
极常用的快捷键：
Ctrl + Shift + F 在项目下所有文件内查找内容（并且可全局替换）
beautify
格式化代码（JavaScript JSON CSS Sass 和 HTML），安装完之后你可以使用F1来格式化代码了，注意F1 不是快捷键，铵F1 只是调出了命令面板，搜索beautify 就可以看到两个命令（to beautify a selection、Beautify file），这两个命令从字面上都很好理解，但在实践使用中，我却没发现他们有什么区别，肯定是会有区别的只是我还没发现而已。
https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
vscode-icons
这是一个文件图标显示插件，可以根据你的文件类型开决定将显示何种图标。这样也不只是为了美观，还可以让自己一目了然。更好的定位到要查看的文件。
https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
open-in-browser
浏览器打开，这个插件虽然功能小，但还是挺方便的，你可以直接在编辑器中打开正在编辑的页面。这个插件的默认快捷键为：ctrl+alt+d，如果你觉得不是很符合自己的操作习惯，你也可以自己配置快捷键，至于怎么配置，后面会说到。
在实践的使用中却有点为难人，除了第一次打开是正确的文件外，后面你再按快捷打开的还是刚才打开的那个页面，而不是你当前正在编辑的页面。所以这个不推荐使用，也有可以是我电脑的问题，这个也不好说。重新安装了一遍问题依旧。
https://marketplace.visualstudio.com/items?itemName=coderfee.open-html-in-browser
如果你也像我一样遇到这样的问题，你可以试试下面这个同名的插件：
https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser
我用这个就可以了。
Auto Rename Tag
自动同步修改的标签名，做的事虽然很不起眼，但确确实实提高了编码效率。
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
HTML CSS Support
列出项目里所有能用的类名，这个插件也挺有用的。有时候当你只记得一个类的首字母或者前几个字母时，这个插件就非常地有用了，当你敲出第一个字母后这个插件就会自动把项目里（当前HTML 文件引用到的.css 文件）与此匹配的类全都列出来，还带有来自哪个 .css 文件的提示。
https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css
Settings Sync
同步设置。跨电脑时，可用于同步 Visual Studio Code 的配置，这样不管你用哪一台电脑 ，你不用重新配置 Visual Studio Code 直接安装这个 Setting Sync 插件同步下就可以了。
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
vscode-fileheader
这个插件可以为你在文件开头插件头信息，比如文件的作者，修改时间，有了这个插件你就不需要每次都码一次所谓的无用信息了。
这个插件的用法也好简单：快捷键为：ctrl+alt+i，的依次点开【开始】-【首选项】-【设置】，在用户配置文件中添加如下代码：
"fileheader.Author": "yunkus.com","fileheader.LastModifiedBy": "yunkus.com"
明人一看就知道上面的代码是什么意思了，在这里也不多说了，自己用心体会哈！
https://marketplace.visualstudio.com/items?itemName=mikey.vscode-fileheader
有了上面的基础后，我们就可以给插件来配置快捷键了。不管上面是什么插件，你都可以像下面这样配置快捷键。我们以 beautify 插件为例子：
依次点开【文件】-【首选项】-【键盘快捷方式】，此时你就可以看到两个窗口分别对应两个同名不同目录的 .json 文件（ keybindings.json），你可以在右边的窗口中编辑你自己的自定义快捷键。
// 将键绑定放入此文件中以覆盖默认值[{ "key": "ctrl+shift+alt+f", "command": "HookyQR.beautifyFile","when": "editorFocus" }]
这样就完成了 beautify 插件的快捷键设置。
依次点开【文件】-【首选项】-【设置】
{"workbench.iconTheme": "vscode-icons",// 保存时设置文件的格式。格式化程序必须可用，不能自动保存文件，并且不能关闭编辑器。"editor.formatOnSave": true,// 控制是否显示 minimap"editor.minimap.enabled": true}
最后两行是我自定义的配置，"editor.formatOnSave": true，保存时格式化（编辑器默认的格式化工具），"editor.minimap.enabled":
true，是否显示小图预览。用过 Sublime text 的都应该知道这个功能。
这个估计用得比较少，如是也不能说没有，在不可访问外网的公司里这种安装方式就不奏效了。下面我们来看看如何离线安装插件。
步骤一：访问插件
你可以在官网 https://marketplace.visualstudio.com/ 这里看到海量的插件。随便点击一个就可以进到插件的详情页了。在这里我们以 open-html-in-browser 这个插件为例，访问：https://marketplace.visualstudio.com/items?itemName=coderfee.open-html-in-browser 因为这个链接以这个链接里的页面有一些我们需要的信息。
步骤二：生成下载链接
https://${publisher}.gallery.vsassets.io/_apis/public/gallery/publisher/${publisher}/extension/${extension name}/${version}/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage
上面这个链接是一个通用的下载链接模板，你可以在它的基础上修改几个参数就可以实现下载对应的插件了。现丰我们就以 open-html-in-browser 插件的下载为例。
首先链接模板里有几个型如：$ {……} 的占位符，这些点位符就是需要修改的参数。
${publisher} 对应链接中 “itemName =” 后面的值 coderfee ；
${extension name} 对应的是插件名也就是链接中的 open-html-in-browser
${version} 对应插件的版本号，你可以从插件的详情页中查看到。
替换后的链接如下：
下载到本地的文件名为：Microsoft.VisualStudio.Services.VSIXPackage，完成了下载插件后，接下来就是如何安装它了。
步骤三：安装插件
修改文件的后缀名，把 Microsoft.VisualStudio.Services.VSIXPackage 重命名为 Microsoft.VisualStudio.Services.vsix。把这个文件放到一个目录中，比如在 E 盘目录下，然后运行cmd.exe 切换到这个目录，接着运行如下一行安装命令，稍等片刻你就会看到安装成功的提示了。
// 安装命令行E:\> code --install-extension Microsoft.VisualStudio.Services.vsix// 安装成功提示如下Extension 'Microsoft.VisualStudio.Services.vsix' was successfully installed!
送温暖
如果你觉得 win+R 打开cmd.exe，再切换到目标目录麻烦，那么你也可以直接在存放 Microsoft.VisualStudio.Services.vsix 文件的目录，按住Shift 键不放，接着点击鼠标右键，然后在弹出菜单中选中【在此处打开命令窗口】选项。此时你打开的命令窗口就已经自动切换到当前目录了。
到此 Visual Studio Code 离线安装插件就完成了。
首发于：云库前端（ http://yunkus.com ）有什么问题可以在这里或者到我的博客留言！