Doesn't work in Visual Studio 2017 15.7.4 with TypeScript SDK 2.9.2 installed

[KeithHenry]

I have a Visual Studio 2017 project with .ts files that contain html literals.

In my package.json I have:

  "devDependencies": {
    "typescript": "^2.9.2",
    "typescript-lit-html-plugin": "^0.3.1"
  }

In my tsconfig.json I have:

    "plugins": [
      {
        "name": "typescript-lit-html-plugin",
        "tags": [
          "html",
          "svg",
          "raw"
        ]
      }
    ]

When editing .ts files the literals are just strings.

[mjbvz]

Does intellisense not work? Or is just the syntax highlighting missing?

I don't work with regular VS very often so someone else will probably have to take a look at this.

[justinribeiro]

I'm having a hard time duplicating this. Can you detail your setup a little more?

The steps I followed:

1. Install Visual Studio Community 2017, v15.7.4
2. Added ASP.net and Web Development workload through Visual Studio installer
3. Installed Typescript SDK for Visual Studio 2.9.2 via Microsoft download.
4. Started sample project.
5. Add tsconfig.json:

   { 
   "compilerOptions": {
   "plugins": [
     {
       "name": "typescript-lit-html-plugin",
       "tags": [ "html", "svg", "raw" ]
     }
     ]
   }
   }

6. Run npm install --save-dev typescript-lit-html-plugin in solution folder.
7. Close Solution and re-open.
8. Test lntellisense, seems to be working as expected (see screenshot).

[KeithHenry]

I'm on VS Pro 15.7.4, rather than community. Steps 1-3 are similar.

However, I have an existing project rather than a fresh empty one, and my tsconfig.json is in a subfolder rather than the project root (the project is an ASP.NET Core app).

My tsconfig.json has a lot of additional settings, but no other plugins. Are there other settings that can interfere with this?

For step 6 I'm using Yarn, rather than npm, as I need to flatten the modules needed by the web. I'm putting all the modules into a subfolder (configured in .yarnrc) called lib rather than node_modules - could that be the problem? Does this assume that it will be in node_modules?

What else could I be missing?

[justinribeiro]

Appreciate the detail @KeithHenry. I'm away from my desk today but I'll try a similar setup and see if I can track down what the issue might be tomorrow.

[justinribeiro]

Unfortunately, I'm still having issues duplicating this given your additional information. I setup a fresh ASP.NET Core app (MVC) solution in VS and then did the following steps to match

1. Set yarn prefs for modules-folder set to lib
2. Added tsconfig.json in a subfolder called ts
3. Ran yarn add typescript-lit-html-plugin
4. Close and re-open solution
5. Added a typescript file in the subdirectory where tsconfig.json lives.
6. Attempted intellisense as seen below.

The only way I've been able to break it is by not putting plugins into the compilerOptions within tsconfig.json.

[JNotelddim]

I'm having a similar issue to @KeithHenry

I'm working on an existing project so I unfortunately can't just start with a fresh project. versions:

Visual Studio Enterprise 2017 - 15.7.5

Workloads: .NET desktop development ASP.NET and web development Azure development Office/SharePoint development

SDK Typescript SDK 3.2.2.0.

my tsconfig.json:

  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "amd",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "sourceRoot": "src",
    "sourceMap": true,
    "allowJs": false,
    "baseUrl": "src",
    "skipLibCheck": true,
    "lib": [
      "es2017",
      "dom"
    ],
    "plugins": [
      {
        "name": "typescript-lit-html-plugin",
        "tags": [ "html", "template" ]
      }
    ]
  },
  "exclude": [
    "node_modules",
    "aurelia_project",
      "cypress"
  ],
  "filesGlob": [
    "./src/**/*.ts",
    "./test/**/*.ts",
    "./custom_typings/**/*.d.ts"
  ],
  "atom": {
    "rewriteTsconfig": false
  }
}

I installed the plugin with:

npm install --save-dev typescript-lit-html-plugin

I also tried

npm install --save-dev lit-html

to see if that'd get things working - but when it didn't help I uninstalled it with

npm uninstall --save-dev lit-html

I'm not getting any syntax highlighting or intellisense for inline html. I've tried with and without lit-html installed. I try unloading/reloading the project and when that doesn't work I try exiting and re-opening Visual Studio.

Am I completely off-track here? Perhaps I'm not even looking in the right place? Any help is appreciated,

[mjbvz]

This plugin only provides intellisense, not syntax highlighting. I'm not sure if there are any syntax highlighting solutions for regular VS

Can you manually trigger intellisense (ctrl + space I think for VS?) Also, what project type are you using?

[JNotelddim]

