vscode 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...
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
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
$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