首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有办法同时运行"tsc -watch“和"npm start”,只需在VSCode上点击一个按钮/快捷方式?

是的,可以通过使用VSCode的任务运行器来实现同时运行"tsc -watch"和"npm start"的功能,并通过点击一个按钮或快捷方式来触发。

首先,打开VSCode并进入你的项目文件夹。然后,按下Ctrl+Shift+B(或者点击顶部菜单栏中的"终端" -> "运行生成任务")来打开任务运行器。

在任务运行器中,你可以创建一个自定义任务来同时运行"tsc -watch"和"npm start"。点击"任务" -> "配置任务" -> "任务运行器",选择"终端"。

在打开的tasks.json文件中,你可以添加以下配置:

代码语言:txt
复制
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "tsc -watch",
      "type": "shell",
      "command": "tsc -w",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "label": "npm start",
      "type": "shell",
      "command": "npm start",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

保存并关闭tasks.json文件。

现在,你可以在VSCode的任务运行器中看到你刚刚创建的两个任务:"tsc -watch"和"npm start"。你可以通过点击任务运行器的播放按钮来同时运行这两个任务。

如果你想要将这个功能绑定到一个按钮或快捷方式上,可以通过自定义键盘快捷方式来实现。点击"文件" -> "首选项" -> "键盘快捷方式",在打开的keybindings.json文件中添加以下配置:

代码语言:txt
复制
{
  "key": "ctrl+shift+r",
  "command": "workbench.action.tasks.runTask",
  "args": "tsc -watch"
},
{
  "key": "ctrl+shift+s",
  "command": "workbench.action.tasks.runTask",
  "args": "npm start"
}

保存并关闭keybindings.json文件。

现在,你可以通过按下Ctrl+Shift+R来运行"tsc -watch"任务,通过按下Ctrl+Shift+S来运行"npm start"任务。这样,你就可以通过点击一个按钮或快捷方式来同时运行这两个任务了。

希望以上信息对你有所帮助!如果你有任何其他问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

VSCode高效开发工作流配置指南

我们只需要把VSCode当成一个基础的编码工具,编译与调试,不推荐VSCode中进行(具体原因后面还会讲)。...所以开发的时候,需要打开两个软件,写代码VSCode中进行,UI编辑与项目编译及运行调试LayaAirIDE中进行,两个软件,快速切换一下,即可完成一个从编码到运行发布的完整工作流。...不要使用VSCode中的tsc编译任务,因为VSCode中的tsc编译与LayaAirIDE的编译及发布流程不一致,所以会有很多地方都要修改,编译后才能运行成功,而且就算是VSCode运行成功了,如果修改的...这时,我们就可以看到,.vscode目录下,一个执行外部命令的任务模板.vscode/task.json创建成功了,我们只需要更改一下label(任务名称)command(要执行的命令)即可。...打开键盘快捷方式后,先在顶部搜索task,找出任务相关的快捷方式,再找到 运行任务(Run Task)双击,设置快捷键 Ctrl + F8 (可按自己的习惯设置一个不冲突的快捷键即可),回车即完成运行任务的快捷键绑定

2.2K30

使用VS Code开发asp.net core

这次再删除两行代码: 左边会出现一个红色的箭头, 鼠标可以放在这个箭头上, 然后点击一下查看明细, 就可以看到删除的代码行: 点击vscode左边的Source Control按钮: 按钮图标上的...文件还有undo, stage按钮. 点击文件后可以看到文件变化前后的对比明细. 左侧上方还有很多功能菜单就不一一介绍了....运行项目使用dotnet run. 项目中.vscode目录下有个tasks.json文件, 打开它: 这里有一个task叫做build, 命令是dotnet, 参数是build项目文件....这两个动作是不同的进程执行的. 设置断点试试: 很好. 如果不想debug了, 点击红色插头即可停止, 并且不影响dotnet watch run的运行....执行后的结果如图: 上面所配置的Sql连接字符串实际是保存在了UserSettings里面: 对于mysqlpostgresql等, 需要安装vscode-database这个扩展.

