使用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爬虫获取数据简单实现代码
Mar 29 NodeJs
NodeJS远程代码执行
Aug 28 NodeJs
nodejs实例解析(输出hello world)
Jan 03 NodeJs
用nodejs实现json和jsonp服务的方法
Aug 25 NodeJs
详解nodejs通过代理(proxy)发送http请求(request)
Sep 22 NodeJs
使用npm安装最新版本nodejs
Jan 18 NodeJs
nodejs读取本地中文json文件出现乱码解决方法
Oct 10 NodeJs
Nodejs中获取当前函数被调用的行数及文件名详解
Dec 12 NodeJs
nodejs微信开发之接入指南
Mar 17 NodeJs
5分钟教你用nodeJS手写一个mock数据服务器的方法
Sep 10 NodeJs
nodejs制作小爬虫功能示例
Feb 24 NodeJs
一文秒懂nodejs中的异步编程
Jan 28 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 foreach循环使用详解与实例代码
2010/05/08 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
document.getElementBy("id")与$("#id")有什么区别
2013/09/22 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
vue小白入门教程
2018/04/02 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
Python XML RPC服务器端和客户端实例
2014/11/22 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Python如何读写字节数据
2020/08/05 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
幼师自荐信范文
2013/10/06 职场文书
干部鉴定材料
2014/05/18 职场文书
农村门前三包责任书
2014/07/25 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
领导班子整改措施
2014/10/24 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
上班迟到检讨书
2015/05/06 职场文书