Maak aangepaste sjablonen voor code-aanvulling in Tabnine
description
Door het maken van aangepaste sjablonen voor code-aanvulling kan ik mijn coderingssnelheid verbeteren en consistentie met mijn coderingsnormen waarborgen, wat uiteindelijk leidt tot efficiënter ontwikkelen.
prompt
try_prompt
Help me bij het ontwerpen van aangepaste sjablonen voor code-aanvulling in Tabnine die mijn coderingsnormen en vaak gebruikte patronen weerspiegelen. Mijn primaire pro ... more
generate_helper
...
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier zijn enkele suggesties voor aangepaste sjablonen voor code-aanvulling in Tabnine, afgestemd op JavaScript en jouw coderingsnormen. Deze sjablonen helpen je sneller te werken en zorgen voor consistente code.
1. **Standaard React Component (Functioneel):**
```javascript
function ${1:ComponentName}(${2:props}) {
return (
<div>
${3}
</div>
);
}
```
Gebruik: Snel een functionele React component genereren.
2. **Gebruik van fetch API met error handling:**
```javascript
async function ${1:fetchData}(${2:url}) {
try {
const response = await fetch(${2});
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
return data;
} catch (${3:error}) {
console.error('Fetch error:', ${3});
}
}
```
3. **Herbruikbare React Hook voor API calls:**
```javascript
import { useState, useEffect } from 'react';
function use${1:Data}(${2:url}) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(${2})
.then(res => res.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, [${2}]);
return { data, loading, error };
}
```
4. **Consistente logging functie:**
```javascript
function log${1:Message}(${2:message}) {
console.${3:log}(`[${new Date().toISOString()}] ${2}`);
}
```
5. **Kortere arrow functions voor callbacks:**
```javascript
const ${1:callback} = (${2:params}) => {
${3/* code */ }
};
```
**Aanbevelingen voor optimalisatie:**
- Pas placeholders (${1}, ${2}, ...) aan naar jouw voorkeur.
- Voeg vaste imports of configuraties toe in sjablonen.
- Voeg commentaar of documentatie toe binnen sjablonen voor betere codekwaliteit.
Wil je dat ik deze sjablonen in een specifiek formaat of bestand voor je voorbereid, of dat ik ze verder aanpas aan jouw coderingsstijl?
provider: deepseek
model: deepseek-chat
Zeker! Ik help je bij het maken van aangepaste Tabnine-sjablonen voor JavaScript. Hier zijn praktische voorbeelden die je codeerstijl kunnen standaardiseren en je productiviteit verhogen:
## 1. React Component Template
```javascript
// Trigger: "rfc"
/**
* ${1:ComponentName} - ${2:component description}
* @param {object} props - Component properties
* @returns {JSX.Element}
*/
const ${1:ComponentName} = ({ ${3:prop1} }) => {
return (
<div className="${4:component-class}">
${0}
</div>
);
};
export default ${1:ComponentName};
```
## 2. Async Function Handler
```javascript
// Trigger: "asyncHandler"
/**
* ${1:functionName} - ${2:Async function description}
* @async
* @param {${3:parameterType}} ${4:param}
* @returns {Promise<${5:returnType}>}
*/
const ${1:functionName} = async (${4:param}) => {
try {
${0}
return result;
} catch (error) {
console.error('Error in ${1:functionName}:', error);
throw error;
}
};
```
## 3. Custom Hook Template
```javascript
// Trigger: "customHook"
/**
* use${1:HookName} - ${2:Custom hook description}
* @returns {${3:returnObject}}
*/
const use${1:HookName} = () => {
const [${4:state}, set${4/(.*)/${1:/capitalize}/}] = useState(${5:initialState});
${6:useEffect(() => {
// Side effects here
}, []);}
return {
${4:state},
${7:set${4/(.*)/${1:/capitalize}/}}
};
};
export default use${1:HookName};
```
## 4. Error Boundary Component
```javascript
// Trigger: "errorBoundary"
class ${1:ErrorBoundaryName} extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false, error: null };
}
static getDerivedStateFromError(error) {
return { hasError: true, error };
}
componentDidCatch(error, errorInfo) {
console.error('Error caught by boundary:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return (
<div className="error-boundary">
<h2>Something went wrong</h2>
<details>
{this.state.error?.toString()}
</details>
</div>
);
}
return this.props.children;
}
}
```
## 5. API Service Function
```javascript
// Trigger: "apiService"
/**
* ${1:serviceName} - ${2:API service description}
* @param {${3:parameterType}} ${4:data}
* @returns {Promise<${5:responseType}>}
*/
const ${1:serviceName} = async (${4:data}) => {
const response = await fetch(`${6:endpoint}`, {
method: '${7:POST}',
headers: {
'Content-Type': 'application/json',
${8:// additional headers}
},
body: JSON.stringify(${4:data})
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
};
```
## 6. Utility Function Template
```javascript
// Trigger: "utility"
/**
* ${1:functionName} - ${2:Utility function description}
* @param {${3:inputType}} ${4:input}
* @returns {${5:outputType}}
*/
const ${1:functionName} = (${4:input}) => {
${6:// Input validation}
if (!${4:input}) {
throw new Error('${4:input} is required');
}
${0}
return result;
};
```
## 7. Context Provider Template
```javascript
// Trigger: "contextProvider"
const ${1:ContextName} = createContext();
export const ${1:ContextName}Provider = ({ children }) => {
const [${2:state}, set${2/(.*)/${1:/capitalize}/}] = useState(${3:initialState});
const value = {
${2:state},
set${2/(.*)/${1:/capitalize}/},
${4:// additional methods}
};
return (
<${1:ContextName}.Provider value={value}>
{children}
</${1:ContextName}.Provider>
);
};
export const use${1:ContextName} = () => {
const context = useContext(${1:ContextName});
if (!context) {
throw new Error('use${1:ContextName} must be used within ${1:ContextName}Provider');
}
return context;
};
```
## 8. Form Validation Hook
```javascript
// Trigger: "formValidation"
/**
* useFormValidation - Form validation hook
* @param {object} initialValues
* @param {object} validationSchema
* @returns {object}
*/
const useFormValidation = (initialValues, validationSchema) => {
const [values, setValues] = useState(initialValues);
const [errors, setErrors] = useState({});
const [isValid, setIsValid] = useState(false);
const validateField = (name, value) => {
const validator = validationSchema[name];
if (validator) {
const error = validator(value);
setErrors(prev => ({ ...prev, [name]: error }));
return !error;
}
return true;
};
const handleChange = (name, value) => {
setValues(prev => ({ ...prev, [name]: value }));
validateField(name, value);
};
return {
values,
errors,
isValid,
handleChange,
setValues
};
};
```
## Hoe deze sjablonen te gebruiken in Tabnine:
1. **Tabnine Configuratie**:
- Ga naar Tabnine instellingen → Custom Code Snippets
- Voeg elk sjabloon toe met de bijbehorende trigger
2. **Aanpassen aan jouw stijl**:
- Wijzig de JSDoc format naar jouw voorkeur
- Pas error handling aan naar jouw standaarden
- Voeg specifieke import statements toe die je vaak gebruikt
3. **Extra tips**:
- Gebruik consistente trigger namen (bijv. "rfc" voor React Functional Components)
- Voeg je eigen vaak gebruikte code patronen toe
- Houd sjablonen modulair en herbruikbaar
Deze sjablonen zullen je helpen om consistentie te behouden en veelvoorkomende codeblokken snel te genereren!