Which editor and debugger for typescript

Question

I am working on a nodejs project in which all the code is written in typescript. This follows the microservice pattern (and each microservice is an independent project), so many projects need to be opened and debugged at the same time.

I tried webstorm and visual studio (with NTVS) but didn't care for both of them. Webstorm ignores many build errors (very important because they do not work during CI), and are not as good as visual studio in intellisense and ease of use. Visualstudio, on the other hand, is not as fast as I want. I am also tied to windows, and the file name length problem in node_modules is very common and annoying.

Others (atom, VSCode) do not support typescript debugging (or am I missing something?).

Can you share your experience? I was also wondering which Google Developer Editor can use to develop angular 2 :)

Answer 1

I have been working on the TypeScript project for 1.5 years, and I am very pleased with using Visual Studio because we used .NET for backup. For myself, I think the speed is “Good”, it’s not so good, but other things, for example. intellisense is what we really like. I also personally believe that as the "son" of Microsoft, TypeScript will get the best support from its "cousin" - Visual Studio.

However, if you are an Eclipse person, you might be interested in this TypEcs ( http://typecsdev.com/ ). In addition, Steve Stephen wrote a post about the TypeScript IDE that might interest you ( https://www.stevefenton.co.uk/Content/Blog/Date/201409/Blog/Which-TypeScript-IDE/ ), he listed some of popular with several comment sentences, including Atom and the atom-typescript extension.

Answer 2

VSCode can debug Node. There is no browser debugging yet.

Answer 3

Not a recommendation, but I suggest you not buy JetBrains products (IntelliJ / WebStorm / ReSharper) for editing TypeScript unless you rated them correctly.

They reused their own logic for other languages ​​instead of fully utilizing the TypeScript language service, which means that they behave more like a fancy JavaScript editor that can make some clever guesses than a reliable IDE for statically typed langauge. (Their type inference is different from the compiler and may trick you into believing that the untyped expression (implicit any ) is well-typed. In addition, all refactoring is the same as JS, so they don’t use or save the type. Type-based refactoring ( e.g. safe renaming and moving) is not available.)

Regarding debugging, you may have more complex debugging of generated JS. It is not only well supported, but also detects problems that occur in code inserted into the compiler. Otherwise, it would be hard to understand if you are only looking at the TypeScript source. In addition, in the generated code, you can actually set breakpoints in single-line bodies of lambda functions.

Answer 4

A little late in the conversation.

I recently tried VisualStudio 2015, VisualStudio Code 0.9, Atom (with Atom-Typescrip t package). And quite comfortable with Atom.

Atom-TypeScript uses the latest version of TypeScript, so you can use all the new features like async / await, string interpolation, etc. A community-created package, so we don’t have to wait for the main IDE version to be released, use the new TypeScript features.

Debugging cannot find it. But love to use the node-inspector for its light weight. The problem is that you need to debug it in the javascript version, not the TypeScript version. Not sure, but maybe if you can provide a map file, can you debug the TypeScript version? like in the Google Chrome Inspector.

Answer 5

I also use Visual Studio. I had no problems with its speed; I believe that everything is as fast as I expect.

However, I have not used TypeScript projects. I use common "Web" projects with TypeScript files. In addition, I do not use my own tools for building and compiling Visual Studio; I use my own Gulp tasks for my project (including recovery, saving monitoring, minimization, testing, etc.) And the "Task Launch Explorer" manage them from Visual Studio. I think this is the best of both worlds: the maliciousness and features of Visual Studio, as well as the flexibility to run my own custom tasks regardless of the platform.

I have to admit that I am not doing deep debugging (e.g. breakpoints, stepping) from the IDE. Does VS do this with TypeScript? If I catch an error at runtime (in the browser), I always have the source maps indicating where the error is, so I go back to the code, try to fix it, save and reload in the browser.

Answer 6

I use VSCode to actively debug an angular / node / typescript application. It works, but you will need to do some tweaking / tuning. You must tell VSCode how to debug your applications. For example, I have several options in my launch.json configuration for debugging my gulp scripts, my node server.js file and my angular / typescript application via chrome using the installed "Debugger for Chrome" extension in VSCode. This is possible with some configuration. Finally, depending on your specific situation, you may need to properly configure map files for your project from javascript to typescript.

I also had a problem with file paths for too long in the node_modules folder in visual studio when opening a project using npm. This is because Visual Studio is trying to download all of your packages - incorrectly so that I can add. The only way to avoid this for my project is to mark the node_modules folder as a hidden folder in windows (top level only).