微软目前的开放程度也是很高了，大力的开源了，所以今天就来介绍一款来自微软出品的跨平台轻量级的代码编辑器(不是IDE，简称vscode)。官网的介绍Code editing.Redefined.Free. Open source. Runs everywhere.(重新定义代码编辑，免费，开放源码，运行于任何平台。)。此外该款编辑器还集成了一些常用的插件，详细见下面的介绍。
首先介绍一下IDE和编辑器的区别：
相同点
- 都可以用来编写各种语言的代码，大部分也都支持一些插件或者扩展
不同点
- 编辑器的功能相对来说比较弱，所以占用空间或者内存就小，大部分以文件夹为工作基本单元
- IDE相对来说比编辑器功能要强，比如同是微软出品的visual studio功能相当强大，但是占用空间或者内存，以项目为基本单元
- 对于基本单元简单点说就是编辑器一次只能打开一个文件夹下的文件，不同同时打开两个不同文件夹，IDE则相反，能同时打开多个文件夹下的文件
下载安装
关于下载大家可以自行搜索，也可以到官网去下载，下载时大家注意要结合自己的平台来下载相应的版本。这里以windows为例讲解。
安装其实很简单就是windows软件的常规安装即可。
配置
从官网下载并安装的基本上安装好后菜单都是中文的了，首先介绍几个基本的配置。
主题配置
在菜单栏上依次选择文件、首选项、颜色主题，这时会弹出一个选择的列表，可以利用上下键来选择对应的主题可以实时预览，初次安装可能就只有几个内置的主题，想要安装其他的主题首先需要去官网主题库，寻找自己想要的主题介绍页面有安装的步骤(就是installation下面的代码复制，然后快捷键(Ctrl+P),将复制的代码粘贴并按enter即可)，或者复制主题的名称到编辑器的左边栏点击最后一个扩展图标搜索并安装。
编辑器常规配置
vscode的配置都是以json格式来配置的，首先在菜单栏上依次选择文件、首选项、设置就会弹出配置的两个文件，一个是默认的配置文件(不允许修改)，另一个是用户自定义的配置文件，左边有很多设置下，每个设置项都是分类展示的，比如常用设置、编辑器等等，还包括一些扩展的设置都是在这里进行配置的，右边则是用户自定义的配置了，这里要特别说明的是所有的这些配置都是以json格式来处理的，所以在修改的时候需要严格按照json格式来书写才可以，其实也很简单就是加上双引号就可以了。这里的配置都是大同小异的，可能最主要是的英文的不知道是配置什么的，这里介绍几个重要的配置项，其他的大家可以自己尝试。
{
// 这个是编辑器的文件字体大小
"editor.fontSize": 20,
// 控制文字换行，on表示在可视区换行，以前的版本是设置editor.wordWrapColumn的值为0
"editor.wordWrap": "on",
// 光标的显示动画样式
"editor.cursorBlinking": "expand"
}扩展
vscode自带有一些扩展，官方也有很多开发者提供的各种扩展，大家可以根据自己的需要去下载相应的扩展。去下载扩展
扩展安装
- vscode安装扩展比sublime要简单多了，只要知道扩展名称直接在扩展面板中搜索安装即可，操作起来还是非常方便的，如果不知道扩展名称的话，编辑器还提供了几个快捷的选项：显示推荐的扩展，显示常用的扩展，这里可以看到自己安装了那些扩展以及对扩展的卸载等等功能。
- 还有一种安装方法就是在扩展的官网复制命令来安装，在上面介绍的扩展官网中找到自己想要的扩展复制命令，然后在编辑器中快捷键Ctrl+P来粘贴enter的方式来安装即可(目前我的编辑器中方式不行，提示没有匹配的命令)，需要粘贴到第一种方法的搜索框中才可以。
扩展使用
安装扩展之后就是使用了，每个扩展的使用方法不一样(具体可以查看相应插件的说明文档)，但思路是一样的，这里以emmet为例，配置好emmet后又快捷键的方式，需要扩展代码就是用tab键即可，这里介绍几个不常用到的方法。场景，有很多文字需要使用a标签来包裹，这时我们可以使用emmet的wrapp with abbreviation来扩展代码，将文字竖着排列好后选中使用Ctrl+Shift+P呼出命令窗口输入wrap选择wrapp with abbreviation，然后输入ul>li*>a即可完成。
有很多扩展的使用都是通过命令来配合使用的，所以大家要记得经常使用Ctrl+Shift+P快捷键，就能使用很多扩展的功能了。
扩展推荐
emmet
作为前端开发人员来说应该是特别熟悉这个插件了，它的前生就是zencoding，它可以快速的帮助开发者构建用户界面，所以作为前端开发人员来说这是必不可少的插件，好在vscode好像已经内置了这个插件，如果没有内置大家也可以自行安装emmet这个插件
AutoFileName
这个插件能够帮助开发者输入资源路径，有时可能不记得图片的目录是images还是imgs时可以使用这个插件来自动补齐文件路径，类似自动补齐的还有Auto Close Tag(自动完成关闭标签)、Auto Rename Tag(自动完成重命名标签)
View In Browser
在左侧的文件的右键菜单上会多出一个view in browser的菜单能够快速的在浏览器中浏览该文件
各种语言的snippets
还可以安装各种语言的代码片段来帮助开发者提示输入，也可以自定义代码片段，文件、首选项、用户代码片段，里面有例子大家可以根据自己的需要来定义自己的代码片段。
