Auto-Complete Craft CMS 3 APIs in Twig with PhpStorm
Tags: phpstorm, autocomplete, craftcms
Published: 2020-02-23 16:59:15

---
title: Auto-Complete Craft CMS 3 APIs in Twig with PhpStorm
published: true
date: 2019-03-17 22:55:00 UTC
tags: phpstorm,auto-complete,craftcms
canonical_url: https://nystudio107.com/blog/auto-complete-craft-cms-3-apis-in-twig-with-phpstorm
---

# Auto-Complete Craft CMS 3 APIs in Twig with PhpStorm

### The Sym­fony plu­g­in com­bined with a lit­tle mag­ic will give you full auto-com­plete of all Craft CMS APIs in your Twig tem­plates with PhpStorm!

Andrew Welch / [nystudio107](https://nystudio107.com)

![Phpstorm-auto-complete-craft-cms-apis-twig](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_992x558_crop_center-center_82_line/2611/phpstorm-auto-complete-craft-cms-apis-twig.jpg)

Php­Storm is a fan­tas­tic edi­tor for devel­op­ing web-based projects as well as back­end projects.

I’ve men­tioned my use of Php­Storm in the [So You Wan­na Make a Craft 3 Plu­g­in?](https://dev.to/gaijinity/so-you-wanna-make-a-craft-3-plugin-76m-temp-slug-4321262) arti­cle, and it’s equal­ly fan­tas­tic when you’re writ­ing fron­tend tem­plates, ES6 JavaScript, and even Twig.

One absolute­ly _amaz­ing_ thing you can do in Php­Storm is get full auto-com­ple­tion of the entire <kbd>craft.</kbd> APIs in your Twig tem­plates, too! To do make the mag­ic hap­pen, install the [Sym­fony plu­g­in](https://plugins.jetbrains.com/plugin/7219-symfony-plugin), then Go to **Pref­er­ences** → **Lan­guages & Frame­works** → **PHP** → **Sym­fony** and check **Enable Plu­g­in for this Project**.

<aside>
                                If you think you’ve seen this before, you prob­a­bly haven’t. Car­ry on, intre­pid reader!
                            </aside>

Then all you need to do is put this inspec­tion hint at the top of your Twig templates:

```

{# @var craft \craft\web\twig\variables\CraftVariable #}

```

…and just like that, you get the same mag­ic auto-com­ple­tion of in your Twig tem­plates that you have in your PHP code. And since the entire Craft appli­ca­tion is avail­able in our Twig tem­plates now, this makes writ­ing Twig code that uses the Craft app APIs so much nicer.

So while this is nice, it can get a bit cum­ber­some to add that com­ment to every sin­gle tem­plate. Would­n’t it be nice if there was a way that we could just add a file to our projects, and it’d all just mag­i­cal­ly work?

<aside>
                                Just by hav­ing Php­Storm index a file, we can get auto-com­plete of everything!
                            </aside>

Turns out, we can! [Robin post­ed an issue](https://github.com/Haehnchen/idea-php-symfony2-plugin/issues/1103) a while back, and end­ed up with an answer from one of the Sym­fony plu­g­in devel­op­ers that works great. Here’s my mod­i­fied ver­sion of the file:

```

<?php
/**
 * FauxTwigExtension for Craft CMS 3.x
 *
 * This is intended to be used with the Symfony Plugin for PhpStorm:
 * https://plugins.jetbrains.com/plugin/7219-symfony-plugin
 *
 * It will provide full auto-complete for craft.app. and and many other useful things
 * in your Twig templates.
 *
 * Documented in the article:
 * https://nystudio107.com/blog/auto-complete-craft-cms-3-apis-in-twig-with-phpstorm
 *
 * Place the file somewhere in your project or include it via PhpStorm Settings -> Include Path.
 * You never call it, it's never included anywhere via PHP directly nor does it affect other
 * classes or Twig in any way. But PhpStorm will index it, and think all those variables
 * are in every single template and thus allows you to use Intellisense auto completion.
 *
 * Thanks to Robin Schambach; for context, see:
 * https://github.com/Haehnchen/idea-php-symfony2-plugin/issues/1103
 *
 * @link https://nystudio107.com
 * @copyright Copyright (c) 2019 nystudio107
 * @license MIT
 * @license https://opensource.org/licenses/MIT MIT Licensed
 */

namespace nystudio107\craft;

/**
 * Class FauxCraftVariable extends the actual Craft Variable, but with added properties
 * that reflect things that are added to the Craft Variable dynamically by
 * plugins or modules.
 *
 * @property \craft\web\twig\variables\Cp $cp
 * @property \craft\web\twig\variables\Io $io
 * @property \craft\web\twig\variables\Routes $routes
 * @property \craft\web\twig\variables\CategoryGroups $categoryGroups
 * @property \craft\web\twig\variables\Config $config
 * @property \craft\web\twig\variables\Deprecator $deprecator
 * @property \craft\web\twig\variables\ElementIndexes $elementIndexes
 * @property \craft\web\twig\variables\EntryRevisions $entryRevisions
 * @property \craft\web\twig\variables\Feeds $feeds
 * @property \craft\web\twig\variables\Fields $fields
 * @property \craft\web\twig\variables\Globals $globals
 * @property \craft\web\twig\variables\I18N $i18n
 * @property \craft\web\twig\variables\Request $request
 * @property \craft\web\twig\variables\Sections $sections
 * @property \craft\web\twig\variables\SystemSettings $systemSettings
 * @property \craft\web\twig\variables\UserSession $session
 * @property \putyourlightson\blitz\variables\BlitzVariable $blitz
 * @property \nystudio107\twigpack\variables\ManifestVariable $twigpack
 * @mixin \craft\commerce\web\twig\CraftVariableBehavior
 *
 * @author nystudio107
 * @package nystudio107\craft
 * @since 1.0.2
 */
class FauxCraftVariable extends \craft\web\twig\variables\CraftVariable
{
}

/**
 * Class FauxTwigExtension provides a faux Twig extension for PhpStorm to index
 * so that we get Intellisense auto-complete in our Twig templates.
 *
 * @author nystudio107
 * @package nystudio107\craft
 * @since 1.0.2
 */
class FauxTwigExtension extends \Twig\Extension\AbstractExtension implements \Twig\Extension\GlobalsInterface
{
    public function getGlobals(): array
    {
        return [
            // Craft Variable
            'craft' => new FauxCraftVariable(),
            // Craft Elements
            'asset' => new \craft\elements\Asset(),
            'category' => new \craft\elements\Category(),
            'entry' => new \craft\elements\Entry(),
            'tag' => new \craft\elements\Tag(),
            // Craft "Constants"
            'SORT_ASC' => 4,
            'SORT_DESC' => 3,
            'SORT_REGULAR' => 0,
            'SORT_NUMERIC' => 1,
            'SORT_STRING' => 2,
            'SORT_LOCALE_STRING' => 5,
            'SORT_NATURAL' => 6,
            'SORT_FLAG_CASE' => 8,
            'POS_HEAD' => 1,
            'POS_BEGIN' => 2,
            'POS_END' => 3,
            'POS_READY' => 4,
            'POS_LOAD' => 5,
            // Misc. Craft globals
            'currentUser' => new \craft\elements\User(),
            'currentSite' => new \craft\models\Site(),
            'now' => new \DateTime(),
            // Commerce Elements
            'lineItem' => new \craft\commerce\models\LineItem(),
            'order' => new \craft\commerce\elements\Order(),
            'product' => new \craft\commerce\elements\Product(),
            // Third party globals
            'seomatic' => new \nystudio107\seomatic\variables\SeomaticVariable(),
        ];
    }
}

```

Put the file some­where in your project where Php­Storm will index it, and away you go! I put mine in <kbd>src/php/FauxTwigExtension.php</kbd> but it can be any­where that Php­Storm indexes.

The file is nev­er includ­ed by any­thing, the class is nev­er instan­ti­at­ed, and it does­n’t affect your project or Twig in any way.

It’s just a _faux_ Twig exten­sion that Php­Storm index­es and thus Intel­lisense will auto-com­plete for us.

**Pro tip:** Make sure you’re not hav­ing Php­Storm ignore <kbd>storage/runtime/compiled_classes</kbd> in **Pref­er­ences** → **Direc­to­ries**. That’s where Craft puts the gen­er­at­ed Behav­iors for your cus­tom fields.

Here’s what it gives us.

**CRAFT VARI­ABLE**

![Phpstorm-auto-complete-craft-variable](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_1200x490_crop_center-center_100_line/phpstorm-auto-complete-craft-variable.png)

**ENTRY**

![Phpstorm-auto-complete-entry](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_1200x490_crop_center-center_100_line/phpstorm-auto-complete-entry.png)

**CAT­E­GO­RY**

![Phpstorm-auto-complete-category](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_1200x490_crop_center-center_100_line/phpstorm-auto-complete-category.png)

**COM­MERCE PRODUCT**

![Phpstorm-auto-complete-product](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_1200x490_crop_center-center_100_line/phpstorm-auto-complete-product.png)

**SEO­MAT­IC**

![Phpstorm-auto-complete-seomatic](https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_1200x468_crop_center-center_100_line/phpstorm-auto-complete-seomatic.png)

That’s a pret­ty spiffy out of the box list of things to auto-com­plete. But the real­ly cool thing is you can add what­ev­er you want to the <kbd>FauxTwigExtension.php</kbd> file, let Php­Storm index it, and away you go!

Pret­ty sweet. I want to thank Robin for prod­ding me to write this up, and Oliv­er Stark for his help as well.

I hope it’s helpful!

## Further Reading

_If you want to be notified about new articles, follow [nystudio107](https://twitter.com/nystudio107) on Twitter._

<small>Copyright ©2020 nystudio107. Designed by nystudio107</small>