博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用Visual Studio Code写Node和调试代码
阅读量:7035 次
发布时间:2019-06-28

本文共 1166 字,大约阅读时间需要 3 分钟。

介绍

vsc的宣传语是:

一个运行于 Mac OS XWindowsLinux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。

按它说的,vsc特别适合来作为前端开发编辑器。

内置html开发神器emmet(zencoding),对css及其相关编译型语言LessSass都有很好的支持。

当然,最nice的还是写js代码了,这也是我接下来要着重介绍的功能。

智能提示

因为之前微软推出了语言,结合tsd文件,用visual studiotypescript代码是相当爽的,智能提示的功能非常nb

这个功能理所应当也被vsc继承了。

目前主流的前端类库/框架,包括node.js及其模块/框架都有相应的tsd文件,可以去上找一下。

在项目中引入对应文件,就可以有智能提示了。

这里以angular为例,使用步骤如下:

  1. 全局安装tsd,通过tsd安装.d.ts文件。这样会在项目下面生成.typings目录,目录下面就是下载的.d.ts文件,再写代码的时候就会有智能提示了。具体用法参考。
npm install -g tsdtsd query angular --action install
  1. 如果不想自己手工引入,也可以在angular变量后面按ctrl+k,会有个灯泡图片,点击灯泡图片就会有对应提示,选择下载xx.d.ts文件就可以了,编辑器会下载对应文件放在.typings目录。

过程如下图:

图片描述

再来个node.js的:

图片描述

说完智能提示,再说代码调试。

调试Node

之前写过文章介绍过node.js的调试方案()。从vsc发布后,我就一直用它写代码,也是用它来调试node.js代码。

使用方法也很简单,步骤如下:

  1. 打开要调试的文件,按f5,编辑器会生成一个launch.json
  2. 修改launch.json相关内容,主要是nameprogram字段,改成和你项目对应的
  3. 点击编辑器左侧长得像蜘蛛的那个按钮
  4. 点击左上角DEBUG后面的按钮,启动调试
  5. 打断点,尽情调试

过程如下图: 图片描述

最后,再赠送彩蛋一个。

Node API 查看

在写node.js代码的时候,有时会忘记某个模块中有哪些方法及其用法,经常要去官网翻一下api文档。

这里介绍下怎么使用vsc来搞定这一问题。

  1. 打开vsc控制台(Help > Toggle Developer Tools > Console
  2. 在控制台写代码,查询模块方法。

过程如下图: 图片描述

vsc是用atom-shell(现在叫)写的,这玩意和node-webkit(现在叫)一样,都是把node.jschrome结合起来的工具,所以可以这么使用。

不过vsc使用到的node.js模块并不多,比如引用utilvm等会报错,用node-webkit就不会这样。

转载地址:http://hunal.baihongyu.com/

你可能感兴趣的文章
JavaScript 设计模式之工厂模式
查看>>
shell介绍
查看>>
五周第四次课(11月16日) 8.6 管道符和作业控制 8.7/8.8 shell变量 8.9 环境变量配置文件...
查看>>
移动端web开发click touch tap区别
查看>>
11.20 正则介绍 , grep
查看>>
你的数据化经营为何屡战屡败,118位CTO给出的7个管理经验
查看>>
未来酒店——建设高效研发团队的经验分享
查看>>
LVS NAT模式搭建
查看>>
安装PHP5,安装PHP7
查看>>
yum更换国内源,yum下载rpm包和源码包的安装
查看>>
rpm包介绍 rpm工具用法 yum工具用法
查看>>
iOS 10 的推送 User Notifications Framework
查看>>
技术工坊|区块链中的p2p网络(上海)
查看>>
df命令、du命令、磁盘分区
查看>>
面试题:
查看>>
JVM Garbage First(G1) 垃圾收集器
查看>>
Spring Cloud构建微服务架构分布式配置中心
查看>>
Map集合
查看>>
Java干货分析:学习JVM须知的四大知识要点
查看>>
Qt5开发及实例学习之位置函数
查看>>