5.9K120
  • 如何使用及参与维护Github的LayaAir引擎源码

    顶部我们可以看到 Watch、Star、Fork,这几个按钮。...3.2 本地开发环境提醒 尽管很多开发者已安装了TS的全局开发环境,但本篇,仍建议开发者VSCode的shell命令行下,再次执行npm的本地环境安装命令 npm install,以保障引擎编译的正常运行...tsc调试相关 tsc调试模式是LayaAir开源项目默认配置好的调试模式,VSCode中使用F5调试的时候,会自动采用tsc模式编译,发布的js就在bin/tsc目录下。...运行入口文件 无论是tsc编译模式,还是rollup编译模式,开发者任选其一即可。 编译之后的运行,推荐采用anywhere启动一个本地的web服务。...可以合并的状态下,直接点Create pull request按钮,输入提交理由即可。点击后,如下图所示。 ? 建议认真仔细填写,有助于引擎团队更有效率的审核。

    1K40

    可能是开发小程序,最好用的两个编辑器

    最初设计 tsd typings 的时候,他们跟 type 是完全分离的两个项目,这两个项目也被设计为可以为不同的编辑器提供代码提示。同时,也可以应用到不同的语言。...,同时大部分情况下还是需要这种方式。...DingTalk20171007104313-2017107 注意:这里 watch 功能,需要 tsc 进程一直终端运行。可以把它放到后台运行,也可以开启一个新的终端。...推荐安装这个插件Blade Runner-Run Task When Open安装好这个插件之后, VScode 里面选择菜单-任务-配置默认生成任务- tsc 构建 生成一个 .vscode 文件夹...,里面有一个tasks.json 上面插件会在 VSCode 每次启动的时候,自动根据 task.json 运行一些命令(当然是运行 tsc 命令喽),这样,编译 ts 的工作就变成完全自动的了。

    10.3K95

    使用VS Code开发asp.net core (下)

    然后再次运行Chrome Launch. 这次运行成功了 点击About页面的My Button, 断点并没有响应. 切换到代码页面: ?...这时刷新后再点击按钮, 就可以触发断点了: ? 除此之外还可以使用浏览器自带的debugger....也就是说tsc命令还不能用. 所以需要安装typescript: npm install typescript -g 这时项目目录执行tsc命令就可以生成js文件了: ?...上面所配置的Sql连接字符串实际是保存在了UserSettings里面: ? 对于mysqlpostgresql等, 需要安装vscode-database这个扩展. 这里就先不介绍了....写完http地址后, 地址的上方会出现一个链接: Send Request, 点击这个链接, 就会发送请求, 请求响应后, 右侧可以看到返回的结果: ? 在这里还可以添加请求的各种参数: ?

    1.7K50

    Debugging javascript

    并且安装这个包:  dotnet add package BuildBundlerMinifier 执行dotnet clean dotnet build 这是一种办法, 但是我更想直接调试site.js...这时刷新后再点击按钮, 就可以触发断点了: 除此之外还可以使用浏览器自带的debugger....所以需要安装typescript: npm install typescript -g 这时项目目录执行tsc命令就可以生成js文件了: 但是, 如果更改了test.ts文件, 保存后....执行后的结果如图: 上面所配置的Sql连接字符串实际是保存在了UserSettings里面: 对于mysqlpostgresql等, 需要安装vscode-database这个扩展....的地址: 写完http地址后, 地址的上方会出现一个链接: Send Request, 点击这个链接, 就会发送请求, 请求响应后, 右侧可以看到返回的结果: 在这里还可以添加请求的各种参数:

    44820

    从零开发一款基于 webview 的 vscode 扩展

    同时我们的开发窗口中,会出现一个 watch 任务的终端: 开发窗口的调试控制台会输出插件运行日志(忽略红色的警告): 调试执行的任务是 .vscode/tasks.json 中配置的: // See...通常是外部任务运行程序中已定义任务的扩充。 { "type": "npm", // 要自定义的任务类型。 "script": "watch", // 要自定义的 npm 脚本。..."problemMatcher": "$tsc-watch", // 要使用的问题匹配程序。可以是一个字符串或一个问题匹配程序定义,也可以是一个字符串数组多个问题匹配程序。...而且 vscode 扩展的规模往往增长很快。它们是多个源文件中编写的,并依赖于 npm 的模块。分解重用是开发的最佳实践,但在安装运行扩展时,它们是有代价的。...webview 面板,现在我们尝试运行 juejin-posts.start 就可以打开一个 webview 面板: 给面板设置内容 上面我们创建了一个空白的面板,那么我们如何给面板添加内容呢?

    4.6K20

    使用 Typescript 开发 Nodejs 命令行工具

    初始化工程 建立命令行工具,需要先创建一个 npm 包。下文将使用 npm 工具来完成包的初始化依赖的安装。...中的 script 中增加 start 命令: { "script": {+ "start": "tsc --watch" }} 在当前目录下运行命令: npm start 然后对...这样我们开发时就只需要关注代码编写,而不用考虑编译的问题了。 接下来我们就可以 src 文件里面写我们的具体代码了! 注: 本文的 demo 代码可以 github 查看。...; 使用 tsc --watch 自动监听文件变动并重新编译; 运行注册过的命令,查看效果。...配置 VSCode 的 ESLint 插件,编辑器开发时就会自动提示有问题的代码,帮助我们编写符合规范的代码。

    1.8K11

    TypeScript快速入门

    同时,微软工程师们发现,内部的研发部门以及外部的客户都表示JavaScript大型Web应用中很容易出现失控,变得难以驾驭。...如果使用npm方式进行安装,只需要在终端执行如下的命令即可。 npm install –g typescript 不过,实际项目开发过程中,并不需要对TypeScript进行全局安装。...编译成功之后,会在相同目录下生成一个同名的js文件。当然,tsc命令工具还可以同时编译多个ts文件,多个文件之间用逗号隔开,如下所示。...TypeScript开发工具的选择,我们推荐使用Visual Studio Code(简称VSCode),因为相比其他开发工具来说,它具有如下一些优势: 免费开源,支持跨平台开发且跨平台体验非常一致...watch监视模式下运行编译器,当文件内容发生改变时会重新编译。

    55910

    使用 Typescript 开发 Nodejs 命令行工具

    初始化工程 建立命令行工具,需要先创建一个 npm 包。下文将使用 npm 工具来完成包的初始化依赖的安装。...中的 script 中增加 start 命令: { "script": { + "start": "tsc --watch" } } 在当前目录下运行命令: npm start...这样我们开发时就只需要关注代码编写,而不用考虑编译的问题了。 接下来我们就可以 src 文件里面写我们的具体代码了! 注: 本文的 demo 代码可以 github 查看。...; 使用 tsc --watch 自动监听文件变动并重新编译; 运行注册过的命令,查看效果。...配置 VSCode 的 ESLint 插件,编辑器开发时就会自动提示有问题的代码,帮助我们编写符合规范的代码。

    83520

    VsCode 各场景高级调试技巧,有用!

    /launch.json文件,指定程序入口文件 program字段用于指定你的程序入口文件,${workspaceFolder}表示当前项目根路径 image.png 程序中添加断点,只需点击左侧的边栏即可添加断点...调试Typescript项目 调试TS项目前,先创建一个TS项目 # 终端运行 tsc --init 复制代码 VS Code 内置了对 Ts 调试的支持。...按F5或者运行 -> 启动调试,此时可以看到可以正常debug调试 此时可以看到生成了out文件夹,里面包含一个index.js一个index.js.map文件 通过构建任务构建调试TS image.png..." ], "group": "build", "label": "tsc: 构建 - tsconfig.json" } ] } 复制代码 点击运行 ->...image.png 刷新渲染进程后的效果,如下图,已经进入了断点 image.png 另一种方式 同时开启渲染进程主进程的调试,只需要切换到调试全部的选项即可。

    1.2K20

    分享 10 多条超有用的 VsCode 各场景高级调试技巧

    /launch.json文件,指定程序入口文件 program字段用于指定你的程序入口文件,${workspaceFolder}表示当前项目根路径 image.png 程序中添加断点,只需点击左侧的边栏即可添加断点...调试Typescript项目 调试TS项目前,先创建一个TS项目 # 终端运行 tsc --init 复制代码 VS Code 内置了对 Ts 调试的支持。...按F5或者运行 -> 启动调试,此时可以看到可以正常debug调试 此时可以看到生成了out文件夹,里面包含一个index.js一个index.js.map文件 通过构建任务构建调试TS image.png..." ], "group": "build", "label": "tsc: 构建 - tsconfig.json" } ] } 复制代码 点击运行 ->...image.png 刷新渲染进程后的效果,如下图,已经进入了断点 image.png 另一种方式 同时开启渲染进程主进程的调试,只需要切换到调试全部的选项即可。

    1.7K40

    深度讲解TS:这样学TS,迟早进大厂【21】:代码检查

    可是每次执行这么长一段脚本颇有不便,我们可以通过 package.json 中添加一个 script 来创建一个 npm script 来简化这个步骤: { "scripts": {..."eslint": "eslint index.ts" } } 这时只需执行 npm run eslint 即可。...要在 VSCode 中集成 ESLint 检查,我们需要先安装 ESLint 插件,点击「扩展」按钮,搜索 ESLint,然后安装即可。...VSCode 中的 ESLint 插件默认是不会检查 .ts 后缀的,需要在「文件 => 首选项 => 设置 => 工作区」中(也可以项目根目录下创建一个配置文件 .vscode/settings.json...VSCode 没有显示出 ESLint 的报错§ 检查「文件 => 首选项 => 设置」中有没有配置正确 检查必要的 npm有没有安装 检查 .eslintrc.js 有没有配置 检查文件是不是

    2.6K20

    如何提升vscode扩展的速度

    您是否曾经注意到启动VS Code时某些扩展需要一些时间来初始化?是什么导致这种延迟? 你能为这个做什么?实际很多。和我在一起,看看如何帮助您最喜欢的扩展程序快速加载!...launch.json 该方法使我既可以使用webpack tsc进行编译,也可以进行测试调试。...--mode none", "watch": "webpack --mode none --watch", "postinstall": "node node_modules/vscode...View → Extensions 搜索 Peacock 点击安装 单击重新加载(如果需要) 特征 可以命令面板中找到命令。...调试器中本地运行扩展(并测试您是否可以遇到断点) 打包扩展并从菜单加载(从VSIX加载) 使用调试器运行测试(测试可以达到断点) 从运行您的测试脚本 npm test 完成后,您可以再次检查激活时间。

    3.5K10

    ​更适合学习TypeScript基础知识的环境配置

    npm install typescript -G 然后运行以下命令查看TS的版本 tsc -V VSCode的插件 Prettier Formatter: 用来格式划代码 打开VSCode的设置ctrl...,生成一个默认配置文件 tsc --init 这里的默认设置我们并不是全部需要的,我们只需要设置如下几个。...实际工作时需要提前创建好这两个文件夹。 我们运行一个基础演示 我们src目录下新建一个demo.ts的文件。...然后运行以下命令,该命令的作用是监控我们文件的变化 tsc -W 我们会发现在dist目录下新生成了一个js文件 我们新建一个html文件,之前一样引用我们的js文件。 我们点击一个右下角的按钮启动我们之前安装的live server插件 我们可以看到,刚刚新建的html 为了更好的体验变成我建议大家和我一样设置一下分屏

    26210

    【总结】超全面的前端工程化配置指南!

    首先在 Github 创建一个 repo,拉下来之后通过npm init -y初始化。然后创建src文件夹,写入index.ts。...大部分同学编辑器都装了prettier-vscodeeslint-vscode这两个插件,如果你项目只有其中一个的配置,因为这两者部分格式化的功能有差异,那么就会造成一个的问题,代码分别被两个插件分别格式化一次...中添加lint命令 "scripts": { "dev": "tsc --watch", "build": "npm run clean && tsc", + "lint": "...npm run lint 我们现在已经完成了eslintprettier的集成配置。编辑器无关,也就是说无论你使用什么编辑器,有没有安装相关插件,都不会影响代码校验的效果。...npm set-script prepare "husky install" 否则手动package.json中添加 "scripts": { "dev": "tsc --watch",

    50330

    Vscode笔记-24款插件

    当中对 jupyter 的支持非常不错,可以 vscode 当中快速打开、运行 .ipynb 文件,再也不用在 web 当中运行 notebook 了,体验大大提升。...VS Code 是一个由微软开发,同时支持 Windows、 Linux macOS 等操作系统的免费代码编辑器,它支持测试,并内置了 Git 版本控制功能,同时也具有开发环境功能,例如代码补全、代码片段代码重构等...那么,有没有可能提供 GitHub 链接,直接在 VS Code 查看 Repo 代码呢?...\cmd.exe gitbashD:\Git\git-bash.exe 调试技巧 VSCode Debug功能按钮从左到右功能依次为: 按钮1:运行/继续 F5,直接跳转到下一断点; 按钮2:单步跳过(...当有函数时,不会进入函数; 按钮3:单步调试(又叫逐语句) F11:当有函数时,点击这个按钮,会进入这个函数内; 按钮4:单步跳出 ⇧F11:如果有循环,点击按钮,会执行到循环外面的语句; 按钮5:重启

    10.6K21

    Electron实践笔记

    Electron 通过将 Chromium Node.js 合并到同一个运行时环境中,并将其打包为 Mac,Windows Linux 系统下的应用来实现这一目的。...{ "scripts": { "start": "run-p -c compile:dev typecheck:watch app:watch", "dist": "npm run...文件的组织方式采用一个独立的 React 组件搭配一个独立的样式文件,这样重构的时候,我们想要修改一个组件的样式只需要找到对应的样式文件进行修改即可,提高重构的效率。...但是 fs.watch 这个 API 工程不是可以开箱即用的,有许多兼容问题一些 bug。... main 进程 renderer 进程启动时分别引入日志安装模块。因为 log 方法都是暴露在全局,因此只需要在进程启动时引入一次即可。同时 TS 环境中还需要添加 log 方法的类型声明。

    1.1K30

    Electron实践笔记

    Electron 通过将 Chromium Node.js 合并到同一个运行时环境中,并将其打包为 Mac,Windows Linux 系统下的应用来实现这一目的。...{ "scripts": { "start": "run-p -c compile:dev typecheck:watch app:watch", "dist": "npm run...文件的组织方式采用一个独立的 React 组件搭配一个独立的样式文件,这样重构的时候,我们想要修改一个组件的样式只需要找到对应的样式文件进行修改即可,提高重构的效率。...但是 fs.watch 这个 API 工程不是可以开箱即用的,有许多兼容问题一些 bug。... main 进程 renderer 进程启动时分别引入日志安装模块。因为 log 方法都是暴露在全局,因此只需要在进程启动时引入一次即可。同时 TS 环境中还需要添加 log 方法的类型声明。

    98110
    领券