如何在vscode中使用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
在浏览器中输入,可访问Express欢迎页面
二、使用VSCode开发Nodejs
1、VSCode打开Nodejs
code d:\nodejs\ExpressAppcode.
注:在当前项目下创建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 installtsd query express --action installtsd install require
注:
①多个提示组件在query参数后可以空格分隔简写为tsd query node express –action install
②组件会项目目录下添加typings文件夹
|– typings
|– node
|– express
|– require
(2)添加js文件引用的智能提示
假如在文件引用另外一个文件common.js时,文件头添加如下
{ // See // 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文件的智能提示。(我测试时无此配置也会有智能提示,不清楚什么原因)
vscode下搭建Typescript编译环境
Typescript 是微软开发的一个JavaScript的超级。著名前端框架的Angular和HTML5游戏引擎Egret等都选择了Typescript作为编写语言。“工欲善其事,必先利其器”,在学习Typescript语言之前必须要有一个良好的开发环境。这里笔者选择了轻量的Visual Studio Code,此工具具有轻量、跨平台、插件丰富等特点,是一款非常优秀的开发工具。
1、首先需要安装Nodejs,安装过程网上很容易搜到,在此不再介绍。安装完成后,在命令窗口输入
2、安装typescript模块
安装完成后,可以查看typescript模块的版本号
3、创建项目目录,在命令窗口中进入该项目目录,创建tsconfig.json。例如项目地址是D:\test\ts。
在项目目录下会生成一个tsconfig.json文件
里面有很多配置项,大家可以根据各自的需要来定制。本文用的示例配置如下,
新建tscript、js文件夹,分别用作存放typescript、javascript文件。
4、测试编译
在Visual studio code中打开ts目录,在tscript目录中新建test.ts文件。
然后点击菜单中的Tasks-Run Task。
之后会出现tsc:build 、tsc:watch两个选项
其中tsc:build选项是用于一次编译。tsc:watch选项可以监测ts文件的改动,可以进行实时编译,非常方便。经过编译后的文件会存放在之前配置好的js文件目录下。
如此就可以进行Typescript之旅了。~~
node js 怎么搭配vscode使用
简介
Node.js是一个帮助开发应用的JavaScript运行平台, 它快速且灵活
NPM是一个Node.js模块的包管理程序
VS Code 支持JavaScript 和TypeScript语言--以及 Node.js 及时调试, 要想运行一个Node.js应用, 你需要安装Node.js的运行时环境
操作系统: OS X 10.11.6
版本:
VS Code 1.4
node 6.2.2
code 1.4.0
tsc 1.8.10
npm 3.9.5
VS Code 提供了一个 code 命令,用来在 shell 环境下调用编辑器。使用快捷键 ⇧⌘P(或 F1) 唤起命令面板,输入以下命令即可完成安装。
mkdir Hello
cd Hello
code .
您可以直接从命令行打开文件或文件夹。这里 '.' 是指到当前文件夹,因此 VS Code将启动并打开当前文件夹。
代码提示
通过tsd或者typings这两个工具安装(两个工具的作者是同一个人,目前tsd已经废弃了)。
tsd 和 typings 用法:
tsd:
//全局安装
npm install tsd -g
typings:
//全局安装
npm install typings -g
如果你的电脑上没有安装TypeScript Compiler的话,是无法使用tsc这个指令的。要安装也很简单
npm install typescript -g
node express、lodash等的自动补全
typings install dt~node --global
typings install dt~express --global
typings install dt~lodash --global
//vscode官方文档上express的typings使用的是
typings install dt~express dt~serve-static dt~express-serve-static-core --global
其中”dt~”为使用DefinitelyTyped类型定义的意思,vscode可以识别这种定义。
配置jsconfig.json
在使用typings之前,需要在vscode里面配置一下名为jsconfig.json的文件, VS Code通过这个文件找到自动补全文件。配置方法很简单,随便选中一个js文件,vscode右下角会弹出一个绿色的小灯泡,如图所示:
创建package.json
package.json 文件就是定义了项目的各种元信息,包括项目的名称,git repo 的地址,作者等等。最重要的是,其中定义了我们项目的依赖,这样这个项目在部署时,我们就不必将 node_modules
目录也上传到服务器,服务器在拿到我们的项目时,只需要执行 npm install
,则 npm 会自动读取 package.json 中的依赖并安装在项目的 node_modules
下面,然后程序就可以在服务器上跑起来了。
npm init
如果只是测试项目或者练习用,没有仓库地址
只需在package.json里面做如下配置即可:
{
...
"private": true,
...
}
以这种方式把项目声明为私有,这样npm就不会再提示配置repository及readme了
否则会遇到这个错误
npm WARN package.json xxx@0.0.0 No repository field.
npm WARN package.json xxx@0.0.0 No README data
需要配置仓库路径
{
...
"repository": {
"type": "git",
"url": ""
},
...
}
配置完成后就可以随意安装模块了
npm install utility express lodash --save
--save 的作用,就是会在你安装依赖的同时,自动把这些依赖写入 package.json。命令执行完成之后,查看 package.json,会发现多了一个 dependencies
字段
运行
VS Code内置调试器支持调试Node.js运行时,同时也可以调试JavaScript、TypeScript以及其他JS转译语言。
点击
图标来到调试界面
单击调试视图顶部栏中的齿轮图标,并选择好调试环境,VS Code会在.vscode目录下为你生成一份launch.json。
来看launch.json
这里的program 设置的是启动文件, index.js
此时回到文件界面, 按 F5 就可以运行了
NodeJs VSCode 断点调试
1.首先 你已经有一个.js 文件了,例如我的demo12.js
2.在工作区内打一些断点,如无异常的话应该是实心红点
3.点击 运行和调试 按钮
4.点击小齿轮按钮,修改配置文件
5.右键刚才那个js文件,复制出其相对路径,放在配置文件${workplaceFolder} 的后面
6.点击开始按钮,进行调试
运行成功后,程序会定位到打断点的地方,并且,调试控制台可以看到输入结果,上面的一排按钮与其他调试工具类似,不赘述了
在实际开发当中,可以配置多分launch.json文件,以应对不同项目的调试
修改name值用于区分,并且,要修改program ,将对应项目的入口文件配置在这里即可
nodejs安装及环境配置
nodejs安装及环境配置如下:
操作设备:戴尔笔记本电脑
操作系统:win10
操作程序:百度浏览器v8.21
1、首先在电脑中打开百度,搜索node,再点击官网。
2、在下载页面中选择一个版本进行下载,下载后是一个.msi文件。
3、下载的.msi文件,双击这个msi文件就会进入安装界面。
4、安装成功后,右击我的电脑点击属性再点击高级系统设置。
5、在配置界面的下方有个环境变量,点击环境变量。
6、用户变量中设置 NODE_PATH:nodejs自己的安装位置。
7、系统变量中在path中加入:nodejs自己的安装位置,一直点确定,即可安装完成。