Snippets

MihailFox — Fri, 29 Nov 2019 21:57:05 +0000

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"
    }

}

Visual Studio Code Extensions

MihailFox — Thu, 28 Nov 2019 21:18:38 +0000

Hello dev.to community!

If you ever wondered how to create a list of your extensions you can do it by launching vscode with a builtin parameter code --list-extensions.

This is a list of the vscode extensions I use. To find more info about the extension click on the link.

Settings Sync

Synchronizes Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

Gitlens

It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Code Spell Checker

A basic spell checker that works well with camelCase code.

All-Autocomplete

Provides autocompletion in Visual Studio Code items based on all open editors.

Path Intellisense

Visual Studio Code plugin that autocompletes filenames.

Visual Studio IntelliCode

The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

Live Server

Launch a development local Server with live reload feature for static & dynamic pages.

Bookmarks

It helps you to navigate in your code, moving between important positions easily and quickly. No more need to search for code. It also supports a set of selection commands, which allows you to select bookmarked lines and regions between bookmarked lines. You can also define Labels for you bookmarks.

Forem: MihailFox