编码新利器——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文件,需要如下配置:

  1. 安装eslint-plugin-vue插件,在.eslintrc.js中引入vue插件
plugins:[
        'vue',
        'html'
    ],
  1. 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自动补齐。输入字母后,自动关联可能的属性等

支持Markdown预览

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容