vscode终端node(vscode终端设置)

VSCode Node.js 调试配置 (npm 脚本启动)

相当于直接使用 node 命令,用 npm run script 脚本 来启动 Node.js 程序是更为常见的场景,比如当目标是运行一个应用。

假设项目的 package.json 有一个用来调试的 debug 脚本:

我们要怎么启动项目的跟踪调试呢?

文档指路 ➡️ 【Node.js 调试入门】 、 【VSCode 中的 Node.js 调试】 、 【Launch 对 npm 及其他工具的配置支持】

VS Code 支持两种核心调试模式 Launch 和 Attach ,Launch 方式是直接以 debug 模式启动应用,并为我们自动添加一个调试器;而 Attach 方式则是将 VSCode 调试器连接到已经运行中的应用程序或进程。我们这里用的是 Launch 方式。

在终端运行:

或点击VSCode 的小甲虫图标:

上面蓝色位置圈错了,应该是第一个 Node.js。

VSCode 十分智能,预设了很多针对不同需求的启动配置:

让我们来做进一步的修改:

之前那个启动配置项可以删除,留下这个需要的即可。

我们将 console 属性 设置为外部终端,我们启动调试时 VScode 就会自动打开下图中对应的终端(根据操作系统)。可以根据个人使用习惯,自定义用什么终端 (比如我在 VSCode 设置的 Terminal › External: Osx Exec,从默认的改为了 iTerm2)。

别忘了先把我们的脚本加上端口

Mac下vscode使用Mac终端命令 zsh: command not found

在Mac上装好node后,打算在vscode使用npm install来安装依赖

结果vscode终端却提示 zsh: command not found

找到以下方法

1、在~目录下创建.zshrc文件

2、编辑source ~/.bash_profile 至 .zshrc 文件中

3、source ~/.zshrc

即可解决

在VScode中npm,cnpm,vue提示无法识别

先是两张报错的信息

原本是提示 vue无法识别,但是通过一顿自己都忘记了的操作之后变成了缺少组件,但是后面的方法对无法识别是适用的

图二的解决方案网上提供的方法有两种

一种是通过终端输入 npm/cnpm install commander 对缺少的组件安装

另一种是通过终端输入 vue init webpack 进行初始化

如果两种方法都不行,就是跟第一种情况一样是路径的问题了

然而,路径问题也要注意有两个

首先是去我们的环境变量的 Path 里查看我们的路径是不是对应 nodejs 安装时选择的路径,如果没有就加上去

这是网上提供的第一个方法,只要是路径设置好了,基本上是可以使用的。但是如果进到 VS Code 之后发现 npm 指令不能使用,那么就要通过设置 VS Code 的兼容性来解决

通过上面几个步骤基本上就可以解决 VS Code 不能使用 node、npm 的问题

接下来就是 cnpm、vue-cli 等全局安装之后无法使用的问题

全局安装cnpm: npm install -g cnpm --registry==

全局安装vue-cli: cnpm/npm install -g vue-cli

顺序执行了两个指令之后,使用 cnpm 安装 vue脚手架,提示 cnpm 无法识别,就算使用 npm 安装 vue-cli 成功之后,输入 vue 指令也会提示无法识别(黑人问号问号问号问号...)

于是观察一下安装过程,在进行全局安装 vue脚手架以及在安装 cnpm 的时候很容易会发现一个路径,这个就是你安装的一个路径,相信有人会跟我一样,安装的路径和 nodejs 的安装路径不一致

注意:这个是安装 vue-cli(脚手架)出现的提示信息,是已经安装成功的,但是我在使用的时候提示不是内部或外部指令。cnpm安装的时候也会有类似的显眼的路径信息,这里就不放出来,自己注意找一下就行

解决方法

通过终端输入 npm config ls 查看配置信息

prefix 是安装路径,这个时候会发现这个路径并不是你安装 nodejs 的路径,所以我们需要修改这个安装路径

终端输入 npm config set prefix ( nodejs 的安装路径)

再次终端输入 npm config ls 查看配置信息,就修改成功了

最后再重新进行全局安装 cnpm 和 vue-cli 就可以进行使用了

总结起来就是:

1、环境变量中 Path 中的路经检查是否正确,如果没有就添加上去

2、若1满足,则对 VS Code 兼容性进行修改

3、cnpm 或 vue 还是不能使用的话,考虑安装路径问题,终端输入 npm config ls 进行配置信息查看,检查是否正确。若不正确,终端输入 npm config set prefix ( nodejs 的安装路径) 进行修改;若正确,emmmmmmmmmmm,那就说明这篇笔记不是很适合你的错误哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

好嘞,记录完毕【伸懒腰】

如何在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怎么安装node.js

vscode不能安装node.js

一、安装步骤

下载对应你系统的Node.js版本:

选安装目录进行安装(这里可以自定义安装位置)

环境变量配置以及测试

二、具体过程

1.下载软件,我下载的是.msi文件,需要安装,一直next就可以了,如果需要更改安装位置的话,可以自己更改;如果下载的是zip压缩包,只需要将其解压放置在你想要放置的文件夹中(一直下一步就行了)

2.安装完成之后,可以进行简单的测试 安装是否成功。在键盘按下【win+R】键,输入cmd,然后回车,打开cmd窗口。两个命令:node_vnpm_v(新版的Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西)

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

361知讯网

本文链接:http://pdidw.com/vs/38979.html

发表评论

评论列表

还没有评论,快来说点什么吧~