vscode snippets

android Android

web Web

1-Sep-24 (Created: 1-Sep-24) | More in 'vscode'

vscode snippets

satya - 2/11/2024, 3:27:06 PM

Vscode docs on snippets

satya - 2/11/2024, 3:28:50 PM

Stupid thing!!!

There are instructions in the snippet file
If you leave them as they are..and add your snippet under it won't work
Delete the comments
Just use the snippet block

satya - 2/11/2024, 3:29:59 PM

The file will be saved under


your folder/.vscode/file.code-snippets

satya - 2/11/2024, 3:30:12 PM

An example


{
    "Block Comments": {
        "scope": "python",
      "prefix": "block_comments",
        "body": [
            "\"\"\"",
            "*************************************************",
            "* Prep the template",
            "*************************************************",
            "\"\"\""
        ],
        "description": "Inserts a block comment for template preparation."
    }
}

satya - 2/11/2024, 3:31:24 PM

Note the global files are stored under


/users/user/appdata/roaming/code/user/snippets/filenam.code-snippets

satya - 2/11/2024, 3:41:48 PM

Here is how you put 2 snippets


{
    "Block Comments": {
        "scope": "python",
      "prefix": "block_comments",
        "body": [
            "\"\"\"",
            "*************************************************",
            "* Prep the template",
            "*************************************************",
            "\"\"\""
        ],
        "description": "Inserts a block comment for template preparation."
    },
   "lib_main_snippet": {
         "prefix": "lib_main_snippet",
         "body": [
            "def test():",
            "    pass",
            "",
            "def localTest():",
            "    log.ph1(\"Starting local test\")",
            "    test()",
            "    log.ph1(\"End local test\")",
            "",
            "if __name__ == '__main__':",
            "    localTest()"
         ],
         "description": "Template for local testing with a main block"
      }
}

satya - 2/11/2024, 3:43:46 PM

The json format of this file is important

A single root note
Each snippet is a dictionary entry
Not sure if comments are allowed
Even a small mistake, vscode reports no snippets available...
The whole error messaging could be quite a case in-convalescence.

satya - 2/11/2024, 3:46:39 PM

How to create this snippet file

ctrl-shift-p and "snippets"
use "configure user snippets"
Instead of choosing global you may want to chose your local snippet
this file is saved in .vscode/file.code-snippet
I assume you can have multiple snippet files
Doing locally gives you more access and control to that file where as the global files are tucked away deep inside python global jungle.

satya - 2/11/2024, 3:47:41 PM

How do I invoke or insert the snippet

Just type the beginning words
intellisense should prompt you right away
No tab is needed
No ctrl-space is needed

satya - 2/11/2024, 3:49:10 PM

You have the option in settings to

Go to settings (ctrl-shift-p: search for settings)
Editor: snippet suggestion
options: top, bottom, inline (default), none
I chose "top"
works good so far

satya - 6/16/2024, 2:51:24 PM

You can have multiple snippet files in the .vscode directory


/your-project-root-folder/.vscode/file1.code-snippets
/your-project-root-folder/.vscode/file2.code-snippets
etc.

satya - 6/16/2024, 3:41:04 PM

Notice the comma between the snippet json segments...

satya - 6/16/2024, 3:56:37 PM

Here is another example


{
   // Place your LearnPowershellRepo workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
   // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
   // is left empty or omitted, the snippet gets applied to all languages. 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:
   // "Print to console": {
   //    "scope": "javascript,typescript",
   //    "prefix": "log",
   //    "body": [
   //       "console.log('$1');",
   //       "$2"
   //    ],
   //    "description": "Log output to console"
   // }
   "md-heading": {
      "prefix": "md-heading",
      "body": [
      "<!-- ********************* -->",
      "# Some heading",
      "<!-- ********************* -->",
      "$0"
      ],
      "description": "Insert a commented heading"
   },
   "md-python": {
      "prefix": "md-python",
      "body": [
      "```python",
      "code",
      "```",
      "$0"
      ],
      "description": "Python segment"
   },
   "md-powershell": {
      "prefix": "md-powershell",
      "body": [
      "```powershell",
      "code",
      "```",
      "$0"
      ],
      "description": "Powershell segment"
   }
}

satya - 6/16/2024, 10:51:06 PM

Understanding tabbing in the snippets

Examples
$1
$2
$3
These are also called place holders.
The snippet body is fully filled out with default values, as if they the place holders are highlighted ready to be replaced
Each "tab" then will take you to the right spot to replace the high lighted text.

satya - 6/16/2024, 10:51:16 PM

An example


{
  "Function Definition": {
    "prefix": "func",
    "body": [
      "function ${1:FunctionName}(${2:parameters}) {",
      "    ${0:// body}",
      "}"
    ],
    "description": "Insert a function definition"
  }
}

satya - 6/16/2024, 10:51:20 PM

Given this

satya - 6/16/2024, 10:53:33 PM

The snippet will look like this first


//The following will show up first

function FunctionName(parameters) {
    // body
}

