11

Does anyone know how to make Craft by default use .twig extensions. It helps IDEs better understand Twig blocks. I have tried .twig and .html.twig but it doesn't appear to work by default.

I don't want to set up special configs for every template.

carlcs
  • 36,220
  • 5
  • 62
  • 139
Cristian
  • 111
  • 1
  • 3
  • It works now fine with renaming all files to .twig extension. No ideea why it did not work. Can be closed – Cristian May 19 '16 at 10:39

2 Answers2

12

Craft does already support .twig as a template file extension option by default (see the defaultTemplateExtensions config setting docs). If you want to allow .html.twig as well, just open craft/config/general.php and add this to the config array:

'defaultTemplateExtensions' => array('html', 'twig', 'html.twig'),

(Note that this will only affect front-end templates. The Control Panel is locked to .html and .twig for plugins.)

Brandon Kelly
  • 34,307
  • 2
  • 71
  • 137
6

Why do you want to use a .twig extension? The official Twig documentation uses .html, P&T use .html in the Craft codebase and in the Craft documentation. I would say .html is the standard for Craft template files.

Most editors can be configured to load the Twig language / syntax parser for files with other extensions then .twig

Configuration instructions for some popular editors and IDEs:

  • Sublime Text (“Open all with current extension as...” setting)
  • Atom Editor (add extension to text.html.twig language)
  • Visual Studio Code (add extension to files.associations setting)
  • PHPStorm (Preferences > Editor > File Types > Twig; also enable all Twig live templates for HTML in Preferences > Editor > Live Templates)
carlcs
  • 36,220
  • 5
  • 62
  • 139
  • 7
    I concur that .html is the default, but I personally prefer .twig. It's more clear; the template files aren't actually HTML files, they are Twig files. Also, using .twig means most IDEs will use Twig syntax highlighting by default (as long as it is installed), without any additional effort. Also, since Craft doesn't require the file extension in {% include %} tags etc., the two are totally interchangeable; there are no drawbacks to using .twig, in my opinion. – Mats Mikkel Rummelhoff May 19 '16 at 12:05
  • 1
    I second Mats opinion. You can also leave off file extensions when specifying templates to use for singles/entries in the control panel - and they will work whether they are HTML or twig filetypes. – Luke Pearce May 19 '16 at 13:15
  • 2
    Hey guys, I didn't say it's bad practice to use .twig nor that there are disadvantages. I just wanted to make the point that it's easy to set up in your editors and because SensioLabs and P&T use .html it could be regarded as the standard that I personally like to conform to. – carlcs May 19 '16 at 13:33
  • 3
    @carlcs We use .twig in Commerce though, just to mess with you :) – Brandon Kelly May 19 '16 at 14:10
  • Worth noting that in Webstorm you can only assign *.html files to one file type, which makes using twig in those a pain. – Bonk Feb 15 '17 at 19:39
  • @Bonk I don’t understand, assign *.html to Twig file type and everything works just fine. And for HTML files where you don’t use Twig, just don’t make use of the Twig specific feature sub-set. – carlcs Feb 15 '17 at 21:37
  • @carlcs I wasn't sure if doing that would cause html specific features to not work so I avoided it by doing the .html.twig setting. If you can get away with assigning it to twig without issue go for it. – Bonk Feb 17 '17 at 20:59
  • More specifically, when you assign *.html to twig I'm still having issues where I can only use twig tag snippet expansion when I'm not inside of any other html tag. So if I'm trying to do a for twig tag it only will print out a <for></for>. Trying to find a fix for this as it makes development a bit frustrating. – Bonk Apr 03 '17 at 14:45
  • 1
    Ok, so the work around I've found for this is in WebStorm/PHPStorm is to go into Preferences > Editor > Live Templates and then set each individual Twig live template to be applicable in HTML. Then In Preferences > Languages & Frameworks > Template Data Languages set your directories containing the template files to HTML in the dropdown on the right( It doesn't show up for me until I clicked in the column). This has solved the issue of no HTML syntax highlighting inside of Twig tags, allows me to keep .html as the files extension, and use the live templates. – Bonk Apr 03 '17 at 15:11
  • 1
    Good find @Bonk, I added that info to the answer. Thanks – carlcs Apr 04 '17 at 08:41