使用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学习笔记之Global Objects全局对象
Jan 13 NodeJs
nodejs实现HTTPS发起POST请求
Apr 23 NodeJs
nodejs实现遍历文件夹并统计文件大小
May 28 NodeJs
Nodejs进阶:核心模块net入门学习与实例讲解
Nov 21 NodeJs
详解使用nodeJs安装Vue-cli
May 17 NodeJs
nodejs集成sqlite使用示例
Jun 05 NodeJs
nodejs构建本地web测试服务器 如何解决访问静态资源问题
Jul 14 NodeJs
nodeJS微信分享
Dec 20 NodeJs
nodejs实现简单的gulp打包
Dec 21 NodeJs
NodeJs crypto加密制作token的实现代码
Nov 15 NodeJs
nodejs nedb 封装库与使用方法示例
Feb 06 NodeJs
NodeJS模块Buffer原理及使用方法解析
Nov 11 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
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
PHP实现计算器小功能
2020/08/28 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
java必学必会之static关键字
2015/12/03 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
vue实现扫码功能
2020/01/17 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
python flask实现分页效果
2017/06/27 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
Python发展简史 Python来历
2019/05/14 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
建筑实习自我鉴定
2013/10/18 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书