TypeScript unusable in Visual Studio 2017

[Peter-Juhasz]

TypeScript Version: 2.1.5
Visual Studio Version: 2017, 15.0.0-RTW+26228.4

Code

Expected behavior:

• Keywords are colorized as keywords, not types
• Types are colorized as types, not identifiers
• Code completion works
• Identifiers/function/members names are colorized as identifiers, not as types

The same code worked in Visual Studio 2015 excellently for months.

Actual behavior:

• Code completion has no context, it shows only words found in this file
• constructor keyword is colorized as a type
• Types are colorized as plain identifiers
• Member names, function names are colorized as types

[mhegazy]

Do you see this if you open a new file? Or is it specific to a project? If it is the later, can you share the project?

[Peter-Juhasz]

I am trying to gather more info for you, but whenever I open a web project with NPM, Visual Studio 2017 crashes immediately and sometimes the solution closes itself without opening anything... It is ridiculous.

The project was migrated from xproj to csproj, but the issue appears with new projects as well, when I am succeed to open them for a few seconds. Today after a restart, it seems like TypeScript understands the code, because types are colorized and tooltips show semantics, but highlighting is still broken:

• constructor keyword is colorized as a type (when i hover it, in the tooltip it is colorized correctly as a keyword)
• null keyword (when used as type) is colorized as identifier
• member function names are colorized as types

[Peter-Juhasz]

So, how to repro: create an ASP.NET core web application using the built-in template, add a .ts file to the project, and type some TypeScript code:

• null is not colorized as keyword, but as identifier
• the name if a function is colorized as a type instead of identifier (it is not even a void function)
• new keyword is not colorized
• RegExp is not colorized as type

[billti]

Interesting... I'm not seeing that behavior with the snippet above. It's colorizing as expected for me (see below). Note: RegExp is an identifier in this context, not a type.

Are you seeing any errors in the Event Log? What do you mean exactly by "open a web project with NPM"?

If you open Task Manager, do you see a Node.js process running "tsserver.js" (and not constantly restarting)? This is our language service which should be providing the completions (and some colorization) to VS.

[Peter-Juhasz]

Hi @billti, thank you for your answer. I have just installed VS2017 clean into my other machine and the problem is almost the same. IntelliSense works, but syntax highlighting is broken:

Coloring in tooltips seems to be fine, but in the editor it is messed up:

• constructor keyword is a type
• new keyword is black
• as keyword is black
• namespaces are colorized as types
• member functions are types and so on...

Another one:

Another one:

I can see 6 node.js processes running, but can't determine which one is running what, but it seems like none of them is restarting continuously.

For the NPM errors: I reported it to the VS team, this is the only error I can see in the Event Log. It looks like it is related to the Solution Explorer and not TypeScript. It was just part of the "nothing works" experience at first sight.

[billti]

I'm still trying to repro based on the snippets of text in the screen shots above, but it's working fine for me, and not at all as your clippings show.

The weird thing is, it's obviously parsing the tokens and coloring them somehow (i.e. you're not just getting a basic text editor all one color), and most of the colorization is controlled by a grammar file which would be the same for both of us.

A few questions:

1. Are these clean installs or VS 2017? There was a bug previously where the grammar cache was getting corrupted, but if these aren't build-to-build upgrades (e.g. RC1 -> RTM), then that shouldn't be an issue.
2. Did you resolve your other issues? I see on the issue you linked things were crashing elsewhere if opening directly from source control. Does this repro if you just open a basic individual file from the local disk (e..g C:\temp\scratch.ts)?
3. Are these files with a .ts extension? i.e. you are not using some other extension to indicate a template file (e.g. "ng.component") or similar that would confuse the grammar (which is chosen based on file extension).
4. Do you have any other VS extensions installed which may be interfering with colorization?
5. Is it possible VS has tried to migrate some roaming settings which is messing things up? (i.e. if you don't sign in to VS with your account, but choose the "maybe later" option, then it won't try and sync settings from other installs).
6. If none of the above helps - are you able to send me a full sample that shows this problem. It may be something more complex further up in your files that is messing up the grammar parsing further down.

Sorry for the issues you are hitting. Thanks for helping us figure them out.

