typescript - 如何在 Visual Studio Code 中使用 Sass、TypeScript 和 BrowserSync？

Question

目前，每次我启动 Visual Studio Code 时，我都会运行：

• Live Sass Compiler 插件，按下VS Code 状态栏上的Watch Sass按钮
• 打字稿编译器：Terminal > Run Task ... > Show All Tasks ...> tsc: watch - tsconfig.json
• BrowserSync：我在 VS Code 中打开一个新的终端窗口并执行：browser-sync . -w

有什么办法可以简化这 3 个步骤并将它们减少到一个步骤？也许我应该在tasks.json文件中添加一些东西？我可以使用node-sass而不是使用Live Sass 编译器，因为我之前已经运行过它。但是，我希望 VS Code 以某种方式提醒我，以防 Sass 编译错误。

目前，该.vscode/tasks.json文件具有以下内容：

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "option": "watch",
      "problemMatcher": ["$ tsc-watch"],
      "group": "build"
    }
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$ tsc"],
      "group": {"kind": "build", "isDefault": true}
    }
  ]
}

标签： typescriptvisual-studio-codesassbrowser-syncnode-sass

Answer 1

该browser-sync . -w命令可以作为任务运行：

{
  "type": "shell",
  "label": "Run Browsersync",
  "command": "browser-sync . -w",
  "problemMatcher": []
}

此外，Typescript 和 Browsersync 观察者任务都可以在 Visual Studio Code 启动时自动运行，方法是在它们的配置中添加以下选项tasks.json：

"runOptions": {
  "runOn": "folderOpen"
}

您需要通过按Ctrl + Shift + P来允许自动运行任务，然后选择：Tasks: Manage Automatic Tasks in Folder > Allow Automatic Tasks in Folder。

因此，使用以下内容tasks.json，TypeScript 和 Browsersync 观察者会自动启动，不再需要手动启动它们：

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "option": "watch",
      "problemMatcher": ["$tsc-watch"],
      "group": "build",
      "runOptions": { "runOn": "folderOpen" }
    },
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"],
      "group": { "kind": "build", "isDefault": true }
    },
    {
      "type": "shell",
      "label": "Run Browsersync",
      "command": "browser-sync . -w",
      "problemMatcher": [],
      "runOptions": { "runOn": "folderOpen" }
    }
  ]
}

我还为 node-sass watcher 配置了任务——它正在正确编译 SCSS 文件，但不幸的是，如果 VSC 底部的面板（问题、终端等）被最小化，我没有收到任何编译错误通知。官方 Visual Studio Code 文档建议使用 Gulp 作为 Sass 观察者：https ://code.visualstudio.com/docs/languages/css#_automating-sassless-compilation