Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

本文介绍,如何安装 Node.JS 和 VsCode ,包括如何配置 VsCode,并实现使用 VsCode 编写 JS 代码,运行在Node 环境中。

文章目录(展开/隐藏→)

展开
4.3
(3)

本文将分以下几个方面介绍Windows平台下Node.JS的安装、VsCode的安装以及安装插件并执行JS代码的详细过程,主要包括:安装node.js配置 NPM 源地址VsCode 安装安装 Code Runner 插件在 VsCode 中编写 JS 代码Npm 包的安装路径修改 npm 包安装路径配置路径后必须配置环境变量等

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

安装node.js

下载地址: https://nodejs.org

选择下载 LTS 版本,即可,浏览器会下载安装文件。

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

安装总结:安装时,同意用户协议后,一直点下一步即可。

详细安装步骤如下:

1.开始安装点击下一步 Next

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

2. 勾选 I accept the terms in the License Agreement 接受许可协议条款 然后点击下一步(Next)

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

3. 配置安装目录,默认即可

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

4. 选择要安装的特性,默认即可,点击 下一步(Next)

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

5. 是否需要 C/C++,初学者一般不用到,点击下一步(Next)

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

6. 配置完成,点击 Install 开始安装

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

7. 进度条过后,安装完成点击 Finish 即可。

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

验证安装,检查安装版本

打开终端,查看node和npm版本,验证是否安装成功:

node -v
npm -v

注意:

Npm 和 Node 已经继承,安装 Node 后,会自动安装 Npm。

如果安装之前打开了 Cmd ,需要在安装后重新打开 Cmd

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

配置 NPM 源地址

默认情况下,npm安装包时会从国外的地址下载,速度很慢,容易导致安装失败,因此需要先配置 Npm 的源地址,可以使用下面的命令更改 Npm 的源地址为淘宝源。

PS C:\> npm config set registry http://registry.npm.taobao.org/

更改好了之后,查看源地址是否正确的被更改

PS C:\> npm config get registry
http://registry.npm.taobao.org/
Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

至此,基本配置完成。

VsCode 安装

下载地址:https://code.visualstudio.com/Download#

选择自己需要的版本下载。

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

下载完成后开始安装。

总结,统一协议后,可以都使用默认配置,一直点击下一步即可安装。

1. 同意协议点击下一步

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

2. 选择安装位置(默认即可),下一步

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

3. 选择开始菜单文件夹(默认即可),下一步

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

4. 默认即可,下一步

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

5. 点击安装,VsCode 开始安装

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

6. 安装中。

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

7. 安装完成

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

安装 Code Runner 插件

安装 Code Runner 扩展,VsCode 会自动启用

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

在 VsCode 中编写 JS 代码

使VsCode 打开一个空文件夹,创建 js 后缀名的文件

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

在 JS 文件中右击Run Code 运行,即可运行JS 文件,输出内容会打印在下底部的输出框内。

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

Npm 包的安装路径

本地安装: 会安装到命令执行时当前文件夹位置。

npm install vue
Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

全局安装:将包安装到全局

npm install -g <package>

【例子】全局安装Vue

npm install -g 自定义

下面为 npm 包安装路径修改,修改路径后,Npm 下载的包会保存到指定路径中。(也可以不做,根据自己需求)

修改 npm 包安装路径

注意,配置路径后,必须配置环境变量 全局包目录(node_global) 和 缓冲文件目录 (node_cache)

# 自定义 npm 全局路径
PS D:\> npm config set prefix "D:\node\node\node_global"

# 自定义缓冲文件夹
PS D:\> npm config set cache "D:\node\node\node_cache"

安装一个包,测试路径设置是否成功,例如安装 Vue

PS D:\> npm install -g vue

检查 node_global 文件夹中是否有 Vue 包,检查 node_cache 是否有缓存文件

配置路径后,必须配置环境变量

修改路径后,必须修改环境变量,不然导致如下错误,提示找不到安装完毕的 vue 包

PS C:\Users\mirror\Desktop> node
Welcome to Node.js v16.17.0.
Type ".help" for more information.
> require('vue')
Uncaught Error: Cannot find module 'vue'
Require stack:
- <repl>
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
    at Function.Module._load (node:internal/modules/cjs/loader:804:27)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '<repl>' ]
}
>

打开 windows 环境变量设置

1. Windos 右下角搜素框输入此电脑,右击 此电脑 选择打开属性面板,

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

打开高级系统设置

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

选择高级,然后打开环境变量设置。

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

最后打开环境变量设置面板,然后就可以开始配置环境变量了。

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

用户变量配置

先选择用户环境变量中的 Path ,再点击编辑

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

找到下面路径(注意mirror时用户名,每台电脑的用户名都可能会不一样。)

把图中红框中的路径(默认值),点击 Edit (编辑),修改为前面使用命令配置的全局路径 “D:\node\node\node_global”

最后点击OK

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

系统变量配置

1. 点击 ”新建“ 新建系统变量

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

2. 在系统变量中,添加如下环境变量,全局路径中的 node_modules 文件夹(重要),点击保存

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

3. 系统变量中,选择 Path 然后点击编辑

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

4. 把刚刚配置的变量,添加到系统 Path 中,最后确定保存

Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

检查环境变量配置是否成功

【范例】如下显示表示,配置成功

PS C:\Users\mirror\Desktop> node
Welcome to Node.js v16.17.0.
Type ".help" for more information.
> require('vue')
{
  EffectScope: [class EffectScope],
  ReactiveEffect: [class ReactiveEffect],
  customRef: [Function: customRef],
  effect: [Function: effect],
  effectScope: [Function: effectScope],
  getCurrentScope: [Function: getCurrentScope],
  isProxy: [Function: isProxy],
  isReactive: [Function: isReactive],
  isReadonly: [Function: isReadonly],
 ...

共计3人评分,平均4.3

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

本文投稿作者:飒飒,如若转载,请注明出处:https://iymark.com/computer/windows/nodejs-vscode-javascript.html

(0)
上一篇 2022年09月18日 19:08
下一篇 2022年09月19日 21:22

相关推荐

发表回复

登录后才能评论
本站APP