[Peter-Juhasz]

1. Yes. Personal machine: clean install, work machine: I had the latest RC installed, which I uninstalled for sure before installing the new version a few days ago.
2. a) Yes, I could find a workaround for constant crashes, but it is related to source control. b) Yes, I can reproduce it by opening a standalone file which is not part of a project and there is no tsconfig nearby.
3. Yes, all of my files have .ts extension.
4. No, only what VS has installed by itself.
5. Yes, I have logged in to VS2017 with my previous accounts from VS2015. I use my personal account for my personal computer and my work account for my work computer. So, I use two different accounts, but both can reproduce the issue in two different environments.
6. I can reproduce it by opening a new web application project or a standalone file as well. But I can have a screen share with you, or send some more info if it helps.

Another interesting thing is that I can't even find the classification types under Options \ Environment \ Fonts and Colors.

[Tragetaschen]

Coming from #14422:

1. Yes clean install. This machine hasn't seen any of the VS 2017 previews
3. Yes, normal *.ts files
4. I'm not entirely sure, because @madskristensen's Web Essentials 2017 contain a lot of stuff :)
5. On a different computer, I had tried the previews of VS 2017 with my Microsoft ID. VS 2015 has been connected to this ID as well
6. See Partial loss of Syntax highlighting when updating to Visual Studio 2017 RC #14422

[jramsay]

@Peter-Juhasz : Thanks for helping us with this issue! TypeScript & JavaScript now use TextMate language files to inform classification. Some additional things to try that might help isolate the issue:

1. Your first screen shot with the completion list doesn’t appear to be a TypeScript completion list. Instead this looks like the naïve TextMate completion list that should only kick in when the TypeScript LS isn’t installed correctly. Can you confirm that other TSLS features are working correctly on your installations? (TypeScript navigation bar, formatting, etc)

2. There is a known issue with TextMate support in VS where sometimes there are missing colors. To make sure this isn’t the case here can you try running the following from a VS Developer cmd prompt to see if it resolves the issue:
   • devenv.exe /updateconfiguration
   • devenv.exe /setup

3. What is your VS installation directory?
   Ex: C:\Program Files[ (x86)]\Microsoft Visual Studio 15.0\Common7\IDE

4. Does the tmLanguage folder exist under the TypeScript installation path?
   Ex: C:\Program Files\Microsoft Visual Studio 15.0\Common\IDE\CommonExtensions\Microsoft\TypeScript\tmLanguage

5. Do you have any custom grammar files (.tmLanguage, .tmTheme) located in your user profile?
   Ex: %userprofile%.vs\Extensions

6. Can you verify this isn’t a TM language caching issue:
   - Close VS
   - Go to the TexMateCache location:
   - %localappdata%\Microsoft\VisualStudio[15.0XXXXX]\TextMateCache
   - Delete all the .cache files in this directory
   - Reopen VS and try to repro

    Does this resolve the issue?
   

7. Do you have the TypeScript TextMate registry key set correctly?

   • Close VS
   • Open regedit
   • Select HKLM
   • File > Load Hive …
   • Open %localappdata%\Microsoft\VisualStudio\15.0_xxx\privateregistry.bin (you can name the hive VS)
   • Now navigate to:
     Computer\HKEY_LOCAL_MACHINE\VS\Software\Microsoft\VisualStudio\15[XXXXX]_Config\TextMate\Repositories

Does the TypeScript reg key exist? The directory should match the tmLanguage folder path from question #2 – is it the same?

Note: you'll need to unload the hive (File > Unload Hive) before you can open VS again.

[Peter-Juhasz]

1. Yes, all other language service features seems to be working, except syntax highlighting.
2. No, unfortunately it did not helped.
3. C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE
4. Yes, it exists with 4 files: "TypeScript.tmLanguage", "TypeScript.tmTheme", "TypeScriptReact.tmLanguage", "TypeScriptReact.tmTheme" from 3/7/2017, the date I installed VS2017.
5. Yes, there are a lot. They have probably came with Mads' Syntax Highlighting Pack. I did not installed any extensions at first to VS2017, but it seems like this folder is shared between all VS versions, including my previous installation 2015. It has a "typescript" folder and a "syntaxes" in it. And two files in that folder: "TypeScript.tmLanguage" and "TypeScriptReact.tmLanguage" from 2/3/2017.
6. No, unfortunately the problem still exists.
7. Yes, the key matches: "C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\CommonExtensions\Microsoft\TypeScript\tmLanguage"

