参考:https://code.visualstudio.com/Docs/runtimes/nodejs
webstore是目前最受欢迎的Nodejs开发IDE之一。受欢迎的原因,当然是对于Nodejs IDE的集成开发环境,集项目创建、编辑、调试于一体,简单的配置,强大的智能提示。
实际上使用Visual Studio开发Nodejs也不逊于WebStore,但是Visual Studio这种集成开发环境的软件过于庞大,电脑配置不好的话,多开启几个VS项目动不动就崩掉了或机器卡死。
本文本介绍是Nodejs一种轻量级的开发工具——使用VSCode。尽管VScode看起来更像是Uedit、Noteplus等强大文件编辑器,但它也提供了可扩展的、强大的提示功能(特别是文件间js引用提示),以及内置Nodejs调试功能,让它有别于一般的编辑工具。
一、使用Express创建项目
1、全局安装Express(如已安装忽略此步骤)
npm install -g express
2、创建项目
创建项目(创建文件夹名称ExpressApp)
express ExpressApp
生成目录如下
ExpressApp
|-- app.js
|-- package.json
|-- bin
|-- www
|-- public
|-- images
|-- javascripts
|-- stylesheets
|-- style.css
|-- routes
|-- index.js
|-- users.js
|-- views
|-- error.jade
|-- index.jade
|-- users.jade
3、下载第三方包
(1)cmd命令行切换到项目目录
cd e:\nodejs\ExpressApp
(2)根据需要编辑package.json,运行如下指令安装第三方包
npm install
在项目目录下node_modules可见安装好的第三方包
ExpressApp
|-- node_modules
(3)运行项目
npm start
输出如下:
>
[email protected] start E:\Nodejs_Workspace\ExpressApp
> node ./bin/www
注:npm start指令会自动执行node ./bin/www
在浏览器中输入http://localhost:3000,可访问Express欢迎页面
二、使用VSCode开发Nodejs
1、VSCode打开Nodejs
code e:\nodejs\ExpressApp
或
cd e:\nodejs\ExpressApp
code .
注:在当前项目下创建ExpressApp.bat,输入“code .”即可,下次直接此文件直接使用VSCode打开Nodejs项目
@echo off
code.
打开VsCode后,在左侧导航栏上的任意文件上右键,可以快捷打开CMD命令,也可以打开文件所在文件夹。
![使用VSCode开发Nodejs_第3张图片](http://img.e-com-net.com/image/info8/f0380cc7dad34062bd6975a58572d465.jpg)
2、添加智能提示
VSCode打开Nodejs项目,默认是没有智能提示。
(1)使用TypeScript Definition Manager(TSD)在项目中下载所需的tsd文件,VSCode中打开时有智能
全局安装tsd(如已安装忽略)
npm install -g tsd
下载所需的组件提示(以下载node、express提示为例)
tsd query node --action install
tsd query express --action install
注:
①多个提示组件在query参数后可以空格分隔简写为tsd query node express --action install
②组件会项目目录下添加typings文件夹
|-- typings
|-- node
|-- express
(2)添加js文件引用的智能提示
假如在文件引用另外一个文件common.js时,文件头添加如下
///
(3)添加js标准智能提示
在项目根目录下添加jsconfig.json文件,文件内容如下:
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs"
}
}
此配置表示代码服从ES5标准并使用commonjs规范(什么是commonjs请参考http://www.cnblogs.com/fullhouse/archive/2011/07/15/2107416.html),发VScode下有此配置之后,可以实现在文件中对require引用js文件的智能提示。(我测试时无此配置也会有智能提示,不清楚什么原因)
三、调试
1、创建VSCode调度配置文件
点击调试面板,并点击运行(F5)按钮时,右侧出现下拉框,选择“Node.js”
然后会在项目目录下创建launch.json文件
ExpressAppp
|--.vscode
|-- launch.json
可根据需要编辑launch.json,修改启动配置项
2、创建断点:
根据需要创建断点:在js文件编辑区域左侧,会添加/移除断点
3、调度
在调试面板上点击运行或按快捷键F5
四、VSCode编辑js常用快捷方式
快捷键 |
说明 |
F5 |
调试运行程序 |
F8 |
查看警告、错误信息 |
F12 |
快速定义到声明 |
Ctrl + P |
快捷查找文件(输入?显示所有指令) |
Ctrl + F |
文件中快速查找 |
Ctrl + B |
toggle左侧导航栏 |
Ctrl + Shift + M |
显示警告和错误,相当于Ctrl + P,输入! |
Ctrl + Shift + O |
根据类型符号查找,相当于Ctrl + P,输入@: |
|
|
五、VSCode的几个问题
可能因为VsCode才出来半年左右,与VS强大的智能提示功能相比,还是差了不少。其中最影响使用的在于以下几点:
1、不能识别(智能提示)构造函数内部声明的成员;
2、js文件之间引用关系的智能提示没有(尽量添加了///
)
3、不支持js排版(尽管有预留了功能用快捷键 ctrl + shift + F用于排版,但功能未实现)