编码新利器——Visual Studio Code

VSC简介

Microsoft在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code项目：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作……

下面简单介绍下个人认为比较酸爽的特性：

集成Git

VSC默认集成了git。打开git项目根目录后，VSC自动会扫描git相关设置，并且默认定时更新代码，扫描状态。如下图，左侧菜单选择git，就能看到变更的文件信息（包括新建，修改，删除）。在信息输入框里输入注释信息，执行Ctrl+Enter，即可完成 git add . 和git commit操作。

git1png.jpg

然后在右上角打开菜单，执行push操作,或者撤销本次提交，以及其他操作。
双击修改的文件，会自动进行差异对比。如下图

git3.jpg

集成ESLint

ESLint需要自己安装，安装过程如下：

安装ESLint环境。首先安装node.js，然后执行npm install -g eslint安装eslint。
安装vsc的eslint插件。点击左侧菜单最后一项，进入插件安装界面。选择 ESLint点击安装，安装后变成设置按钮。

plugin.jpg

安装完成后，按照提示重启VSC。再次打开后在底部信息框的“问题”标签页里就能看到ESLint检查的结果了。同时在有问题的代码，以及右侧滚动条上也会有错误位置提示。如下图。

eslint.jpg

注意，代理设置方法如下：
文件——>首选项——>设置。在右侧配置里增加如下设置
"http.proxy": "http://proxy.my.com.cn:80",
"https.proxy": "https://proxy.my.com.cn:80",
"http.proxyStrictSSL": false,

Vue文件支持

如果需要检查.vue文件，需要如下配置：

安装eslint-plugin-vue插件，在.eslintrc.js中引入vue插件

plugins:[
        'vue'，
        'html'
    ],

VS Code的用户配置中增加如下配置

"eslint.validate": [
        "javascript",
        "javascriptreact",
        {
             "language": "vue",
            "autoFix": true
        }，
        {
            "language": "html",
            "autoFix": true
        },
    ]

自动修复

在VS Code的用户配置中增加如下配置，即可实现保存时自动修复部分lint错误

"eslint.autoFixOnSave": true

支持Node.js调试

打开Node.js项目，左侧菜单选择调试功能。点击顶部的启动调试按钮。第一次调试时，会弹出配置页面。对配置文件launch.json里的参数进行配置。主要是配置下路径和启动文件名，配置完成后再次点击启动即可。如下图

debug1.jpg

调试的界面与Chrome dev tool类似，这里就不多介绍了，如下图。

debug2.jpg

内嵌终端控制器

在底部的信息框里选择“终端”选项卡，就能看到命令行界面了，调入命令执行即可，免去了频繁的切换窗口。如下图：

cmd.jpg

代码跳转

选中代码，右键，选择跳转

代码格式化

右键，选择跳转

html、css自动填充

同sublime功能类似，输入标签后按下tab自动补齐。输入字母后，自动关联可能的属性等