Question 414251 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – How can I make Visual Studio watch my Typescript files for changes?

I’m working on a legacy, rather outdated MVC project, where I’ve been tasked with adding several major new features. Although most of the UI is in Razor, one of the features will involve a fair bit of Javascript. To make my life easier, I decided to write Typescript instead.

Making Visual Studio 2022 transpile the Typescript to Javascript was straightforward and works normally when building the project. The problem is that I also want to rebuild the Typescript code when running Hot Reload.

If I make a change to a Typescript file and click Hot Reload, I get a message stating that there are no code changes. Since this is clearly false, it leads me to believe that Visual Studio isn’t watching my Typescript files for changes.

After being unable to find any information on how to make VS do what I want, I came across a suggestion to instead run tsc --watch and have the Typescript compiler do the watching instead. It’s a bit ugly and really isn’t the right approach, but if I could get it to work I would accept it and move on. Alas, when building I haven’t found a way to run a background process.

I’ve now got the following in my .csproj file:

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="14.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<!-- other stuff here -->
 <!--
Taken from https://www.meziantou.net/running-npm-tasks-when-building-a-dotnet-project.htm
-->
 <Target Name="NpmInstall" Inputs="package.json" Outputs="node_modules/.install-stamp">
   <Exec Command="npm ci" Condition="'$(RestorePackagesWithLockFile)' == 'true'" />
   <Exec Command="npm install" Condition="'$(RestorePackagesWithLockFile)' != 'true'" />
   <!-- Write the stamp file, so incremental builds work -->
   <Touch Files="node_modules/.install-stamp" AlwaysCreate="true" />
 </Target>
 <!--
     2. Run npm run build before building the .NET project.
     MSBuild runs NpmInstall before this task because of the DependsOnTargets attribute.
  -->
 <Target Name="NpmRunBuild" DependsOnTargets="NpmInstall" BeforeTargets="BeforeBuild">
   <Exec Command="npm run build" />
 </Target>
 <Target Name="NpmRunWatch" BeforeTargets="Build" Condition="'$(Configuration)' == 'Debug'">
   <Exec Command="start npm run watch" />
 </Target>

NpmRunWatch is supposed to run the Typescript watch process. However, despite trying many different variants of the code above, I haven’t been able to get it to run in the background. Instead, the build system waits for the watch process to exit before continuing, which defeats the purpose.

So, I’m looking for one of the following solutions:

  1. Configure Visual Studio to watch my Typescript source files for changes and rebuild when I click the Hot Reload button. I would also accept a rebuild when any file that’s included in the project changes, or even an unconditional rebuild based solely on the activation of the Hot Reload button.

  2. A way to make my npm run watch kludge work such that the watch process runs in the background without interfering with the rest of the build.

  3. Frame challenge. Am I going about this all wrong?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Dou Xu-MSFT linked to this question, which gave me the information to solve the problem.

    The key is that the tsconfig.json file needs to have the compileOnSave root-level option set to true. Here's an example (see the first line):

    {
  "compileOnSave": true,
  "compilerOptions": {
    "lib": [ "ES2022", "DOM" ],
    "target": "ES2020",
    "module": "ES2022",
    "moduleDetection": "force",
    "noEmitOnError": true,
    "sourceMap": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "moduleResolution": "Node",
    "rootDir": "./Scripts/ts",
    "outDir": "./Scripts/compiled",

    // Best practices
    "strict": true,
    "alwaysStrict": true,
    "exactOptionalPropertyTypes": true,
    "skipLibCheck": true,
    "noFallthroughCasesInSwitch": false,
    "noImplicitReturns": true,
    "noUncheckedIndexedAccess": false,

    // Some stricter flags (disabled by default)
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noPropertyAccessFromIndexSignature": false,
    "allowUnusedLabels": false,
    "noImplicitOverride": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "./Scripts/ts/**/*.ts"
  ]
}

  2. 0

    About your solution 1:

    From looking at .NET and native C++ apps, i think Visual Studio’s native Hot Reload primarily supports .NET and C++ projects not for typescript files. That’s why you get a message stating that there are no code changes.

    Based on my test, i found if you enable Hot Reload on File Save and save the typescript file after modifying changes, the VS can detect typescript file changes.

    Besides, you can use external tools like nodemon and ts-node to achieve it.

    nodemon

    ts-node

    A similar ticket attached

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search