snippets.json

cpp.snippets.json

{
    // Place your snippets for cpp here. 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:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
    // same ids are connected.
    // Example:
    "Generate class header": {
        "prefix": "cls",
        "body": [
            "#pragma once",
            "",
            "/**",
            " * $TM_FILENAME_BASE - $1",
            " */",
            "class $TM_FILENAME_BASE {",
            "",
            "    public:",
            "        $TM_FILENAME_BASE(){};",
            "        ~$TM_FILENAME_BASE(){};",
            "",
            "    private:",
            "",
            "};",
        ],
        "description": "Generate a class header file"
    }
}

snippets.json

{
    "console.log": {
        "prefix": "cl",
        "body": [
            "console.log(`$1`)"
        ],
        "description": "Log to console.log"
    },
    "border red": {
        "prefix": "br",
        "body": [
            "border: 1px solid red;"
        ],
        "description": "Add border: 1px solid red;"
    },
    "border green": {
        "prefix": "bg",
        "body": [
            "border: 1px solid green;"
        ],
        "description": "Add border: 1px solid green;"
    },
    "Add log and warn with getLogger": {
        "prefix": "gl",
        "body": [
            "const { log, warn } = getLogger('$TM_FILENAME_BASE', { enabled: true });",
            "",
        ],
        "description": "Add getLogger log and warn methods."
    },
    "log": {
        "prefix": "log",
        "body": [
            "log(`$1`)"
        ],
        "description": "Log to log"
    },
    "dash break": {
        "prefix": "aa",
        "body": [
            "--------------------------------------------------------------------------------",
            "",
        ],
        "description": "Insert an 80-character dash of lines"
    },
    "dash break comment": {
        "prefix": "ac",
        "body": [
            "//------------------------------------------------------------------------------",
        ],
        "description": "Insert an 80-character dash of lines as a comment"
    },
    // SCSS
    "var": {
        "prefix": "var",
        "body": [
            "var(--$1);"
        ],
        "description": "Insert scss var"
    },
    // REACT //////////////////////////////////////////////////////////
    "React useState": {
        "prefix": "us",
        "scope": "javascriptreact,typescriptreact",
        "body": [
            "const [$1, set$2] = useState($3);"
        ],
        "description": "Insert React const [,] = useState()"
    },
    "insert useEffect": {
        "prefix": "ue",
        "scope": "javascriptreact,typescriptreact",
        "body": [
            "useEffect(() => {",
            "   $1",
            "}, [$2])"
        ],
        "description": "Insert React useEffect(fn)"
    },
    "insert useEffect (async)": {
        "prefix": "uea",
        "scope": "javascriptreact,typescriptreact",
        "body": [
            "useEffect(() => {",
            "   const asyncFn = async () => {",
            "       $1",
            "   }",
            "   await asyncFn();",
            "}, [$2])"
        ],
        "description": "Insert React useEffect(fn) with async handler"
    },
    "Create basic React functional component": {
        //"scope": "html,react,javascript react",
        "prefix": "comp",
        "scope": "javascriptreact,typescriptreact",
        "body": [
            "import React, { useState } from 'react';",
            "import './style.scss';",
            "",
            "const $1 = (props) => {",
            "",
            "   return (",
            "       <div className=\"$2\">",
            "           $3",
            "       </div>",
            "   )",
            "",
            "}",
            "",
            "export default $1;"
        ],
        "description": "Inserts basic React functional component"
    },
    // JS common //////////////////////////////////////////////////////////////////////////
    "export const function": {
        "prefix": "ef",
        "body": [
            "export const $1 = ($2) => {",
            "   $3",
            "}"
        ],
        "description": "Insert normal exportable const function"
    },
    "Create try/catch": {
        "scope": "javascript,typescript,javascriptreact,typescriptreact",
        "prefix": "try",
        "body": [
            "try {",
            "    $1",
            "} catch (e) {",
            "    throw e;$2",
            "}"
        ],
        "description": "Creates a default try/catch block."
    },
    "Wrap in try/catch": {
        "scope": "javascript,typescript,javascriptreact,typescriptreact",
        "prefix": "try",
        "body": [
            "try {",
            "    $TM_SELECTED_TEXT",
            "} catch (e) {",
            "    const error = exception(e);$2",
            "    throw e;",
            "}"
        ],
        "description": "Wraps the given text in try/catch."
    },
    "getInnerError": {
        "scope": "javascript,typescript,javascriptreact,typescriptreact",
        "prefix": "ger",
        "body": [
            "console.log('⚠️ Exception in $q1:', e)",
            "const error = getInnerError(e);"
        ],
        "description": "Creates a getInnerError handler."
    },
    "Surround in profile": {
        "prefix": "pro",
        "scope": "javascript,typescript,javascriptreact,typescriptreact",
        "body": [
            "let r = await profile(async () => {",
            "    $TM_SELECTED_TEXT",
            "}, (pr) => {",
            "    if (pr > 5000) {",
            "        console.warn('WARNING: profile took longer than 5 seconds:', pr);",
            "    }",
            "});",
            "return r;"
        ],
        "description": "Insert profiling code around snippet"
    },
    "Replace with arrow function": {
        "prefix": "fna",
        "scope": "javascript,typescript,javascriptreact,typescriptreact",
        "body": [
            "$TM_SELECTED_TEXT"
        ],
        //"#ifndef ${TM_FILENAME/([^\\.]*)(\\.)*/${1:/upcase}${2:+_}/g}"
        //https://stackoverflow.com/questions/55967537/how-to-use-regex-to-uppercase-and-replace-in-visual-studio-codes-snippets
        "description": "Replace selected function as an arrow function"
    },
    "Surround with asterisk": {
        "prefix": "",
        "body": [
            "*$1*"
        ],
        "description": "Surrounds the given text with asterisks, for markdown usage primarily."
    },
    "import": {
        //"scope": "html,react,javascript react",
        "prefix": "imp",
        "body": [
            "import { $1 } from '$2';",
        ],
        "description": "Import module"
    },
    "const": {
        //"scope": "html,react,javascript react",
        "prefix": "cr",
        "body": [
            "const { $1 } = require('$2');",
        ],
        "description": "Import const module"
    },
    "promise": {
        "prefix": "pr",
        "body": [
            "new Promise((resolve, reject) => {",
            "    $1",
            "});",
        ],
        "description": "add new Promise"
    },
    "self = this": {
        //"scope": "html,react,javascript react",
        "prefix": "cs",
        "body": [
            "const self = this;",
        ],
        "description": "Insert const self = this;"
    },
    // HTML common //////////////////////////////////////////////////////////
    "Wrap in div": {
        "scope": "javascript",
        "prefix": "div",
        "body": [
            "<div className=\"$1\">",
            "    $TM_SELECTED_TEXT",
            "</div>"
        ],
        "description": "Surrounds the given text with asterisks, for markdown usage primarily."
    },
    "insert div with class": {
        //"scope": "html,react,javascript react",
        "prefix": "div",
        "body": [
            "<div className=\"$1\">",
            "    $2",
            "</div>",
        ],
        "description": "Insert div with class name"
    },
    "insert span with class": {
        //"scope": "html,react,javascript react",
        "prefix": "span",
        "body": [
            "<span className=\"$1\">",
            "    $2",
            "</span>",
        ],
        "description": "Insert span with class name"
    },
    "Insert form field": {
        //"scope": "html,react,javascript react",
        "prefix": "field",
        "body": [
            "<div class=\"field\">",
            "    <input type=\"text\" name=\"$1\"></input>",
            "</div>",
        ],
        "description": "Inserts html with field > input entries"
    },
    "Insert form row+field": {
        //"scope": "html,react,javascript react",
        "prefix": "row",
        "body": [
            "<div class=\"row\">",
            "    <div class=\"field\">",
            "        <input type=\"text\" name=\"$1\"></input>",
            "    </div>",
            "</div>"
        ],
        "description": "Inserts html with row > field > input entries"
    },
}