CODEWITHSUNDEEP
visual-studiotypescriptbuildnpm
jujiro
jujiro

Reputation: 300

Visual Studio - Under the hood (NPM/Typescript)

How does Visual Studio (2015) work with external tools like NPM and Typescript compiler (tsc.exe) etc.? I guess, at the time of building the solution or project, something must be telling MSBuild to run these extra tools. I want to understand this under the hood operation.

Upvotes: 1

Views: 121

Answers (2)

jessehouwing
jessehouwing

Reputation: 114641

It all depends...

Visual studio has multiple services and features that interlink here:

  • Language Services - Visual Studio can be extended with so called language services, these provide intellisense, syntax analysis, highlighting etc. For Javascript and Typescript Microsoft provides a Language service that provides such information.
  • MsBuild - Underneath most of Visual Studio projects lives an MsBuild project. If you search your Program files directory you'll find an MsBuild folder and underneath that there are a number of target files. This includes one for Typescript which will transform your .ts files during build. These targets files either directly use the exec MsBuild task to run tools or provide a custom MsBuild task in the form of a .NET Assembly that implements specific interfaces. These tasks can either implement the required action themselves or shell out to a tool to have it perform the action.
  • Roslyn - For C# and VB.NET the parsing of the projects and the background compilation of the sources is handled by a new compiler called Roslyn. This actually runs in the background while you type and has a very powerful in-memory model of all your code in your project. Roslyn supports add-ins as well in the form of analyzers and refactor action that either provide the user with feedback on common errors or provide ways to automatically rewrite/change the code.
  • Task Runner - The Visual Studio Task Runner is a plugin for Visual Studio that first shipped as an extension and is now part of Visual Studio. It reacts to events in the IDE (build, test, etc) and can associate actions in your package.json or grunt or bower etc scripts. The plugin will make sure your script commands are executed at the right point in time during the builds.
  • Test Runners - The Visual Studio Test Window has support for extensions as well, so the Mocha and the Chutzpah extension in your project will be picked up and during the test execution these plugins will be asked to first list and later execute the tests. These runners act as a kind of proxy, feeding back the list of tests and their status after execution.
  • Custom extensions - There are many other ways in which some vendors extend Visual Studio by providing a generic extension. These extensions may contain any of the above elements or may just listen to the events generated by Visual Studio while you do your work and react on them.

Upvotes: 1

NicoD
NicoD

Reputation: 1189

You can see the references to the typescript items if you open the .csproj with a text editor (or from visual studio : unload the project, right-click on the project and choose edit myproject.csproj )

You'll see the typescript resources :

<ItemGroup>
    <TypeScriptCompile Include="src\config.ts" />

the target for the build :

<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />

The external tools, are configured in Tools/Options :

enter image description here

Upvotes: 1

Related Questions