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操作。
然后在右上角打开菜单,执行push操作,或者撤销本次提交,以及其他操作。
双击修改的文件,会自动进行差异对比。如下图
集成ESLint
ESLint需要自己安装,安装过程如下:
- 安装ESLint环境。首先安装node.js,然后执行npm install -g eslint安装eslint。
- 安装vsc的eslint插件。点击左侧菜单最后一项,进入插件安装界面。选择 ESLint点击安装,安装后变成设置按钮。
安装完成后,按照提示重启VSC。再次打开后在底部信息框的“问题”标签页里就能看到ESLint检查的结果了。同时在有问题的代码,以及右侧滚动条上也会有错误位置提示。如下图。
注意,代理设置方法如下:
文件——>首选项——>设置。在右侧配置里增加如下设置
"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里的参数进行配置。主要是配置下路径和启动文件名,配置完成后再次点击启动即可。如下图
调试的界面与Chrome dev tool类似,这里就不多介绍了,如下图。
内嵌终端控制器
在底部的信息框里选择“终端”选项卡,就能看到命令行界面了,调入命令执行即可,免去了频繁的切换窗口。如下图:
代码跳转
选中代码,右键,选择跳转
代码格式化
右键,选择跳转
html、css自动填充
同sublime功能类似,输入标签后按下tab自动补齐。输入字母后,自动关联可能的属性等