Skip to content
[WIP] 💎 A Prettier plugin for prettify Twig files
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
playground
src
tests
tests_config
.appveyor.yml
.gitignore
.releaserc
.travis.yml
LICENSE.md
README.md
package.json
yarn.lock

README.md

Prettier plugin for Twig

npm (scoped) Build Status Build status

WORK IN PROGRESS

The plugin is still under development, nothing will work if you try to install it now! :)

Roadmap

Type Example  Implemented
 AUTO_ESCAPE {% autoescape 'html' %}Foo{% endautoescape %}
 BLOCK {% block title%}The title{% endblock %}
 DEPRECATED {% deprecated 'The "base.twig" template is deprecated' %}
 DO {% do 1 + 2 %}
 EXPRESSION_ARRAY [1, 'foo', 3], { a: 'a': b: 'b' } ✔️
 EXPRESSION_ASSIGN_NAME ...
 EXPRESSION_BINARY ...
 EXPRESSION_BINARY_RANGE ...
 EXPRESSION_BLOCK_REFERENCE ...
 EXPRESSION_CONDITIONAL ...
 EXPRESSION_CONSTANT "foo", 123 ✔️
 EXPRESSION_FILTER ...
 EXPRESSION_FUNCTION ...
 EXPRESSION_GET_ATTR Accessing an attribute, e.g.: foo.bar, foo[bar], foo.getBar() ✔️
 EXPRESSION_METHOD_CALL ...
 EXPRESSION_NAME Usage of a variable ✔️
 EXPRESSION_NULL_COALESCE ...
 EXPRESSION_PARENT ...
 EXPRESSION_TEST ...
 EXPRESSION_UNARY ...
 EXPRESSION_UNARY_NEG ...
 EXPRESSION_UNARY_POS ...
 FLUSH {% flush %}
 FOR {% for i in 0..10 %} ... {% endfor %}
 IF {% if a > b %} ... {% endif %}
 IMPORT {% import 'forms.html' as forms %}
 INCLUDE {% include 'user.html' %}
 MACRO {% macro input(name, value, type = "text", size = 20) %} ... {% endmacro %}
 SANDBOX {% sandbox %} {% include 'user.html' %} {% endsandbox %}
 PRINT {{ 'foo' }} ✔️ (waiting for {{- and -}})
 SET {% set a = 'a' %} {% set a, b, = 'a', 'b' %} ✔️
 SPACELESS {% spaceless %}<div> <span>Hello</span> </div>{% endspaceless %}
 TEXT "some text"
 WITH {% with { foo: 42 } %} foo: {{ foo }} {% endwith %}

Install

yarn:

yarn add --dev prettier @kocal/prettier-plugin-twig

npm:

npm install --save-dev prettier @kocal/prettier-plugin-twig

Use

With Node.js

You can add prettier as a script in your package.json,

{
  "scripts": {
    "prettier": "prettier"
  }
}

Note: if you use Prettier 1.16 or a previous version, you have to manually specify the path to the plugin:

{
  "scripts": {
    "prettier": "prettier --plugin=node_modules/@kocal/prettier-plugin-twig"
  }
}

and then run it via

yarn run prettier path/to/file.twig --write
# or
npm run prettier -- path/to/file.twig --write

In the Browser

This package exposes a standalone.js that can be used alongside Prettier's own standalone.js to make the Twig plugin work in browsers without a compile step.

First, grab both standalone scripts from an npm CDN like unpkg:

<script src="https://unpkg.com/prettier/standalone.js"></script>
<script src="https://cdn.jsdelivr.net/npm/twing/dist/lib.min.js"></script>
<script src="https://unpkg.com/@kocal/prettier-plugin-twig/standalone.js"></script>

Then use Prettier with Twig, just like this:

prettier.format(YOUR_CODE, {
  plugins: prettierPlugins,
  parser: "twig"
});
You can’t perform that action at this time.