Will & Skill Developers

Will & Skill Developers


Thoughts, snippets and ideas from the team at Will & Skill AB, Stockholm.

Simon Almers
Author

Share


Custom Code Snippets in VS Code + BONUS: DJANGO Template Snippets & Date-Stamped Comments

Simon AlmersSimon Almers

*Syntax Error*

Ever misspelled something whilst spinning up a Django template? Do you ever struggle to remember the syntax of that template tag you rarely use? Custom VS Code snippets to the rescue!

With Visual Studio Code it's really easy to add custom code snippets. In fact, it's so easy, it would be a crime not to... so stop wasting time you could have spent bugging your team with cat videos and write your own snippet today!

PS! If you're in a hurry you can just steal mine... I won't blame you... (Copy the code snippet at the bottom of this post)

How to: Write your own Code Snippets!

Open User Snippets

In VS Code go to: Code>Preferences>User Snippets

Select Language

In the dropdown, select language for which you would like to write your snippets.

html.json

Once you have selected your language, a JSON file is opened. This is where you will place your custom code snippets.

Writing your own snippets...

Each snippet is defined under a snippet name and has a prefix, body and description.

The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:

Example:

"Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
}

BONUS:

💬+⏳=💩

Show of hands... who has ever been misled by an old comment? I'll take an educated guess and say you have... too...

🙌🏻🙌🏻🙌🏻🙌🏻🙌🏻🙌🏻🙌🏻🙌🏻

We might not ever get around to solve this issue completley... but one way to give you a hint of how old the comment is to datestamp your comments.

# TODO: Finish this article before publication

...But this whole article is about speeding up your workflow... not giving you more to do...

Custom "TODO Snippet" you say? 🍪 Cookie-point for you!

Using the variables $CURRENTMONTHNAME, $CURRENTDATE & $CURRENTYEAR we are able to write a custom snippet that gives you this:
# TODO October 19, 2018: Try not to overuse this awesome snippet!

How to implement:

Copy-pase this snippet into your VS Code python.json snippet file: (Just replace the "#" with whatever prefix is needed for comments in your prefered language!)

"Datestamped Todo": {
    "prefix": "todo",
    "body": [
        "# TODO $CURRENT_MONTH_NAME $CURRENT_DATE, $CURRENT_YEAR: "
    ]
},

Django Template Snippets

Sometimes you just want to get sh™t done... I know I do... Here are some Django snippets I use to speed up my template making.

If Statement

{% if publication.image %}
_
{% endif %}

"Django Template If Statement": {
    "prefix": "Django If Statement",
    "body": [
        "{% if $1 %}",
        "\t$0",
        "{% endif %}",
    ]
},

For loop

{% for pub in publications %}
_
{% enfor %}

"Django Template Foor Loop": {
    "prefix": "Django Foor Loop",
    "body": [
        "{% for $1 in $2 %}",
        "\t$0",
        "{% enfor %}",
    ]
},

Load

{% load static %}

"Django Template Load": {
    "prefix": "Django Load",
    "body": "{% load $1 %}",
},

Extends

{% extends 'base.html' %}

"Django Template Extends": {
    "prefix": "Django extends",
    "body": "{% extends \"$1\" %}",
},

Django Block Tag

{% block content %} _ {% endblock content %}

"Django Template Block": {
    "prefix": "Django Block",
    "body": [
        "{% block $1 %}"
        "\t$0",
        "{% endblock $1 %}",
    ]
},

Django Regroup List

{% regroup publicationlist by publishedat.year as year_list %}

"Django Template Regroup List": {
    "prefix": "Django Regroup List",
    "body": "{% regroup $1 by $2 as $3 %}",
},

Django Truncate Chars Filter

{{publication.title|truncatechars:20}}

"Django Template Filter Truncate": {
    "prefix": "Django Truncate Chars",
    "body": "{{$1|truncatechars:$2}}",
},

Django Safe Filter

{{ publication.content | safe }}

"Django Template Filter Safe": {
    "prefix": "Django Safe",
    "body": "{{ $1 | safe }}",
},

Django Insert Image If It Exists

{% if publication.image %}
< img src="{{publication.image.url}}" class="_" />
{% endif %}

"Django Template Safe Image": {
    "prefix": "Django Img If Exists",
    "body": [
        "{% if $1 %}",
        "\t<img src=\"{{$1.url}}\" class=\"$2\" />",
        "{% endif %}",
    ]
},

Django Template Set Language

{% language 'en' %}
_
{% endlanguage %}

"Django Template Language": {
    "prefix": "Django Language Specific",
    "body": [
        "{% language '$1' %}",
        "\t$0",                         
        "{% endlanguage %}",
    ]
},

Django Template With

{% with pub = month.list|first %}
_
{% endwith %}

"Django Teplate With":{
    "prefix": "Django With",
    "body": [
        "{% with $1=$2 %}",                         
        "\t$0",
        "{% endwith %}",                     
    ]
},
Simon Almers
Author

Simon Almers

Comments