[Bug] Pug syntax highlighting broken in latest VS Code version

[aeschli]

From @Dan503 on August 24, 2018 13:33

Issue Type: Bug

I have this pug markup and it isn't being highlighted correctly

each markup, type in demoMarkup
  if type === 'js'
    .grid__cell(class=type)
      each js, jsType in markup
        if (jsType === 'es5')
          details.o-demo__details.o-demo__es5
            summary ES5 Syntax
            .o-demo__markup
              pre
                code(class=type)= js
        else
          .o-demo__markup.o-demo__segment.js(class=jsType)
            pre
              code(class=type)= js
  else if (type === 'html' && spec.showHTML || type !== 'html')
    - markup = type === 'html' ? html : markup;
    .grid__cell.o-demo__markup.o-demo__segment(class=type)
      pre
        code(class=type)= markup

This is how it is being highlighted:

VS Code version: Code 1.26.1 (493869ee8e8a846b0855873886fc79d480d342de, 2018-08-16T18:38:57.434Z) OS version: Windows_NT x64 10.0.17134

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz (8 x 3998)| |GPU Status|2d_canvas: enabled
checker_imaging: disabled_off
flash_3d: enabled
flash_stage3d: enabled
flash_stage3d_baseline: enabled
gpu_compositing: enabled
multiple_raster_threads: enabled_on
native_gpu_memory_buffers: disabled_software
rasterization: enabled
video_decode: enabled
video_encode: enabled
webgl: enabled
webgl2: enabled| |Memory (System)|15.94GB (8.67GB free)| |Process Argv|C:\Users\Administrator\AppData\Local\Programs\Microsoft VS Code\Code.exe| |Screen Reader|no| |VM|0%|

Extensions (26)

Extension|Author (truncated)|Version ---|---|--- Bookmarks|ale|9.0.3 vscode-twig-pack|baj|1.0.0 npm-intellisense|chr|1.3.0 path-intellisense|chr|1.4.2 bracket-pair-colorizer|Coe|1.0.59 vscode-svgviewer|css|1.4.4 gitlens|eam|8.5.6 auto-close-tag|for|0.5.6 auto-rename-tag|for|0.0.15 code-runner|for|0.9.4 beautify|Hoo|1.3.2 RelativePath|jak|1.4.0 vscode-phpfmt|kok|1.0.30 vscode-regexp-preivew|le0|0.0.3 VS-code-drupal|mar|0.0.12 vscode-scss|mrm|0.6.2 debugger-for-chrome|msj|4.8.2 autotrim|Nat|1.0.6 format-html-in-php|rif|1.3.4 code-settings-sync|Sha|3.0.0 code-spell-checker|str|1.6.10 pdf|tom|0.3.0 quokka-vscode|Wal|1.0.141 vscode-import-cost|wix|2.8.0 html2jade|wma|0.2.0 markdown-all-in-one|yzh|1.6.0 (4 theme extensions excluded)

Copied from original issue: Microsoft/vscode#57152

[aeschli]

From @lzlptk on September 2, 2018 19:41

Using a filter in a tag breaks the syntax highlighting inside it.

script
    :uglify-js
        WebFont.load({
            google: {
                "families": ["Poppins:300,400,500,600,700", "Roboto:300,400,500,600,700"]
            },
            active: function() {
                sessionStorage.fonts = true;
            }
        });

Without a filter it looks good.

VS Code version: Code 1.26.1 (493869ee8e8a846b0855873886fc79d480d342de, 2018-08-16T18:34:20.517Z) OS version: Linux x64 4.15.0-33-generic

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i5-2500K CPU @ 3.30GHz (4 x 1975)| |GPU Status|2d_canvas: unavailable_software
checker_imaging: disabled_off
flash_3d: unavailable_software
flash_stage3d: unavailable_software
flash_stage3d_baseline: unavailable_software
gpu_compositing: unavailable_software
multiple_raster_threads: enabled_on
native_gpu_memory_buffers: disabled_software
rasterization: unavailable_software
video_decode: unavailable_software
video_encode: unavailable_software
webgl: enabled_readback
webgl2: unavailable_off| |Load (avg)|0, 1, 1| |Memory (System)|7.69GB (0.69GB free)| |Process Argv|/usr/share/code/code --unity-launch| |Screen Reader|no| |VM|0%|

Extensions (2)

Extension|Author (truncated)|Version ---|---|--- vscode-icons|rob|7.25.0 code-settings-sync|Sha|3.1.1 (1 theme extensions excluded)

[flemings]

Any update or work around for this issue?

[flemings]

Any update or work around for this issue?

[lunelson]

@aeschli this is happening because the filter name needs to be mapped to a source type. In the example above, :uglify-js changes the source type to "generic" because the name "uglify-js" does not correspond to any known syntax name in any way, and "generic" is the fallback.

I made a PR to partly fix this for Sass and Markdown nearly a year ago but I don't think it's going to move. I believe the best solution for vscode would be to patch the tmLanguage so that filters whose names match vscode recognized file extensions or syntax names would be understood as that syntax (source type). Otherwise the tmLanguage def is very good as is and works well in vscode in every other pug syntax situation I've thrown at it (I use pug a lot); but it still wouldn't cover every case because filter names are not standardized in pug. The best we could do is cover common variants like scss, es, jsx, md/mdown etc. I've got it working in Sublime Text which has an extension for developing tmLanguage files with live feedback. Not sure how to go about it in vscode though.

[Dan503]

That helps with the second problem. It doesn't help with the first problem though.

[lunelson]

@Dan503 The first problem seems to be due to the use of the word type as a variable name. If I change it to t or anything else it works:

[lunelson]

...which doesn't mean it's not a bug of course. It shouldn't break, as type alone is not a reserved word, but perhaps it's partially matching typeof

[msftrncs]

the word type is being scoped by the included source.js, would be a common JS keyword (maybe recently added to the language?). Are JS keywords reserved in PUG?

[Upd4ting]

Any update on this issue ?

[Upd4ting]

Any of you found a workaround?

[flemings]

Any possible solutions?

[lunelson]

I believe vscode needs to fork this package and take it over, to do these fixes. IIRC there might already be an issue there about this?

[davidrios]

See #10.

[davidrios]

Better late than never 😂