上完了设计课，又进入前端第一阶段课程，以前用的DW，想着更新成最新版的CC 2018，毕竟新版的flex布局，ES6支持，bootstrap支持还是挺诱人的。

可惜下载了破解版始终安装不上，烦人的很，又想起了上次没有安装成功的vscode，听说很好用，微软的良心之作，想着都要折腾，还不如折腾这个vscode呢。

安装了几次vscode，每次一打开软件就报错，说the window is no longer responding窗口无响应，问了几个朋友，都说没有碰到过这种情况，于是干脆重装系统，换了一个新的win7系统，安装后软件立马跑起来了。看来重装系统还真不是一个锅。

软件体积小，开源免费，自主性强，可以根据需要自行配置语言和插件，运行流畅快捷，比起每次找DW的破解版，和动不动1个G以上的体量，还是觉得vscode有很多值得安利的点。

1、界面很好看，可以自选主题。

我试了好几个，最后还是觉得默认的深黑就挺好。

2、可以导入你以前常用的软件的快捷键，比如sublime、Atom等的。

常用快捷键：

打开命令行：ctrl+shift+P

打开文件：ctrl+P，利用↓箭头和→箭头，可以打开多个文件。

全部保存文件：ctrl+K S（按了ctrl+K后再按一下S）

关闭文件：ctrl+W

关闭全部文件：ctrl+K W

切换行注释：ctrl+/

切换块注释：shift+Alt+A

向上复制行：shift+Alt+↑

向下复制行：shift+Alt+↓

移动到上行：Alt+↑

移动到下行：Alt+↓

向下选择行：shift+↓

向上选择行：shift+↑

扩大选择范围：shift+Alt+→

逐步扩大选择范围：shift+→

缩小选择范围：shift+Alt+←

逐步缩小选择范围：shift+←

展开代码：ctrl+shift+]

展开全部代码：ctrl+K ctrl+J

折叠代码：ctrl+shift+[

折叠全部代码：ctrl+K ctrl+0

折叠块注释：ctrl+K ctrl+/

打开快捷键文件：ctrl+K S

感觉和以前的DW的快捷键还是差别有点大。

3、根据自己的需要安装语言或者框架。

想要C++，JavaScript，都可以自己安装，想要Vue框架，自己安装，所以可以随心所欲啊。这也是软件本身轻便，但是不要贪多，安装用不上的语言造成体积臃肿了。

4、常用插件安装

刚开始用的时候，如何把html发布到浏览器中都不知道，百度了才明白需要安装一些常用插件。

比如第一个就是：Open HTML in Default Browser

这样点击右键的时候就有“在浏览器中打开”的命令了。

常用插件还有：

Chinese (Simplified) Language Pack for Visual Studio Code ： 本地汉化成简体中文版，中国人的福音啊

Auto Rename Tag ：改开始标签，自动修改结束标签

CSS Peek ：  选择id，class名称，可以转到对应的样式，只对外部样式表有用

minify：压缩css，js，html成min文件

Color Info：可以显示颜色的各种值，比如RGB，HSB，十六进制等信息。

应用商店就是一个宝库，有好多各种插件供你选择，刚开始用，以后再慢慢挖掘。

5、Emmet缩写

通过设置CSS形式的能够动态被解析的表达式，根据你所输入的缩写来得到相应的内容。

Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员。

以前用DW的时候，要用此插件，需要安装，而且Adobe的产品安装插件，有一个专门的extension manager软件来管理各个软件的插件，比如DW，PS，反正麻烦的一匹。

而vscode是默认内置了该插件的，是不是太贴心。

Emmet插件到底有啥好呢，比如你输入！，再按一下tab，html文档标准结构就输入了。

输入div.box，就显示<div class="box"></div>，输入ul>li*3，就显示有3个li的ul列表。

具体文档可以看官方的：

https://docs.emmet.io/

如果看不懂英文版的，还有翻译过来的中文版：

https://www.w3cplus.com/tools/emmet-cheat-sheet.html

我也是新用，还有好多功能有待发掘中。不过从它的开源和对各种编译语言的支持来看，比如对php，java等的支持，就说明微软已经不再那么垄断和封闭，这是一个好事情。