{"id":21286485,"url":"https://github.com/tsega/drupal-8-twig-snippets-vs-code","last_synced_at":"2026-03-19T19:41:45.482Z","repository":{"id":46105307,"uuid":"131755674","full_name":"tsega/drupal-8-twig-snippets-vs-code","owner":"tsega","description":"A handful of twig functions to use with Drupal 8 in Visual Studio Code.","archived":false,"fork":false,"pushed_at":"2020-05-27T15:29:18.000Z","size":1520,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-22T05:20:06.751Z","etag":null,"topics":["drupal-8","snippets","twig","visual-studio-code"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tsega.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-01T19:44:25.000Z","updated_at":"2023-03-05T02:40:18.000Z","dependencies_parsed_at":"2022-09-05T04:30:14.666Z","dependency_job_id":null,"html_url":"https://github.com/tsega/drupal-8-twig-snippets-vs-code","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsega%2Fdrupal-8-twig-snippets-vs-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsega%2Fdrupal-8-twig-snippets-vs-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsega%2Fdrupal-8-twig-snippets-vs-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsega%2Fdrupal-8-twig-snippets-vs-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tsega","download_url":"https://codeload.github.com/tsega/drupal-8-twig-snippets-vs-code/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243746241,"owners_count":20341204,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drupal-8","snippets","twig","visual-studio-code"],"created_at":"2024-11-21T11:29:38.081Z","updated_at":"2026-01-03T04:37:09.255Z","avatar_url":"https://github.com/tsega.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Drupal 8 Twig snippets for Visual Studio Code\n\nThis extension adds 8 useful twig snippets that can be used with Drupal 8. These snippets were extracted from the [Functions - in Twig Templates](https://www.drupal.org/docs/8/theming/twig/functions-in-twig-templates) documentation.\n\n## Installation\n\nTo install this extension use the following steps:\n\n1. In VS Code, open the **Command Palette** using the shortcut key combination `ctrl-shift-p` (Windows, Linux) or `cmd-shift-p` (OSX)\n1. Then in the Command Palette box, type in `Install Extensions` and select that form the list.\n1. This will open up the **Extension Manager**. In the search box type in `Drupal 8 Twig Snippets`.\n1. Click the **Install** button, after that finishes make sure to reload VS Code as well.\n\n## Usage\n\nOnce installed, to use these snippets you can use the following two methods, the first Method is geared towards people who are new to the snippets available while the second method is suitable for people who know the available snippets and are looking to increase their speed.\n\n### Method 1\n1. Open the **Command Palette**, `ctrl-shift-p` (Windows, Linux) or `cmd-shift-p` (OSX)\n1. In the command box type in `Insert Snippet`; this will list all the available snippets.\n1. Select the snippet you want to use from the provided list.\n\n### Method 2\n1. In the code editor window, type in the **Prefix** of the snippet you want to insert. This will show an intellisense window as you type.\n1. Insert the snippet you want by simply pressing the `tab` key.\n\n## Features\n\nHere you will find all the code snippets that are available in this extension. Please note that each title starts with the **Prefix** of the code snippet to insert; useful to memorize them if you plan to use [Method 2](#Method-2) above.\n\n### lib - attach_library($library)\n\nAttaches an asset library to the template.\n\nExample:\n```twig\n{{ attach_library('classy/node') }}\n```\n\n![Attach Library](images/attach_library.gif \"Attach Library Drupal 8 Twig Snippet\")\n\n### attr - create_attribute($attributes)\n\nCreates an attribute on a DOM element.\n\nExample:\n```twig\n\u003cdiv{{ create_attribute({'class': ['region', 'region--header']}) }}\u003e\n  {{ content }}\n\u003c/div\u003e\n```\n\n![Create Attribute](images/create_attribute.gif \"Create Attribute Drupal 8 Twig Snippet\")\n\n### furl - `file_url($uri)`\n\nThis helper function accepts a **relative path** from the root and creates a relative URI path to the file.\n\nExample:\n```twig\n{{ file_url(node.field_example_image.entity.uri.value) }}\n```\n\n![File URL](images/file_url.gif \"File URL Drupal 8 Twig Snippet\")\n\n### lnk - `link($text, $url, $attributes)`\n\nThis helper function accepts as first parameter the **text**, as second parameter the **url** and as third paramter any **attributes** for the link.\n\nExample:\n```twig\n{{ link(item.title, item.url, { 'class':['foo', 'bar', 'baz']} ) }}\n```\n\n![Link](images/link.gif \"Link Drupal 8 Twig Snippet\")\n\n\n### path - `path($name, $parameters, $options)`\n\nGenerates a **relative** URL path given a route name and parameters.\n\nExample:\n```twig\n{# Link to user entity/profile page. #}\n\u003ca href=\"{{ path('entity.user.canonical', {'user': user.id}) }}\"\u003e{{ 'View user profile'|t }}\u003c/a\u003e\n```\n\n![Path](images/path.gif \"Path Drupal 8 Twig Snippet\")\n\n### urlh - `url($name, $parameters, $options)`\n\nGenerate an absolute URL given a route name and parameters.\n\nExample:\n```twig\n\u003ca href=\"{{ url('view.frontpage.page_1') }}\"\u003e{{ 'View all content'|t }}\u003c/a\u003e\n```\n\n![URL helper](images/urlh.gif \"URL helper Drupal 8 Twig Snippet\")\n\n### urlc - `url('\u003ccurrent\u003e')`\n\nGenerate an absolute URL to the current url.\n\nExample:\n```twig\n\u003ca href=\"{{ url('\u003ccurrent\u003e') }}\"\u003e{{ 'View all content'|t }}\u003c/a\u003e\n```\n\n![URL current](images/urlc.gif \"URL current Drupal 8 Twig Snippet\")\n\n### urlf - `url('\u003cfront\u003e')`\n\nGenerate an absolute URL to the front page.\n\nExample:\n```twig\n\u003ca href=\"{{ url('\u003cfront\u003e') }}\"\u003e{{ 'View all content'|t }}\u003c/a\u003e\n```\n\n![URL front](images/urlf.gif \"URL front Drupal 8 Twig Snippet\")\n\n### Requirements\n\nThese snippets are only made available in files with a `.twig` extension. To get proper support for Twig files in Visual Studio Code, you can install the [Twig Language 2](https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2) extension by *mblode*.\n\n## Release Notes\n### 1.0.2\n\nFix typos in README\n\n### 1.0.1\n\nAdded the Drupal 8 logo\n### 0.0.1\n\nInitial release\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsega%2Fdrupal-8-twig-snippets-vs-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftsega%2Fdrupal-8-twig-snippets-vs-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsega%2Fdrupal-8-twig-snippets-vs-code/lists"}