使用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 相关文章推荐
抛弃Nginx使用nodejs做反向代理服务器
Jul 17 NodeJs
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
Jan 01 NodeJs
NodeJS Web应用监听sock文件实例
Feb 18 NodeJs
初识NodeJS服务端开发入门(Express+MySQL)
Apr 07 NodeJs
nodejs个人博客开发第一步 准备工作
Apr 12 NodeJs
nodejs制作爬虫实现批量下载图片
May 19 NodeJs
nodejs实现爬取网站图片功能
Dec 14 NodeJs
详解NODEJS的http实现
Jan 04 NodeJs
nodejs简单访问及操作mysql数据库的方法示例
Mar 15 NodeJs
NodeJS安装图文教程
Apr 19 NodeJs
NodeJS如何实现同步的方法示例
Aug 24 NodeJs
nodejs实现UDP组播示例方法
Nov 04 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
PHP常用编译参数中文说明
2014/09/27 PHP
php实现中文转数字
2016/02/18 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
js模糊查询实例分享
2016/12/26 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
js常见遍历操作小结
2019/06/06 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
理解Python垃圾回收机制
2016/02/12 Python
python数据结构之链表的实例讲解
2017/07/25 Python
python中lambda()的用法
2017/11/16 Python
python sorted函数原理解析及练习
2020/02/10 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
秋季开学典礼主持词
2014/03/19 职场文书
校庆标语集锦
2014/06/25 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android