How to create custom snippets using Zen Coding (Emmet)

What Will I Learn?

You will learn to create custom snippets using Emmet (Zen Coding) file.

Requirements

• Emmet
• Notepad++

Difficulty

Basic

How to create custom snippets using Zen Coding (Emmet)

I am going to run through a tutorial on how to create custom snippets using  Emmet (Zen Coding) file. 

If you are using Notepad++, "Zen Coding.js" is located here:

..\Notepad++\plugins\NppScripting\includes\Zen Coding.js

You will need to edit this file to add your own custom snippets/abbreviations.Locate the following code (contents have been replaced with "//there is code here"):

 'html': {

        'filters': 'html',

        'snippets': {

            //there is code here

        },

        'abbreviations': {

            //there is code here

        },

        'element_types': {

        }

    },

    'xsl': {

        'extends': 'html',

        'filters': 'html, xsl',

        'abbreviations': {

            //there is code here

        }

    },

These are all of the existing html and xsl abbreviations and snippets provided with Zen Coding.For the sake of time, we are going to add a PHP section right before this line:

 'xsl': {

This will look like this:

 'html': {

        'filters': 'html',

        'snippets': {

            //there is code here

        },

        'abbreviations': {

            //there is code here

        },

        'element_types': {

        }

    },

    'php': {

        'filters': 'php, html',

        'snippets': {

            //we will write snippets here

        }

    },

    'xsl': {

        'extends': 'html',

        'filters': 'html, xsl',

        'abbreviations': {

            //there is code here

        }

    }

Make sure your curly braces, comas, etc. are correct otherwise you will get an error loading the file.

Now locate:

 var know_syntaxes = {

        'html': 1,

        //there is more code here



    };

Add 'php': 1 to this code, like this:

 var know_syntaxes = {

        'html': 1,

        'php': 1,

        //there is more code here

    };

Finally, lets add a snippet, I am going to create one for an inline function as my blog won't let me write out actual php code without rendering it, if you would like to wrap your code in a php tag go right ahead.

So lets try something like this:

 'php': {

        'filters': 'php, html',

        'snippets': {

            //we will write snippets here

            'php:func': 'function |() {\n\t\n}',

        }

    },

| is the position of your mouse cursor.
\n is new line
\t is tabSee simple.

Save your "Zen Coding.js" file, restart your application in our case Notepad++.

Now if you were to type in php:func then click Ctrl+E, this would expand to:

function () {



}

 As you can see there is so much room for editing and customizing your own abbreviations and snippets. I haven’t even touched the tip of the iceberg. So go explore and good luck, just make sure to make a backup file. 

---

Posted on Utopian.io - Rewarding Open Source Contributors

---