首页 热点资讯 义务教育 高等教育 出国留学 考研考公
您的当前位置:首页正文

使用VS Code开发Node.js应用环境搭建

2024-12-16 来源:花图问答

简介

  • 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 就可以运行了

显示全文