Automatiseer Visual Studio Code taken met aangepaste snippets en macro's
description
Stelt gebruikers in staat tijd te besparen door repetitieve programmeertaken te automatiseren, vermindert fouten door consistente codepatronen te gebruiken en personaliseert de ontwikkelomgeving voor efficiëntie. In tegenstelling tot algemene configuratieprompts richt deze zich op het creëren van door de gebruiker gedefinieerde automatiseringstools op maat van hun specifieke workflow.
prompt
Help me met het ontwerpen van aangepaste Visual Studio Code snippets en macro's die mijn repetitieve programmeertaken automatiseren. Geef de programmeertaal op: <voer je programmeertaal in>. Beschrijf de repeti ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een voorbeeld van een aangepaste Visual Studio Code-snippet voor het genereren van een React functionele component met props en state, inclusief een trigger 'rfc'.
**Stap 1: Open je snippets bestand**
Ga naar:
`File` > `Preferences` > `User Snippets` > kies of maak een `javascript.json` of een globale snippets file.
**Stap 2: Voeg de volgende snippet toe**
```json
{
"React Functionele Component": {
"prefix": "rfc",
"body": [
"import React, { useState } from 'react';",
"",
"const ${1:ComponentName} = (${2:props}) => {",
" const [${3:state}, ${4:setState}] = useState(${5:initialState});",
"",
" return (",
" <div>",
" ${6:/* component JSX */}",
" </div>",
" );",
"};",
"",
"export default ${1:ComponentName};"
],
"description": "React functionele component met props en state"
}
}
```
**Gebruik:**
Typ in je JavaScript-bestand `rfc` en druk op `Tab` (of je gekozen sneltoets), en de snippet wordt uitgebreid tot het bovenstaande template.
**Optioneel:**
Wil je de snippet nog verder personaliseren of uitbreiden, bijvoorbeeld met extra props of hooks? Laat het me weten, ik help je graag verder!
provider: deepseek
model: deepseek-chat
Zeker! Hier zijn aangepaste Visual Studio Code snippets voor het automatiseren van React functionele componenten met props en state:
## Snippet Configuratie (JSON)
Voeg dit toe aan je `javascript.json` of `javascriptreact.json` snippets bestand:
```json
{
"React Function Component": {
"prefix": "rfc",
"body": [
"import React, { useState } from 'react';",
"",
"const ${1:ComponentName} = ({ ${2:props} }) => {",
" const [${3:state}, set${3/(.*)/${1:/capitalize}/}] = useState(${4:initialState});",
"",
" return (",
" <div>",
" ${5:<!-- JSX content -->}",
" </div>",
" );",
"};",
"",
"export default ${1:ComponentName};"
],
"description": "Creëert een React functionele component met props en state"
}
}
```
## Alternatieve versie met useEffect (voor lifecycle methods)
```json
{
"React Function Component with useEffect": {
"prefix": "rfce",
"body": [
"import React, { useState, useEffect } from 'react';",
"",
"const ${1:ComponentName} = ({ ${2:props} }) => {",
" const [${3:state}, set${3/(.*)/${1:/capitalize}/}] = useState(${4:initialState});",
"",
" useEffect(() => {",
" ${5:// side effects here}",
" }, [${6:dependencies}]);",
"",
" return (",
" <div>",
" ${7:<!-- JSX content -->}",
" </div>",
" );",
"};",
"",
"export default ${1:ComponentName};"
],
"description": "React functionele component met state en useEffect"
}
}
```
## Installatie instructies:
1. Open VS Code
2. Ga naar `File > Preferences > Configure User Snippets`
3. Selecteer `javascript.json` of `javascriptreact.json`
4. Plak de gewenste snippet in het bestand
5. Sla het bestand op
## Gebruik:
- Typ `rfc` + Tab om de basis component te genereren
- Navigeer door de placeholders met Tab
- `${1:ComponentName}` - vervang met je component naam
- `${2:props}` - voeg props toe gescheiden door komma's
- `${3:state}` - naam van je state variabele
- `${4:initialState}` - initiële state waarde
De snippet ondersteunt VS Code's tab-navigatie zodat je snel door de verschillende aanpasbare delen kunt bewegen.