How to make Webstorm IDE support nunjucks grammar?

[yuyang041060120]

I can not format my code by Webstorm which looks like terrible.How to fix it ?

[waynebloss]

You can try making nunjucks mimic a language that WebStorm does support, by setting the tags option.

[ricordisamoa]

Or just use an IDE that supports Jinja2 templates. If you're stuck with JetBrains, PyCharm could suit you.

[yuyang041060120]

I've tried these,but It's not much helpful!

[ricordisamoa]

Duplicate of #431?

[dariuszp]

That's pretty easy.

1. Configure your app to use custom extension. In my case I used *.nunj. You need custom extension so IDE can recognize template files.
2. Go to File -> Settings -> Editor -> File Types
3. Find Twig, it's identical template engine but for PHP and add custom extension. click green plus and type *.nunj. Now all *.nunj files are parsed as Twig so in the end - support Nunjucks.

Example of my configuration:

module.exports = function (app, nunjucks, dir) {

    app.set('views', dir.views);
    app.set('view engine', 'nunj');
    app.set('view cache', app.get('env') === 'production');
    nunjucks.configure('views', {
        autoescape: true,
        express: app
    });

    app.use(function (req, res, next) {
        res.locals.user = req.session.user || false;
        next();
    });

};

Works like a charm :-) I switched from Swig that is no longer maintained to this one in no time.

[yuyang041060120]

I use Webstorm 10.0.
I can't find Twig. All my files started with T are there.

I can't find any Twig plugins.

[dariuszp]

Oh. My bad. I use phpstorm and there is twig support by default and plugin in repository. I understand that phpstorm plugin won't work with webstorm? Then I can't help you. You can try to install plugin from disk.

[yuyang041060120]

@dariuszp I download Twig from PhpStorm Plugins. Then I install it to WebStorm.I works! Wonderful !

Thank you!

[dariuszp]

I'm glad that I could help. Good luck.

[cmdelatorre]

Hi there, I get the following message trying to do it:
"Plugin Twig Support is incompatible with current installation"

ideas?

[dariuszp]

Old webstorm? Can you provide any details?

[cmdelatorre]

Webstorm 8.0.4

[jlongster]

@cmdelatorre Please file a bug on the appropriate repo (perhaps the twig plugin?), thanks!

[jlongster]

(feel free to keep discussing it here if desired, but I'd like to close the bug)

[cmdelatorre]

Sure, no worries.

[tammyd]

Just to help anyone else out who ends up here looking for an answer, I was able to download the intellij twig plugin and install it manually into the latest webstorm. It seems to work.

[gabriel-alecu]

Also, you don't need to install it manually.

You can install Twig in WebStorm from File > Settings > Plugins > Install JetBrains plugin,
and then you look for "Twig Support" in the list.

[ylei0514]

i found just install twig is not use,you should do this
preference-> Editor-> File Types find Twig (you should install before),then add *.nunjucks at the under block , then apply

Then you will find your nunjucks code changed

[MehmetNuri]

[dex1n]

I come from 2018 with a Mac...
In WebStorm 2018.3 for Mac, you can install Twig from WebStorm > Preferences > Plugins and then look for "Twig Support" in the marketplace. With Twig installed, you can tell it to highlight your nunjucks file through the way showed in @MehmetNuri's screenshot.
Thanks all. Meow~

[codereviewvideos]

This appears to crash Webstorm 2020.3 EAP due to some missing PHP string dependency.

[pizzavore]

Webstorm 2022.1.2

A suitable workaround for me was to highlight the Nunjucks (*.njk) files as if they are HTML.

Go to Settings -> Editor -> File Types
Select "HTML" and add *.njk to the list of file extensions.

It may not be perfect, but for me, it's way better than nothing.

[benabraham]

WebStorm 2022.1.3, right click on any .njk file > Associate with File Type…, choose Twig and done.

(Plugin is available from JetBrains https://plugins.jetbrains.com/plugin/7303-twig)