之前一直都是用sublime Text和chrome配合来写前端的页面，自从知道了有liveReload这个神奇的插件之后感觉爽翻了啊。好吧跑远了........
话说最近微软搞了个VScode，听说好像很牛逼的样子，通过扩展通杀各种语言，就冲着信仰去了解了下这个神奇的编辑器到底肿么样。
下载安装还是很傻瓜的，直接官网下载安装包https://code.visualstudio.com/，傻瓜安装（嗯我的是windows，mac或者linux请参照官网的指示安装）。
安装完后VScode自带了emmet和一些sublime里面常见的插件，不扯了，说正事。
debugger for chrome绝对是前端开发少不了的插件，它可以直接在VScode上调试JavaScript程序（其实我觉得chrome的开发者工具已经很好使了，这个无非就是更装逼一点而已）。
Ctrl+P 然后输入
ext install debugger-for-chrome
安装完后会弹出一个lunch.json配置文件
{ "version": "0.2.0", "configurations": [ { "name": "Launch flex.html", "type": "chrome", "request": "launch", "file": "${workspaceRoot}/flex.html" }, { "name": "Launch Chrome against localhost, with sourcemaps", "type": "chrome", "request": "launch", "url": "http://localhost:8080/flex.html", "sourceMaps": true, "webRoot": "${workspaceRoot}" }, { "name": "Attach to Chrome, with sourcemaps", "type": "chrome", "request": "attach", "port": 9222, "sourceMaps": true, "webRoot": "${workspaceRoot}" } ] }
name属性就是在启动旁边那里显示可选择调试方式的名称，随便写只要能记住就行，根据配置的类型一共有3中不同的调试方式
最简单的就是第一种不需要服务器的直接lunch打开本地文件，千万要记得file的路径一定要写成${workspaceRoot}/xxx.html，不要写完整的路径，否则VScode是找不到外部的JavaScript文件的，最明显的就是文件在chrome打开了，回到js文件打断点的时候就会提示Breakpoint ignored because target path not found。
第二种是需要自己搞一个服务器容器比如Apache，比较VScode没那么聪明，它才不会自己给你建一个临时服务器，我直接用node的http-server插件，反正不是开发什么大型网站.......这种方式适合有后台数据交互的调试。
第三种attach模式是用chrome的远程调试API，我还没试过，官方给的方法是
- Right click the Chrome shortcut, and select properties
- In the "target" field, append
--remote-debugging-port=9222 - Or in a command prompt, execute
<path to chrome>/chrome.exe --remote-debugging-port=9222
在chrome浏览器快捷方式后面加上--remote-debugging-port=9222然后双击启动，或者直接命令行输入chrome的地址加上--remote-debugging-port=9222参数启动。嘛.....这个我待会再去研究研究怎么弄。
接下来说说live HTML previewer这个插件，本来我是想找找有没有liveReload插件的，结果没找到，live HTML previewer有点像dreamwaver里面的拆分模式，就是直接在VScode里面预览html页面，这对于初期写静态页面的布局还是很方便的，点击左边最下面那个扩展，然后输入live HTML previewer安装就行，启动方式是按F1在输入Show side preview或者直接按Ctrl+Q，接着按下S。实测这个预览的渲染好像跟chrome有点不太一样，慎用。
嗯，顺便说一下还有ESlint这种js语法检查工具，Path Intellisense智能路径提示等一些比较好用的扩展工具