[Peter-Juhasz]

As you can see completion and syntax highlighting uses a different understanding of the code:

I have also installed Mads' extension for extension development which shows classification of spans the caret is positioned to. A few examples:

I said tooltips work as expected, but there all problems with tooltips too, there is no consistency in syntax highlighting:

[Peter-Juhasz]

Solution: Overwrite files in "%userprofile%.vs\Extensions\typescript\syntaxes" with the ones from Visual Studio's "CommonExtensions\Microsoft\TypeScript\tmLanguage". It fixed syntax highlighting in the editor.

Root cause: I must have installed the Syntax Highlighting Pack (with Web Essentials) or any other semi-official extension in the past which have pre-populated my Extensions folder with some basic/outdated syntax definitions for TypeScript. I don't know whether both definitions are effective or only the one in the Extensions folder, but the ones installed with the TypeScript SDK are definitely not.

Real solution: The TypeScript language service should force its own grammar over any other installed TextMate definitions.

Check: It works pretty much better, so I think my issue is resolved now, but let me check whether these findings are intended behaviors, known issues or is something still wrong with my setup:

1. Tool tips are still not colorized correctly. Look at the last screenshot in my last post, HTMLElement is colorized as an identifier and not as a type. It also occurs with Date.
2. String interpolation braces (including '$') are colorized as keywords.

[Tragetaschen]

It looks like the TypeScript syntax highlighting from the Syntax Highlighting Pack extensions overrides the installed one from VS.

See #14422 (comment) for the steps necessary to remove the extension.

[billti]

See the last few comments from #14422 (comment) . The Syntax Highlighting pack from @madskristensen was the root cause here.

[ghost]

Ctrl+Space Bar not working. Another bug...

[XerO00]

@Peter-Juhasz @mhegazy @billti @jramsay @Tragetaschen @

Hello All!...

I am having problem with my angular 2 app while loading due to my zone.js.. whereas I have 0.8.20
Version and not able to implement this correctly into my app.. can you please suggest latest version and correct way to implementing it to project.

Also I have problem with my typescript running on version "^2.8.0-dev.20180308" and problem is I have to convert my example.ts file into example.js by typing command into cmd manually... Can you please suggest how to make typescript work automatically to do conversion of example.ts file into example.js

Added all the files used in my project are pasted here angular/quickstart#384

Thanks in advance!! Please let me know if any help needed.

[IanYates]

I've had very similar issues to this in the past fortnight - changes are that I upgraded to latest official release of TypeScript and also applied VS 2017 releases as they've arrived.
Another dev here (the only other dev) has the exact same issue.

We can make some changes in some TS files, but certain changes, I guess where we leave an open brace too long perhaps, causes TS to want to recompile every file in the project. Only once that's done do we actually get intellisense back. The syntax highlighting also goes out the window - words are highlighted across boundaries. It's almost as though text offsets for highlighting and intellisense are not in sync with the actual text in the editor.

It takes a good minute or so to get back in to sync, which has become a huge drain on productivity.

I know I have some of the Web Essentials & related plugins installed but don't really use them so I'll try to remove them and see. I suspect the other dev here though hasn't ever installed any of those extensions.

[RyanCavanaugh]

@IanYates question for you - are you seeing the tsserver (it's hosted by node.exe) process die and restart under a new process id when this all happens? We're tracking an issue with vaguely similar symptoms and would like to know if it's the same thing.

You can also try building tsserver.js from the current release-2.8 branch, dropping it in place over the current version in C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.8 and seeing if that fixes the issue.

[ehsanmajd]

I have similar problem.
I'm using VS 2017 version 15.6.5 and typescript 2.5.
After pressing Ctrl S on a tsx file suddenly, intellisense will be gone.

Firstly:

After pressing Ctrl S

[ehsanmajd]

After setting compileOnSave to false, problem was resolved.