Ah sorry yeah I misunderstood the prior discussion and though it was implying there should be syntax highlighting. That being said I'm not getting any of the functionality described:

Quick info hovers on tags.
Formatting support.
Auto closing tags.
Folding html.
CSS completions in style blocks.

None of the manual intellisense commands I can find are doing anything within the html template. tried: CTRL + Shift + Space (parameter info), CTRL + Space (complete word),CTRL + J (list members), CTRL + I (quick info)

It's a Web Application project on .NET Core 2.1

[mjbvz]

@amcasey Are TypeScript plugins supported in that type of visual studio project?

[amcasey]

@mjbvz I don't think VS does anything special for TS plugins specified in tsconfig.json (rather than in msbuild). The main impact VS would have on this scenario is probably in determining which source files are associated with which tsconfig.json. The easiest way to check is to set this option:

Once you reload the solution, the Solution Explorer will have nodes showing the project structure. If you want, you can share a screenshot of the structure (expanded to show the tsconfig.json enabling the plugin and the TS file with issues) and I'll take a look.

[JNotelddim]

@amcasey ,thank you - sorry it's not well organized.

here's the solution explorer section which popped up when i enabled 'Display Virtual Projects ...' it's too far down to see in the other screenshots.

[amcasey]

@JNotelddim Is the tsconfig.json in the last screenshot (11th item) the same one as in the second screenshot? Also, if you scroll up to the containing project node (in the virtual projects view - third screenshot), does it say something like "configured project" or "tsconfig project" (I suspect so)?

[JNotelddim]

@amcasey yes, when I try to open that tsconfig.json from the last screenshot, it just opens the one from the second screenshot, so i figure they're the same.

and it shows "(tsconfig or jsconfig project)" 👍

[amcasey]

@JNotelddim, I think that's everything VS controls, so the next step will be to get a server log. These steps explain how: https://billti.github.io/jsdocs/articles/troubleshooting/index.html#enable-detailed-language-service-logging

One small change: can you please replace tsserver.log with tsserver.PID.log

[JNotelddim]

@amcasey here's the resulting log file. It grew quite quickly but I figure you know what you're looking for :P Lemme know if you need me to redo it though

tsserver.8036.log

[amcasey]

This looks bad:

00098 Info 77   [10:32:58.389] Enabling plugin typescript-lit-html-plugin from candidate paths: c:/users/jared/documents/waterworth/src/webuifinal,C:/Program Files (x86)/Microsoft SDKs/TypeScript/3.2/tsserver.js/../../..
00099 Info 78   [10:32:58.389] Loading typescript-lit-html-plugin from c:/users/jared/documents/waterworth/src/webuifinal (resolved to c:/users/jared/documents/waterworth/src/webuifinal/node_modules)
00100 Info 79   [10:32:58.804] Failed to load module 'typescript-lit-html-plugin': SyntaxError: Unexpected token {

Unfortunately, we don't have a location for the syntax error. However, it seems like it could be in the plugin module. @mjbvz?

[amcasey]

Oh, I take it back. It looks like we have some line numbers from upstream modules:

00108     at Object.<anonymous> (c:\users\jared\documents\waterworth\src\webuifinal\node_modules\typescript-styled-plugin\lib\_language-service.js:8:29)
00115     at Object.<anonymous> (c:\users\jared\documents\waterworth\src\webuifinal\node_modules\typescript-styled-plugin\lib\api.js:6:27)
00122     at Object.<anonymous> (c:\users\jared\documents\waterworth\src\webuifinal\node_modules\typescript-lit-html-plugin\lib\index.js:6:15)

[mjbvz]

@amcasey What version of node does visual studio ship with? The error:

Info 79   [10:32:58.804] Failed to load module 'typescript-lit-html-plugin': SyntaxError: Unexpected token {

suggests unsupported syntax

[amcasey]

15.7.5 still had node 5. I believe 15.8 was the first version to include node 10.

[mjbvz]

Ok, that would explain it. This extension targets es2016 so that we generate more efficient code.

@JNotelddim Can you test if the plugin works on VS 15.8?

[amcasey]

@JNotelddim Sorry for the confusion - "dev15" is the internal name for VS 2017. Matt meant "Visual Studio 2017 version 15.8".

[JNotelddim]

@amcasey sorry, yeah i realized my mistake soon after i posted that and deleted my comment.

I got sidetracked but, I updated to 15.9.4 (I couldn't find an easy way to just go to 15.8) and the plugin is working! :) (auto-closing tags and formatting support still doesn't seem to be working - but intellisense, folding, and quickinfo are!)

Thanks a bunch for both of your guys' help!

[mjbvz]

Thanks for the follow up. I've documented the required VS version