Jade like syntax highlighting of .pug files Visual Studio 2015

Question

This maybe a really silly question, but I've can't find any option to make it work.

Following the recent change of the npm package name from jade to pug, i've gone around and changed all the .jade files in my projects to .pug - as the package demands.

This has caused a niggling issue - the jade syntax is not highlighted in .pug files. What is more, I can't find the option to add jade editing experience to .pug extension files in VS15.

Anyone worked out how to make it work?

Answer 1

Right-click on the .pug file in Solution Explorer, select "Open With", then choose the Jade editor.

Also, if you want your indentation in .pug/.jade files to be 2 spaces instead of 4 to match the Pug documentation and examples, you can go to Tools > Options > Text Editor > Jade > Tabs, and then set "Tab size" and "Indent size" to 2.

Answer 2

user1257979 came with better solution: https://stackoverflow.com/a/38153085/5647513

---

My hackish solution:

You can use .jade extension with pug if you reference files via full filename like extends layout.jade.

If you use Express framework, you should also set render engine at express initialization:

app.set('view engine', 'jade');
app.engine('jade', require('pug').__express);

UPDATE: You also can add post build action to copy all *.jade files to *.pug.

Add postBuild.bat to root of your project containing:

@cd views
@FOR %%F IN ( *.jade ) DO @( @echo Emited %%~nF.pug && @copy %%F %%~nF.pug >nul )
@cd ..

And add post build action to .njsproj right before

<Import Project="$(VSToolsPath)\Node.js Tools\Microsoft.NodejsTools.targets" />

  <!-- PostBuild Step-->
  <PropertyGroup>
    <PostBuildEvent>
      .\postBuild.bat
    </PostBuildEvent>
  </PropertyGroup>