Projex SnippetsList of snnipets to work with react, typescript and more Installation Launch VS Code Quick Open ( Ctrl+P), paste the following command, and press enter.Copied to clipboard |
|
| Name | Prefix | Description |
|---|---|---|
| Component title | compmarkdowntitle | Add component title |
| Component description | compdescription | Add component description |
| Component configuration | compconfig | Add component configuration |
| Component props | compprops | Add component props |
| Props description | propsdescription | Add prop description |
| CSS Customization | css | Add css customization |
| Messages | msg | Add message details |
| React Basic Hook | csreacthook | Import and use React basic hook |
| Preact Basic Hook | cspreacthook | Import and use Preact basic hook |
| Import styles | csimpsty | Import styles module |
| Import Preact Styles Module | csimppreacsty | Import Preact styles module |
| React Component with CSS Handles | cscompcsshandles | Create a React component with CSS handles |
| Export by default | csexportdef | Export a component by default |
| Import and export before default | csimporexportdef | Import and export a component before the default |
| React Provider | cscomprovider | Create a React context provider |
| Preact Provider | cspreactcomprovider | Create a Preact context provider |
| Preact Component | cspreactcomponent | Create a Preact component with styles |
1) How do I use the snippets?
To insert a snippet, you can just type one of the prefixes in a file, and you will be offered a completion suggestion. The setting Editor: Snippet Suggestions controls whether snippets are shown with other suggestions and how they are sorted. By default, they are shown inline.
Alternatively, you can open the Command Palette (Ctrl+Shift+P) and run the command "Insert Snippet", which presents you with a list to choose from.
2) How do I add shortcuts for these snippets?
Run the command Preferences: Open Keyboard Shortcuts (JSON) to open the keyboard shortcuts config (keybindings.json). Add an new object to the array such as this:
[
{
"key": "ctrl+t",
"mac": "cmd+t",
"command": "editor.action.insertSnippet",
"when": "!editorReadonly && editorLangId == markdown",
"args": {
"langId": "markdown",
"name": "Insert task list"
}
}
]