Giter Club home page Giter Club logo

drupal-8-twig-snippets-vs-code's Introduction

Drupal 8 Twig snippets for Visual Studio Code

This extension adds 8 useful twig snippets that can be used with Drupal 8. These snippets were extracted from the Functions - in Twig Templates documentation.

Installation

To install this extension use the following steps:

  1. In VS Code, open the Command Palette using the shortcut key combination ctrl-shift-p (Windows, Linux) or cmd-shift-p (OSX)
  2. Then in the Command Palette box, type in Install Extensions and select that form the list.
  3. This will open up the Extension Manager. In the search box type in Drupal 8 Twig Snippets.
  4. Click the Install button, after that finishes make sure to reload VS Code as well.

Usage

Once 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.

Method 1

  1. Open the Command Palette, ctrl-shift-p (Windows, Linux) or cmd-shift-p (OSX)
  2. In the command box type in Insert Snippet; this will list all the available snippets.
  3. Select the snippet you want to use from the provided list.

Method 2

  1. 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.
  2. Insert the snippet you want by simply pressing the tab key.

Features

Here 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 above.

lib - attach_library($library)

Attaches an asset library to the template.

Example:

{{ attach_library('classy/node') }}

Attach Library

attr - create_attribute($attributes)

Creates an attribute on a DOM element.

Example:

<div{{ create_attribute({'class': ['region', 'region--header']}) }}>
  {{ content }}
</div>

Create Attribute

furl - file_url($uri)

This helper function accepts a relative path from the root and creates a relative URI path to the file.

Example:

{{ file_url(node.field_example_image.entity.uri.value) }}

File URL

lnk - link($text, $url, $attributes)

This helper function accepts as first parameter the text, as second parameter the url and as third paramter any attributes for the link.

Example:

{{ link(item.title, item.url, { 'class':['foo', 'bar', 'baz']} ) }}

Link

path - path($name, $parameters, $options)

Generates a relative URL path given a route name and parameters.

Example:

{# Link to user entity/profile page. #}
<a href="{{ path('entity.user.canonical', {'user': user.id}) }}">{{ 'View user profile'|t }}</a>

Path

urlh - url($name, $parameters, $options)

Generate an absolute URL given a route name and parameters.

Example:

<a href="{{ url('view.frontpage.page_1') }}">{{ 'View all content'|t }}</a>

URL helper

urlc - url('<current>')

Generate an absolute URL to the current url.

Example:

<a href="{{ url('<current>') }}">{{ 'View all content'|t }}</a>

URL current

urlf - url('<front>')

Generate an absolute URL to the front page.

Example:

<a href="{{ url('<front>') }}">{{ 'View all content'|t }}</a>

URL front

Requirements

These 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 extension by mblode.

Release Notes

1.0.2

Fix typos in README

1.0.1

Added the Drupal 8 logo

0.0.1

Initial release

drupal-8-twig-snippets-vs-code's People

Contributors

tsega avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

jeremyvii

drupal-8-twig-snippets-vs-code's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.