Visual Studio Code 开源免费跨平台代码编辑器

参考教程1：https://blog.csdn.net/chinahuyong/article/details/46480995

Visual Studio Code

在 Build 2015 大会上，微软宣布推出免费跨平台的 Visual Studio Code 编辑器！

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作……

相信很多程序员同学都没想过有一天能在不用虚拟机的情况下直接在 Mac、Linux 上使用 VisualStudio 吧。当然，微软称 Visual Studio Code 并非完整版的 Visual Studio，它只是一款轻量级的代码编辑器，而不是一个重量级的完整 IDE (集成开发环境)，它的竞争对手将会是 Sublime Text、Atom、VIM、Notepad++ 等产品。

当你开始阅读这篇文章时，请先不要把Visual Studio Code和.net、Windows联想到一起，因为VS Code是一个跨平台，支持30多种语言的开箱代码编辑器。不管你是.Net、Java、PHP、Python、TypeScript、Objective-C…还是前端开发者，你都值得拥有。下面，让我们来看一看Visual Studio Code 这个神器吧~

Visual Studio Code的下载和安装

Visual Studio Code最新版下载地址，https://code.visualstudio.com 根据你的电脑平台选择版本下载。

认识Visual Studio Code 界面

Visual Studio Code 基本布局 如图：

工具栏简介

1.资源管理器
下面来看一下右边的工具栏，资源管理器就不用多说了很简单，只是这里有个功能值得注意一下，如图：

在文件上面点击鼠标右键，有个Copy Path，可以复制文件的物理路径。当然，你会想为什么不是打开文件位置啊，其实这个功能已经有了，就是Reveal in Explorer。

2、搜索
按下Ctrl + Shit + F的时候，会激活这个工具栏的搜索功能，没错，这个功能就是类似Visual Studio中的全局搜索功能，如图：

3、Git版本控制
这个功能，用过Git大家都清楚，Git的初始化必须在一个空的文件夹里面，所以要使用这个功能，也是要先有一个文件夹的，下面我们来看看怎么操作，如图：

右键文件夹都可以直接打开，打开后，我们继续看，如图：

到了这里，很明显了，点击那个Initialize git repository按钮，初始化Git仓库。然后，我们新建一个文件，名字为index.html,保存到这个文件夹下。接下来，注意啦，注意啦，我们要输入以下内容，如图：

如果你还一行一行的敲，那就太low了，这里先交给大家一个方法，在空白的文档里面输入一个感叹号！，注意是英文的哦，然后，点击Tab键，看看发生了什么，是不是duang的以下就出来了~~

然后，我们按Ctrl + S保存文件，再来看Git这个工具栏的变化，如图：
　　
　　我们看到了，changes里面出现了index.html,然后，我们输入commit message，点击上面的对勾提交，然后，我们会看到changes下面的文件都消失了，并且右边的1变成了0。

点击那个…按钮，会弹出菜单，这里有更多的Git的操作，我就不一一介绍了，相信使用过Git的都看的懂的！

4、调试

Visual Studio Code上手体验

VS Code支持多种语言，我们先来看一下官方的说明：

这里大概说的是对CSS, HTML, JavaScript, JSON, Less, Sass几种语言有智能提示，其他的语言都是语法高亮和重构。就是说你写C#、Java等一些代码都是没有智能提示的，但是都会有语法高亮。这些代码查看，大家可以打开一些相关的代码文件看看，我就不一一演示了。

1、文件类型

下面我们来看看VS Code编写代码是否顺手，点击菜单新建文件或者使用快捷键Ctrl + N，这个时候会新建一个Untiled-1的文件，默认为文本文件，不高亮和提示任何代码，这个时候我们可以通过保存文件来改变文件类型，或者直接告诉Vs Code文件类型，如图：

点击Plain Text，然后在弹出的输入框输入你想要的语言就好了。或者我们使用快捷键，Ctrl + Shift + P，打开命令输入框，输入language，如图：

选择第一个Change Language Mode,也可以打开这个语言选择框。

这里首先要说的是VS Code对html的支持，当然Vs Code对html支持是非常好的，上面我们已经看到了，输入一个感叹号，然后按下tab键就一下子完成了html5文档的基本结构。其实，这是VS Code里面添加了Emmet snippet expansion，官方文档地址http://docs.emmet.io/cheat-sheet/，我们大概来看一下：
　　
　　看到了吧，第一个就是我们上面使用的，同理如果我们输入标签，我们只要输入a，然后按tab键就可以了。这里就不再多说了，就留给大家去好好探索了~

另外，VS Code也支持Html5和AngularJs的智能提示，可以说是前端神器啊~~哈哈，目前我知道的也只有VS2015支持AngularJS的智能提示了。

2、文件编码
　　
文件编码当然是很重要的，有时候我们要查看和修改文件编码，在介绍VS Code的时候，已经告诉大家，在哪里显示文件的编码了，下面我们来说一下如何修改文件编码，还是Ctrl + Shift + P打开命令面板，输入encoding,如图：

选择以后，会出现如下选项：

我们可以根据需要选择，这里我们选择保存的编码格式，如图：

3、MarkDown
还有一个比较让人喜欢的一点就是VS Code也支持markdown的书写和预览，下面我们看一下：

　如果要预览的话，要先保存文件，然后按下快捷键Ctrl + Shift + V,就可以预览了。如图：
　
4、文件的切换
当我们编写多个文档时，经常需要在多个文件直接切换，用鼠标点击来切换是一个很奢侈的做法，我们通常都喜欢用快捷键。在Vs Code中，我们可以用Ctrl + Tab键来快速的切换文件，如图：

按住Ctrl键不要松，不断的按下Tab键来切换选择文件。当然，这只适用于比较少的文件时，文件多了，这样就不好用了。

文件多的时候，我们可以使用Ctrl + p快捷键，打开和上面一样的输入框，不过这个时候我们可以输入内容来搜索文件，然后选择打开。如图：

5、支持打开一个文件夹
当我们编辑一个项目中的文件时，同时打开一个文件夹可是非常爽的功能，其他很多文本编辑器都不具备这样的特色。

总结

由于篇幅的关系，关于VS Code就先介绍到这里了，下面来简单的总结一下Vs Code的有点：

1、支持30多种常用语言的语法高亮，并对html、js、css、Angular等很好的语法支持，并且还支持MarkDown的预览！

2、体积小，功能强大，当然性能也是很好的，打开超大型的文本文件也不会卡死，大家可以和其他的一些文本编辑器对比一下。

3、支持命令操作(Ctrl + Shift + P)和鼠标操作，还有大量的快捷键，可以适应各种开发者的操作习惯。

4、支持Git版本控制器，可以完成创建分支、解决冲突、提交修改等操作；

5、强大的搜索功能，并且支持多文件搜索；

6、最大的有点，当然是跨平台、免费;