使用vs code开发Nodejs程序的使用方法


Posted in NodeJs onSeptember 21, 2017

最近再研究nodejs,苦苦再选一款轻量级的编辑器,由于本人一直从事.net开发,虽然微软推出了Visual Studio 开发node js的插件,而且用着也不错,但是总感觉这个编辑器体量太大(一装就是几个G)!webstore是目前最受欢迎的Nodejs开发IDE之一。受欢迎的原因,当然是对于Nodejs IDE的集成开发环境,集项目创建、编辑、调试于一体,简单的配置,强大的智能提示。因为前面说过我一直做.net开发,刚好微软在2016年推出了vs code 一款轻量级的文本编辑器,可以编写各种语言的程序并进行调试,为了熟悉这款编辑器方便后续的开发,所以这次选用了vs code作为这次开发的编辑器(尽管VScode看起来更像是Uedit、Noteplus等强大文件编辑器,但它也提供了可扩展的、强大的提示功能(特别是文件间js引用提示),以及内置Nodejs调试功能,让它有别于一般的编辑工具。)!当然也跟微软未来的战略有关!

本文的前提是你已经安装了vs code代码编辑器和nodejs环境,如果没有安装,请自行下载安装!

 一、使用Express创建项目[这两步都在dos 模式下执行]

1,安装全局的Express!(已安装请忽略)

npm install -g express

2,创建项目

创建项目(创建文件夹名称ExpressApp)

express ExpressApp

小插曲:如果你习惯了Linux下的环境,你可以在自己电脑上安装cmder(不知道是什么东西,请自行百度),这个命令行工具排版漂亮,不像微软的dos 那么枯燥!我用的是Mini版本,如果你想体验linux下的全部功能,可以下载full版本。

3,下载第三方包

(1)cmd命令行切换到项目目录

cd d:\nodejs\ExpressApp

(2)根据需要编辑package.json,运行如下指令安装第三方包

npm install

在项目目录下node_modules可见安装好的第三方包

ExpressApp
|? node_modules

(3)运行项目

npm start

输出如下:

ExpressApp@0.0.0 start d:\Nodejs_Workspace\ExpressApp
node ./bin/www
注:npm start指令会自动执行node ./bin/www

在浏览器中输入http://localhost:3000,可访问Express欢迎页面

二、使用VSCode开发Nodejs

1、VSCode打开Nodejs

code d:\nodejs\ExpressApp 
code.

注:在当前项目下创建ExpressApp.bat,输入“code .”即可,下次直接此文件直接使用VSCode打开Nodejs项目

2、添加智能提示

VSCode打开Nodejs项目,默认是没有智能提示。

(1)使用TypeScript Definition Manager(TSD)在项目中下载所需的tsd文件,VSCode中打开时有智能
全局安装tsd(如已安装忽略)

npm install -g tsd

下载所需的组件提示(以下载node、express、requirejs提示为例)

tsd query node --action install
tsd query express --action install
tsd install require

注:

①多个提示组件在query参数后可以空格分隔简写为tsd query node express ?action install

②组件会项目目录下添加typings文件夹

|? typings
|? node
|? express
|? require

(2)添加js文件引用的智能提示

假如在文件引用另外一个文件common.js时,文件头添加如下

{
  // See https://go.microsoft.com/fwlink/?LinkId=759670
  // for the documentation about the jsconfig.json format
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "node_modules",
    "bower_components",
    "jspm_packages",
    "tmp",
    "temp"
  ]
}

(小提示,如果你引入了rquire,那么你的编辑器右下方会显示一个“灯泡”的提示,你只要点灯泡就不用自己苦逼的写这个配置文件了)

此配置表示代码服从ES5标准并使用commonjs规范,发VScode下有此配置之后,可以实现在文件中对require引用js文件的智能提示。(我测试时无此配置也会有智能提示,不清楚什么原因)

三、调试

1、创建VSCode调度配置文件

点击调试面板,并点击运行(F5)按钮时,右侧出现下拉框,选择“Node.js”

然后会在项目目录下创建launch.json文件

ExpressAppp
|?.vscode
|? launch.json

可根据需要编辑launch.json,修改启动配置项

2、创建断点:

根据需要创建断点:在js文件编辑区域左侧,会添加/移除断点

3、调度

在调试面板上点击运行或按快捷键F5,单步调试按F10就可以了!

其实这些在微软的官方文档里面有,打算有的小细节或者步骤会被开发者无形无视,这样会给后期开发造成一定的影响,所以请大家严格按照配置需求进行配置!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
nodejs npm包管理的配置方法及常用命令介绍
Jun 05 NodeJs
基于promise.js实现nodejs的promises库
Jul 06 NodeJs
nodejs教程之制作一个简单的文章发布系统
Nov 21 NodeJs
轻松创建nodejs服务器(10):处理POST请求
Dec 18 NodeJs
NodeJs——入门必看攻略
Jun 27 NodeJs
nodejs入门教程三:调用内部和外部方法示例
Apr 24 NodeJs
nodejs之get/post请求的几种方式小结
Jul 26 NodeJs
详解nodejs通过代理(proxy)发送http请求(request)
Sep 22 NodeJs
nodejs实现简单的gulp打包
Dec 21 NodeJs
nodeJs实现基于连接池连接mysql的方法示例
Feb 10 NodeJs
详解Nodejs mongoose
Jun 10 NodeJs
Nodejs Express 通过log4js写日志到Logstash(ELK)
Aug 30 NodeJs
详解使用vscode+es6写nodejs服务端调试配置
Sep 21 #NodeJs
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
Sep 19 #NodeJs
Nodejs中使用phantom将html转为pdf或图片格式的方法
Sep 18 #NodeJs
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
Sep 18 #NodeJs
Nodejs+express+ejs简单使用实例代码
Sep 18 #NodeJs
详解nodejs中express搭建权限管理系统
Sep 15 #NodeJs
nodejs socket服务端和客户端简单通信功能
Sep 14 #NodeJs
You might like
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
深入array multisort排序原理的详解
2013/06/18 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
深入解析Python中的上下文管理器
2016/06/28 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
环保倡议书怎么写
2014/05/16 职场文书
2014年大学生工作总结
2014/11/20 职场文书
2014年纪委工作总结
2014/12/05 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
mysql 获取时间方式
2022/03/20 MySQL
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