值得一学，目前在我的团队内部已经大面积推广，反馈不错
vsc的宣传语是：
一个运行于MacOSX、Windows和Linux之上的，针对于编写现代Web和云应用的跨平台源代码编辑器。按它说的，vsc特别适合来作为前端开发编辑器。
当然，最nice的还是写js代码了，这也是我接下来要着重介绍的功能。
目前vsc已经开源了：
另外Linux还需要额外的
如果是mac系统，加简单的命令行
[sudo]npminstall-gcoden当前目录打开vsc编辑器
$vsc每次去桌面找快捷方式是非常傻的办法，终端里输入几个字母就可以搞定，又何必那么费劲呢？
键盘一定比鼠标操作快，你还是用鼠标么？土不土？
这个模块是nodejs写的，后面会讲
功能区1：4大主菜单
分别是文件夹，搜索，git和调试
功能区2：二级菜单
点击每个主菜单都会显示对应的二级菜单，比如Explore就是打开的目录，具体在后面讲解
功能区3：编辑区
我们最常用的编码区
功能区4：信息显示区
当前git信息，格式，字符编码等
master+0↓1↑点击此处，会弹出
gitcheckout输入git分支名切换分支,很贴心
语法校验，哪里出错，哪里有警告点击一下此处就都能看到，但不是完全准，算仅供参考吧
稍微点评一下，微软的界面做的还是下了功夫的，细节处理的不错
IntegratewithExternalToolsviaTasks
vsc还是支持各种task，Gulp,Grunt或Jake等
常见的各种编译，如markdown编译成html，sass编译成css，coffee或typescript编译成js等
当也有各种语法编码校验
这个菜单主要是对文件夹和文件的管理
这里有2个概念
DIR很好理解，就是你当前打开的文件夹
workingfiles是已打开的所有文件，如果此时点击右上角的分屏按钮，可以把文件放到对应的编辑区里。
打开文件夹在菜单里，快捷键command+o
常见的各种搜索都支持了，很强大
如果设置快捷键cmd+2，直接定位到搜索框，输入文字后，直接回车就是全文搜索
git是目前最常用的版本控制软件，推荐命令行操作，这样对原理理解的更深入，可以避免很多gui莫名其妙的问题
vsc对它进行了抽象，提供的功能，刚刚好够用
简单明了
下面给出一些git学习资料（如果熟悉，自动跳过）
要注意：vsc不提供创建git项目功能，所以需要先创建git项目，然后打开再用它编辑
为什么选用vsc，一个原因就是因为调试
vsc官方说
Weimprovedsteppingperformancebyloadingthescopesandvariablesofstackframeslazily.Thisimprovementisbasedonaprotocolchangethataffectsalldebugadapters.意思就是他们做了很多优化
使用中，确实比node-inspector快很多
vsc调试使用方法也很简单,步骤如下：
这是我们最常用的调试
通过创建express项目构建，调试来演示vsc的具体用法
使用express-generator
examplesgit:(master)expresshelloworldcreate:helloworldcreate:helloworld/package.jsoncreate:helloworld/app.jscreate:helloworld/publiccreate:helloworld/public/javascriptscreate:helloworld/public/imagescreate:helloworld/public/stylesheetscreate:helloworld/public/stylesheets/style.csscreate:helloworld/routescreate:helloworld/routes/index.jscreate:helloworld/routes/users.jscreate:helloworld/viewscreate:helloworld/views/index.jadecreate:helloworld/views/layout.jadecreate:helloworld/views/error.jadecreate:helloworld/bincreate:helloworld/bin/wwwinstalldependencies:$cdhelloworld&&npminstallruntheapp:$DEBUG=helloworld:*npmstartexamplesgit:(master)cdhelloworldhelloworldgit:(master)npminstallhelloworldgit:(master)npmstart测试express项目是正常的。
说明：如果是自己的项目，需要自己构建git版本控制的，faq里有具体说明。
输入command+t快速定位文件：.vscode/launch.json
修改launch.json的内容
"name":"Launchhelloworld","type":"node","program":"examples/helloworld/bin/www",program是要执行的express的入口。
这里的helloworld是项目，所以找到/bin/www目录即可。
会弹出一个窗口，执行如下命令
和chrome的调试是一样的。
点击1）处按钮，打开控制台，配合调试，在控制台里查看对应的变量值
另外值得说明的是二级菜单里4个部分
它和chrome的调试也是一样的，此处就不多讲了。
课后作业：亲手debug一次，感受一下vsc的魅力
因为之前微软推出了typescript语言，结合tsd文件，用visualstudio写typescript代码是相当爽的，智能提示的功能非常nb。
这个功能理所应当也被vsc继承了。
vsc的自动补全用的是typings。
TheTypeScriptDefinitionManager（之前的tsd已经弃用了，faq里有说明）
和npm很像，有木有？
那么就可以安装typings之后，使用
npminstalltypings--globalcdvsc-doctypingsinstalldt~node--global--savetypingsinstallexpress--ambient--save和npm很像，有木有？
此时看一下当前目录，下面的express.d.ts文件即是具体提示用的。
typings/express/express.d.ts在代码编辑区里，输入CTRL+SPACE(默认快捷键)就可以有提示了。
目前node.d.ts版本还是0.12.0，和nodev4的api差不了多少（最新的已经是4.x了）
上面是基本的操作，下面看点高效的使用：自定义快捷键
菜单view里找CommandPalette项
view->CommandPalette（调色板）对应的快捷键是shift+command+p
敲完后，输入tri
但是CTRL+SPACE在我的电脑里已经占用了，所以还是需要修改一下的，见下图
打开快捷键配置
修改如下
即把
//Placeyourkeybindingsinthisfiletooverwritethedefaults[{"key":"ctrl+space","command":"editor.action.triggerSuggest","when":"editorTextFocus"}]改成
//Placeyourkeybindingsinthisfiletooverwritethedefaults[{"key":"shift+space","command":"editor.action.triggerSuggest","when":"editorTextFocus"}]此时，就是输入SHIFT+SPACE就可以有提示了
说明：key就是快捷键，command是编辑器的操作
熟悉mac的都知道folder里的cmd+1|2|3|4切换文件夹显示，其实我们也可以使用类似的快捷键来提高工作效率
xcode里面也是，所以command键是我最常用的快捷键
推荐配置如下，按照顺序来，好记
{"key":"cmd+1","command":"workbench.view.explorer"},{"key":"cmd+2","command":"workbench.view.search"},{"key":"cmd+3","command":"workbench.view.git"},{"key":"cmd+4","command":"workbench.view.debug"}这样配置可以让大拇指最少移动，以大拇指为中心，快速切换，速度非常快
一个编辑区里，vsc是不缓存的，毕竟是js写的，相对较弱，这其实是vsc的一个优化
所以cmd+p打开了文件之后，之前的文件就找不到了
实际上都存到workingfiles里了，只要我们切换workingfiles即可
mac下ctrl+-和shift+ctrl+-切换当前workingfiles
还是很爽的
原理说明：我们可以看到2个配置文件，一个是不能修改的，另一个是空的，后面的会把前面的覆盖
//将defaults和options参数合并到{}varopts=$.extend({},$.fn.tab.defaults,options);把options里的覆盖$.fn.tab.defaults。
合并后的的配置项，再和{}合并，至少保证配置是{}
搜索
最新的1.0版本，右下角会有个提示创建jsconfig.json
jsconfog.json要和typings在同级目录
TODO:稍后不出
fnfn
待测
打开主题配置
选一个自己喜欢的主题吧
举个简单例子，在index.html里
输入link，然后tab键，就会生成下面的代码
写其他语言也有这样的神奇，见后面讲的codesnippets章节
在写node.js代码的时候，有时会忘记某个模块中有哪些方法及其用法，经常要去官网翻一下api文档。
这里介绍下怎么使用vsc来搞定这一问题。
过程如下图：
vsc是用atom-shell(现在叫electron)写的，这玩意和node-webkit（现在叫nw.js）一样，都是把node.js和chrome结合起来的工具，所以可以这么使用。
不过vsc使用到的node.js模块并不多，比如引用util和vm等会报错，用node-webkit就不会这样。
更好的查看api办法是使用docset查看文档，比如zeal或dash（后面会讲）
按照一般app的设计，都是主应用，和用户目录下的缓存文件，把用户自定义的或使用生成的文件都放到缓存文件目录里。鉴于此，我们来找找code.app的缓存文件，或许能发现点有用的东西
目录是/Users/sang/Library/ApplicationSupport/Code
Codepwd/Users/sang/Library/ApplicationSupport/CodeCodetree.-L2.├──DevToolsExtensions├──FileSystem│├──000│└──Origins├──GPUCache│├──data_0│├──data_1│├──data_2│├──data_3│└──index├──LocalStorage│├──chrome-devtools_devtools_0.localstorage│├──chrome-devtools_devtools_0.localstorage-journal│├──file__0.localstorage│└──file__0.localstorage-journal├──QuotaManager├──QuotaManager-journal├──User│├──keybindings.json│├──launch.json│└──snippets├──databases│├──Databases.db│└──Databases.db-journal└──storage.json8directories,17files这些文件我们能看懂的就尽量看，看不懂的也无所谓，如果想深度了解里面的机制，还是有必要看看的。
storage.json是code.app的核心配置文件，就像npm里的package.json一样。
看一下具体内容
Codecatstorage.json{"updateChannel":"stable","windowUIState":{"width":1280,"height":773,"mode":1,"x":0,"y":23},"openedPathsList":{"folders":[],"files":["/Users/sang/Library/ApplicationSupport/Code/User/snippets/javascript.json","/Users/sang/workspace/github/vsc-doc/typings/node/node.d.ts","/Users/sang/workspace/github/vsc-doc","/Users/sang/workspace/github/vsc/index.js","/Users/sang/workspace/moa/rate-cache","/Users/sang/workspace/aircos/aircos-plugins","/Users/sang/workspace/github/vsc","/Users/sang/test/go","/Users/sang/test/go/views"]},"theme":"vs","folderPickerWorkingDir":"/Users/sang/workspace/moa","lastActiveOpenedPath":"/Users/sang/workspace/github/vsc-doc"}%说明
为什么要了解它呢？
如果你理解了上面的配置起什么作用，那么你是不是可以干很多坏事儿呢？比如
剩下的自己发挥吧
上面的目录结构基本都可以看懂，对应当前用户来说
├──User│├──keybindings.json(用户自定义的快捷键)│├──launch.json(调试加载的文件)│└──snippets用户快捷键比如快捷键
CodecatUser/keybindings.json//Placeyourkeybindingsinthisfiletooverwritethedefaults[{"key":"ctrl+f12","command":"editor.action.goToDeclaration","when":"editorTextFocus"},{"key":"shift+space","command":"editor.action.triggerSuggest","when":"editorTextFocus"}]%是不是和我们之前配置的一样
User/launch.json和上面的是一样的，就不打印了。如果想每次都定义一下的话，可以自己修改，以后对当前用户就是全局的了
User/snippets是snippets存放位置，比如javascript的定义
见
User/snippets/javascript.jsonsnippets中文是代码片段，是自定义智能提示用的
自己按照上面的方法定义自己的snippets，可以提高很多工作效率哦
下面看一下如何在代码中使用snippet，如图
和vim、nodepad++里的录制宏类似
app的安装目录是/Applications/Visual\Studio\Code.app,右键showpackagecontent，然后一层一层的找里面的内容就可以了
/Applications/Visual\Studio\Code.app/Contents/Resources下面我们来看一下里面的内容
out是一个比较有趣的目录，所有代码都是混淆过的，但可以从其文件名和目录名称看出一些东西
outpwd/Applications/VisualStudioCode.app/Contents/Resources/app/outouttree.-L3.├──bootstrap.js└──vs├──base│├──browser│├──common│├──node│├──parts│└──worker├──css.js├──editor│├──browser│├──common│├──contrib│└──css├──languages│├──annotatedLanguage│├──csharp│├──css│├──handlebars│├──html│├──javascript│├──json│├──less│├──lib│├──markdown│├──php│├──plaintext│├──razor│├──sass│├──typescript│├──typescript.workbench│└──vsxml├──loader.js├──nls.js├──text.js└──workbench├──browser├──electron-browser├──electron-main├──parts├──services├──workbench.main.css├──workbench.main.js├──workbench.main.nls.js└──workbench.main.nls.keys.js36directories,9filesbootstrap.js是启动的脚本
默认支持的语言
vs/base/browser/ui/是界面里用的svg图，如果想自定义界面可以自行修改
vs/base/node/terminateProcess.sh写的不错
#!/bin/bashterminateTree(){forcpidin$(pgrep-P$1);doterminateTree$cpiddonekill-9$1>/dev/null2>&1}forpidin$*;doterminateTree$piddone/Applications/VisualStudioCode.app/Contents/Resources/app/out/vs/editor/css是编辑器vs-theme.css样式
/Applications/VisualStudioCode.app/Contents/Resources/app/out/vs/workbench/browser/css是workbench的vs-theme.css样式
看看它依赖的第三方开源模块
Node.js插件支持
也可以叫自动换行，一般建议是80
cmd+shift+p输入"语言"选择“配置语言”，进入修改。
todo
VSCode把NodeJS和Mono的调试功能抽象出来了，大家就可以通过自定义DebuggerAdapter和VSCodeDebugProtocol从而实现自己的调试器。现在VSCode插件中心里，Go、PHP、Python、Ruby的Debugger做的都比较成熟了
参见
如果你也想自己实现一个Debugger，可以参考
vsc其实不管你的git初始化的，只要你当前是git管理的，它的git部分才有用。
也就是说git需要自己处理。
比如
gitcheckout-bdev如果是已有分支就
gitcheckoutdev怎么让语法检查器支持es6的语法呢？要支持es6的话，需要在项目下建一个jsconfig.json，内容为
npminstalljsf-gjsf可以折叠代码了么？0.10.11之后都可以的
目前还没有，需要等
后缀名为“jsx",或者你把语言设为"javascriptreact"
在package.json的目录里
typingsinstallnode--ambient--save然后在app.js文件上增加注释，引用typings，然后就有代码提示了
YoucanalsohitCTRL+SPACEandgetintellisense.
如果是反复改后，还是不能提示（我是好使后，我删除了jscongfig.json，之后vsc就一直没有提示了，无论如何操作），请重启
官方说
npminstall-gyonpminstall-ggenerator-codeyocodemarkdownpreview
0.9+开始增加了markdown预览功能，试用了一下，还是非常不错得
上面的命令，可以翻译一下
即
command+\shift+command+v1.1.0(April2016)TheApril1.1.0releaseisourfirstmonthlyreleaseafterannouncing1.0.WehavebeenoverwhelmedbythepositiveresponsetothatreleaseandtheexcitementinthecommunityforVSCodeandtherapidlygrowingecosystemofnewlanguagesandextensions.
Hereisanoverviewofsomeoftheupdatescontainedinthisrelease:
主要改进点：
扩展作者会尤其喜欢这个版本，理由如下：
other
设置改进
LanguageServerProtocol
Version2.xofthelanguageserverprotocolwasreleasedtogetherwithacorrespondingclientlibrarytobeusedinextensionsandaserverlibraryforNode.js.
Themajorchangesare:
支持tab了，当前打开的tab编辑，option+command+tab。另外一大变更就是增加插件，1级左侧变成了5大功能。
vsc和其他编辑器（sublimetext,atom,webstorm等）相比，某些方面还存在很多问题。对于一个前端工程师来说，它已经足够好了。
推荐使用~
IntelligentandsuperfasttestrunnerforJavaScript/TypeScript/CoffeeScript.