# Configure User Snippets in VSCode

### Overview
To work faster with VSCode, configure global snippets which will be available for all languages. 

### Installation
File -> Preferences -> Configure User Snippets -> New Global Snippets File -> FileNameYouChoose -> Enter

In the opened file, enter the following piece of code:
```javascript
  "Print to console": {
    "scope": "javascript,typescript",
    "prefix": "cl",
    "body": ["console.log($1);"],
    "description": "Log output to console"
  },
 "Arrow Function": {
    "prefix": "arrf",
    "body": ["const ${1:functionName} = ($2) => {", "  $3", "}"],
    "description": "Arrow Function"
  }
```

### Notes
When the snippets grow and it gets complicated to type out inside the body property, use the [snippets-generator](https://snippet-generator.app/) which will help you generate snippets based on your entered data and copy it to your *snippets.code-snippets* file on your VSCode. 
![Snippet Generator Example](https://i.imgur.com/IzyyMKh.png)

Here, tabstops ($1, $2) make the editor cursor move inside a snippet and specify cursor locations. The number is the order in which tabstops will be visited. 
Placeholders are tabstops with values, like `${1:functionName}`. The placeholder text will be inserted and selected such that it can be easily changed.
### References
1. [Snippets in Visual Studio Code](https://code.visualstudio.com/docs/editor/userdefinedsnippets)
2. [Code Faster With Custom VS Code Snippets
](https://www.youtube.com/watch?v=JIqk9UxgKEc)
3. [Snippet Generator](https://snippet-generator.app/?description=Arrow+Function&tabtrigger=arrF&snippet=const+%24%7B1%3AfunctionName%7D+%3D+%28%242%29+%3D%3E+%7B%0A++%243%0A%7D&mode=vscode)