Peter Coghill Peter Coghill - 4 months ago 101
Jade Question

Jade like syntax highlighting of .pug files Visual Studio 2015

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.

enter image description here

Anyone worked out how to make it work?

Answer

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>