Windows系统上使用npm来安装和配置Yarn,在VSCode中使用

一、安装Yarn

1. 安装Node.js和npm

如果还没有安装Node.js和npm,可以从Node.js官方网站下载并安装最新版本的Node.js,npm会随Node.js一起安装。

2. 使用npm安装Yarn

打开命令提示符或PowerShell,运行以下命令来全局安装Yarn:

bash 复制代码
npm install -g yarn
3. 验证安装

安装完成后,运行以下命令来验证Yarn是否安装成功:

bash 复制代码
yarn --version

二、配置Yarn

1. 初始化项目

在命令提示符或PowerShell中导航到你的项目目录,运行以下命令来初始化一个新的Yarn项目:

bash 复制代码
yarn init

根据提示填写项目的相关信息,完成后会生成一个package.json文件。

2. 添加依赖

例如,添加reactreact-dom依赖:

bash 复制代码
yarn add react react-dom
3. 安装所有依赖

如果已经有一个package.json文件,运行以下命令来安装所有依赖:

bash 复制代码
yarn install

三、在VSCode中使用Yarn

1. 打开VSCode

在命令提示符或PowerShell中导航到你的项目目录,运行以下命令来打开VSCode:

bash 复制代码
code .
2. 运行Yarn命令

你可以在VSCode的集成终端中运行Yarn命令。例如,安装新依赖:

bash 复制代码
yarn add <package-name>
3. 配置任务

你可以在VSCode中配置任务来运行Yarn命令。创建或编辑项目根目录下的.vscode/tasks.json文件,添加如下配置:

json 复制代码
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Yarn Install",
      "type": "shell",
      "command": "yarn install",
      "group": "build",
      "problemMatcher": [],
      "detail": "安装项目所有依赖"
    },
    {
      "label": "Yarn Add",
      "type": "shell",
      "command": "yarn add",
      "args": [
        "${input:packageName}"
      ],
      "group": "build",
      "problemMatcher": [],
      "detail": "添加新的项目依赖"
    }
  ],
  "inputs": [
    {
      "id": "packageName",
      "type": "promptString",
      "description": "请输入要添加的依赖包名"
    }
  ]
}

在这个配置文件中,你可以通过按下Ctrl+Shift+B快捷键来运行配置的任务。

四、调试与其他配置

1. 添加调试配置

创建或编辑项目根目录下的.vscode/launch.json文件,添加如下配置:

json 复制代码
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Program",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/app.js",
      "preLaunchTask": "Yarn Install",
      "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
      ]
    }
  ]
}

这会在启动调试前自动运行Yarn Install任务。

2. 使用Yarn脚本

你可以在package.json文件中定义脚本,并在VSCode的集成终端中运行。例如:

json 复制代码
{
  "scripts": {
    "start": "node app.js",
    "build": "webpack --config webpack.config.js"
  }
}

运行脚本:

bash 复制代码
yarn start
bash 复制代码
yarn build
相关推荐
懒羊羊我小弟1 天前
常用 Webpack Plugin 汇总
前端·webpack·npm·node.js·yarn
belldeep23 天前
nodejs:js-mdict 的下载、安装、测试、build
nodejs·jest·yarn·nvm
顧棟1 个月前
【ES实战】治理项之索引模板相关治理
大数据·elasticsearch·yarn
一只小川2 个月前
Yarn install命令源码实现
前端·npm·yarn
一只小川2 个月前
使用vscode以及chrome调试yarn源码
前端·yarn
懒羊羊我小弟2 个月前
包管理工具npm、yarn、pnpm、cnpm详解
前端·npm·node.js·yarn·cnpm
昵称老重复2 个月前
yarn 安装问题
yarn
core5122 个月前
flink终止提交给yarn的任务
flink·yarn·任务·终止·停止
core5122 个月前
flink yarn模式3种提交任务方式
flink·yarn·任务·session·提交·方式·应用模式
Burn_2 个月前
五、YARN
大数据·hadoop·分布式·yarn