Snippets

Most of the time when I learn to code I discover there are a lot of repetitive tasks. Visual Studio Code allows you to create your own snippets for the purpose of reducing those repetitions. At the moment I'm learning express.js and some templating with ejs. Want to guess what was my first snippet? express app boilerplate followed by ejs tags.

You can access vscode snippets by clicking the Manage Gear on the bottom left corner and choosing User snippets. By default vscode stores them in the user folder under C:\Users\user-name\AppData\Roaming\Code\User\snippets\.

This is the content of my snippet files:

express.code-snippets

{
    "express boilerplate":{
        "scope":"javascript",
        "prefix": "exp",
        "body": [
            "const express = require('express');",
            "const serverPort = process.env.PORT || ${1:port_number};",
            "const app = express();\n",
            "app.get('/', (req, res) => {\n",
            "\tres.send('$2');\n",
            "});\n",
            "app.listen(serverPort, () => {",
            "console.log(`Server started on port < ${$serverPort} >`);",
            "});"
        ]
    },

    "app.get boilerplate":{
        "scope": "javascript",
        "prefix": "app.get",
        "body": [
            "app.get('${1:/}', (req, res) => {\n",
            "\tres.send('$2');\n",
            "});"
        ]
    },
    "app.post boilerplate":{
        "scope": "javascript",
        "prefix": "app.post",
        "body": [
            "app.post('${1:/}', (req, res) => {\n",
            "\tres.send('$2');\n",
            "});"
        ]
    }

}

esj.code-snippets

{
    "Output value": {
        "scope": "ejs, html, javascript",
        "prefix": "ejs",
        "body": "<%= $1 %>$0",
        "description": "Outputs the value into the template (HTML escaped)"
    },

    "Scriptlet": {
        "scope": "ejs, html, javascript",
        "prefix": "ejs.scrip",
        "body": "<% $1 %>$0",
        "description": "'Scriptlet' tag, for control-flow, no output"
    },

    "Whitespace trim": {
        "scope": "ejs, html, javascript",
        "prefix": "ejs.trim",
        "body": "<%_ $1 _%>$0",
        "description": "Removes all whitespace before and after"
    },

    "Include": {
        "scope": "ejs, html, javascript",
        "prefix": "ejs.include",
        "body": "<%- include('$1'$2) -%>$0",
        "description": "Removes all whitespace before and after"
    }

}