// The place holders are
// 1: FunctionName
// 2: parameters
// 3: //body

Each tab will take you to that place and allows you to replace that word

satya - 6/16/2024, 10:53:53 PM

$0 is the last tab

satya - 6/16/2024, 11:00:09 PM

what to press to show snippet suggestions

This is controlled via key shortcuts
It is called Trigger Suggest
It is by default set to "ctrl-space"

satya - 6/16/2024, 11:00:46 PM

How to find this

File
Preferences
Key board short cuts
search for "trigger suggest"

satya - 6/16/2024, 11:02:38 PM

You can also use for snippets...

Variables like current highlighted selection
current line etc.
See the VScode docs on snippets included earlier here for using them

satya - 6/16/2024, 11:04:10 PM

The insertion point

There is some confusion for me
It ought to be the current cursor
however using a selection as a variable may replace that whole selection to arrive at a new cursor position which is at the beginning of the selection and may remove that selection.

satya - 6/16/2024, 11:08:59 PM

How to see what snippets are available to you

ctrl-shift-p
snippets: insert snippet
This will display the existing snippets
These included what you defined
Also includes the built-in snippets for the type of file you have opened

satya - 6/17/2024, 12:06:51 PM

The article about this on github

satya - 9/1/2024, 11:02:47 AM

Looking at global snippets

Some snippets are useful across the multiple folders
Locate the global placement of snippet files
See if the snippet files are checked into github!!

satya - 9/1/2024, 11:05:58 AM

Global directory for snippets

Snippets path: C:\Users\satya\AppData\Roaming\Code\User\snippets\global-snippets.code-snippets
Directory for Vscode: C:\Users\satya\AppData\Roaming\Code
Directory for user configuration: C:\Users\satya\AppData\Roaming\Code\User

satya - 9/1/2024, 11:06:36 AM

You will find here: C:\Users\satya\AppData\Roaming\Code\User

global settings.json
global keybindings.json
etc.

satya - 9/1/2024, 11:08:53 AM

The global snippet file looks like this


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

satya - 9/1/2024, 11:09:06 AM

Notice the "scope" explicitly mentioned

satya - 9/1/2024, 12:40:34 PM

domain of scope

Plain Text: plaintext
JavaScript: javascript
TypeScript: typescript
JavaScript React (JSX): javascriptreact
TypeScript React (TSX): typescriptreact
HTML: html
CSS: css
SCSS: scss
JSON: json
Python: python
C++: cpp
C#: csharp
Java: java
PHP: php
Ruby: ruby
Go: go
Shell Script: shellscript
Markdown: markdown
YAML: yaml
XML: xml

satya - 9/1/2024, 12:49:09 PM

Right now interested in markdown

satya - 9/1/2024, 12:51:57 PM

Structuring that file gradually or debugging the json if something goes wrong


//Ignore these comments
//Json may not like comments

//start with the root brackets
{
}

satya - 9/1/2024, 12:53:03 PM

Underneath it


{
   "a": {
   },
   "b": {
   }
}

satya - 9/1/2024, 12:53:43 PM

Notice the comma

satya - 9/1/2024, 12:57:31 PM

The {} defines a dictionary. the rules are

Starts a dictionary
the elements are a collection of "key": value pairs separated by commas
The value can be a string "example" or a number
The value can be a list which is inside a [] with elements separated by commas
The last key value pair will not have a comma

satya - 9/1/2024, 1:04:36 PM

Here is a file with markdown snippets for me


{
   // Place your global snippets here. 
   //
   // Each snippet is defined under a snippet name and has a scope, prefix, body and description. 
   // Add comma separated ids of the languages where the snippet is applicable in the scope field. 
   // If scope is left empty or omitted, the snippet gets applied to all languages. 
   //
   // 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:
   // "Print to console": {
   //    "scope": "javascript,typescript",
   //    "prefix": "log",
   //    "body": [
   //       "console.log('$1');",
   //       "$2"
   //    ],
   //    "description": "Log output to console"
   // }
   
   "md-heading": {
      "scope": "markdown",
      "prefix": "md-heading",
      "body": [
      "<!-- ********************* -->",
      "# Some heading",
      "<!-- ********************* -->",
      "$0"
      ],
      "description": "Insert a commented heading"
   },
   "md-python": {
      "scope": "markdown",
      "prefix": "md-python",
      "body": [
      "```python",
      "code",
      "```",
      "$0"
      ],
      "description": "Python segment"
   },
   "md-powershell": {
      "scope": "markdown",
      "prefix": "md-powershell",
      "body": [
      "```powershell",
      "code",
      "```",
      "$0"
      ],
      "description": "Powershell segment"
   }   
}

satya - 9/1/2024, 1:08:19 PM

About the body

This is where you want to put the lines you want to substitute
These are a series of strings separated by commas
These can be tedious to format them based on what you may want, including sometimes escape characters
Use ChatGPT or a similar tool to give you the snippet based on what you want to substitute. Ask it.