vscode snippets

vscode snippets

Vscode docs on snippets

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

your folder/.vscode/file.code-snippets


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


/users/user/appdata/roaming/code/user/snippets/filenam.code-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"
      }
}
  1. A single root note
  2. Each snippet is a dictionary entry
  3. Not sure if comments are allowed
  4. Even a small mistake, vscode reports no snippets available...
  5. The whole error messaging could be quite a case in-convalescence.
  1. ctrl-shift-p and "snippets"
  2. use "configure user snippets"
  3. Instead of choosing global you may want to chose your local snippet
  4. this file is saved in .vscode/file.code-snippet
  5. I assume you can have multiple snippet files
  6. Doing locally gives you more access and control to that file where as the global files are tucked away deep inside python global jungle.
  1. Just type the beginning words
  2. intellisense should prompt you right away
  3. No tab is needed
  4. No ctrl-space is needed
  1. Go to settings (ctrl-shift-p: search for settings)
  2. Editor: snippet suggestion
  3. options: top, bottom, inline (default), none
  4. I chose "top"
  5. works good so far

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

Notice the comma between the snippet json segments...


{
   // 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"
   }
}
  1. Examples
  2. $1
  3. $2
  4. $3
  5. These are also called place holders.
  6. The snippet body is fully filled out with default values, as if they the place holders are highlighted ready to be replaced
  7. Each "tab" then will take you to the right spot to replace the high lighted text.

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

Given this


//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

$0 is the last tab

  1. This is controlled via key shortcuts
  2. It is called Trigger Suggest
  3. It is by default set to "ctrl-space"
  1. File
  2. Preferences
  3. Key board short cuts
  4. search for "trigger suggest"
  1. Variables like current highlighted selection
  2. current line etc.
  3. See the VScode docs on snippets included earlier here for using them
  1. There is some confusion for me
  2. It ought to be the current cursor
  3. 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.
  1. ctrl-shift-p
  2. snippets: insert snippet
  3. This will display the existing snippets
  4. These included what you defined
  5. Also includes the built-in snippets for the type of file you have opened

The article about this on github

  1. Some snippets are useful across the multiple folders
  2. Locate the global placement of snippet files
  3. See if the snippet files are checked into github!!
  1. Snippets path: C:\Users\satya\AppData\Roaming\Code\User\snippets\global-snippets.code-snippets
  2. Directory for Vscode: C:\Users\satya\AppData\Roaming\Code
  3. Directory for user configuration: C:\Users\satya\AppData\Roaming\Code\User
  1. global settings.json
  2. global keybindings.json
  3. etc.

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

Notice the "scope" explicitly mentioned

  1. Plain Text: plaintext
  2. JavaScript: javascript
  3. TypeScript: typescript
  4. JavaScript React (JSX): javascriptreact
  5. TypeScript React (TSX): typescriptreact
  6. HTML: html
  7. CSS: css
  8. SCSS: scss
  9. JSON: json
  10. Python: python
  11. C++: cpp
  12. C#: csharp
  13. Java: java
  14. PHP: php
  15. Ruby: ruby
  16. Go: go
  17. Shell Script: shellscript
  18. Markdown: markdown
  19. YAML: yaml
  20. XML: xml

Right now interested in markdown


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

//start with the root brackets
{
}


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

Notice the comma

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

{
   // 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"
   }   
}
  1. This is where you want to put the lines you want to substitute
  2. These are a series of strings separated by commas
  3. These can be tedious to format them based on what you may want, including sometimes escape characters
  4. Use ChatGPT or a similar tool to give you the snippet based on what you want to substitute. Ask it.
  1. They can be at a user scope level and applies to all vscode instances
  2. user level ones
  3. ************************************
  4. These will be in a directory like the following
  5. C:\Users\satya\AppData\Roaming\Code\User\snippets\global-snippets.code-snippets
  6. You can have as many files as you want, as long as they are named as such
  7. ...........
  8. Or they can be at a project level
  9. ************************************
  10. 2 options
  11. option 1: /root/.vscode/a.code-snippets
  12. Option 2: /root/.vscode/snippets/a.code-snippets
  1. This is a bit more involved and often unnecessary.
  2. For this, you have to edit the .code-workspace json file which is the work space itself (not a directory)
  3. In that json you have nodes for snippets
  4. Not for the light hearted.