Using Prettier with Twig in VS Code

Auto-formatting code is an absolute necessity for me. This article has been updated multiple times so far throughout the years as packages change

Posted 8th July 2020 • #development

UPDATE February 2025

The Prettier for Melody plugin has been forked to work with Prettier 3, and it's also now compatible with Tailwind's class sorting plugin.

You can find a working example of these articles in my boilerplate Craft site repository.

This article is about how to get code formatting working for Twig in Visual Studio Code. You'll need these:

If you're managing your project with npm, you can add these lines to package.json, then run (ddev) npm install from the command line to install them in your project.

"devDependencies": {
    "@zackad/prettier-plugin-twig": "^0.14.1",
    "prettier": "^3.2.5",
},

The first thing you'll want to do is define how Prettier should format your code. You'll do this by adding a .prettierrc.json file in the root of your project. There are are some useful options for Twig files:

{
	"useTabs": true,
	"tabWidth": 3,
	"semi": false,
	"singleQuote": true,
	"twigSingleQuote": true,
	"printWidth": 120,

	"twigMultiTags": [
		"nav,endnav",
		"switch,case,default,endswitch",
		"ifchildren,endifchildren",
		"cache,endcache",
		"js,endjs"
	],

	"plugins": [
		"@zackad/prettier-plugin-twig",
	]
}

You can also specify ignore rules by creating a .prettierignore file in the root of your project, which uses the gitignore syntax. These only take effect if you're running Prettier from the command line to format your whole project at once.

# COMPOSER
/vendor

# CRAFT STORAGE
/storage/*

# Document root
/web/*

# BUILD FILES
/bower_components/*
/node_modules/*
/build/*
/yarn-error.log

You should also set up VS Code to format files on save, set the default formatter, and add some default configuration.

{
	// Make VS Code format files when you save them automatically
	"editor.formatOnSave": true,

	// ?  FORMATTERS
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"[twig]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},

	// Prettier defaults
	"prettier.tabWidth": 3,
	"prettier.useTabs": true,
	"prettier.singleQuote": true,
	"prettier.printWidth": 120,
}

And that's it! Your twig files will now be automatically formatted when you save them.

If you want to format everything at once, you can also run Prettier on the whole template directory by running npx prettier --write "templates/**/*.twig"

If you run into parser errors, you may find it's because the plugin doesn't support inline{% if %} statements within HTML tags. To get around this, you'll need to use the ternary conditional syntax within html tags. See this GitHub issue for more info.

There are still some things that don't get formatted correctly with this setup. Notably, using things like Craft's JavaScript tag in twig files using {% js %} will format the JavaScript incorrectly and probably break it (especially if there are comments in it). The Prettier Plugin for Twig comes with a useful feature for dealing with this; and lets you wrap any code you don't want to format with two comments:

{# prettier-ignore-start #} and {# prettier-ignore-end #}

Doing that will ignore the section inside those comments, but still format everything else correctly on save.

Want to know more?

I hope you found this useful. If you've got any questions about how this all works or would like to work together, I'd love to hear from you.

Get in touch