Natuurlijk! Hier is een gedetailleerde richtlijn voor codestijl voor jouw webapplicatieproject in JavaScript, ontworpen om consistentie en kwaliteit te waarborgen met behulp van Tabnine: --- # Richtlijn voor Codestijl voor JavaScript Webapplicatie ## Inleiding Deze richtlijn beschrijft de coderingsconventies, best practices en workflow-voorkeuren voor het ontwikkelteam. Het doel is een consistente codebasis te behouden, leesbaarheid te bevorderen en het onderhoud te vergemakkelijken. --- ## 1. Algemene Coderingsconventies ### 1.1 Indentatie - Gebruik twee spaties voor inspringingen. - Bijvoorbeeld: ```javascript function voorbeeld() { if (true) { console.log('Correct ingesprongen'); } } ``` ### 1.2 Laatste regel - Voeg altijd een lege regel toe aan het einde van elk bestand. ### 1.3 Variabelen en functies - Gebruik `camelCase` voor variabelen, functies en methoden. - Voor constante waarden die niet veranderen, gebruik `UPPER_SNAKE_CASE`. ### 1.4 Semicolons - Gebruik altijd puntkomma’s aan het einde van instructies. ### 1.5 Aanhalingstekens - Gebruik enkelvoudige aanhalingstekens (' ') voor strings. - Voorbeeld: ```javascript const naam = 'John'; ``` ## 2. Bestandsstructuur en Naming - Bestandsnamen: gebruik `kebab-case` (bijvoorbeeld `user-authentication.js`). - Plaats gerelateerde modules in mappen met duidelijke namen, bijvoorbeeld `/components`, `/services`. --- ## 3. Codekwaliteit en Best Practices ### 3.1 Gebruik van Tabnine - Configureer Tabnine om te leren van de codebase voor contextuele suggesties. - Verifieer suggesties op correctheid en consistentie voordat je ze accepteert. ### 3.2 Commentaar - Schrijf duidelijke en beknopte commentaren boven complexe functies of logica. - Gebruik JSDoc voor functiedefinities: ```javascript /** * Bereken de som van twee getallen. * @param {number} a - Het eerste getal. * @param {number} b - Het tweede getal. * @returns {number} De som van a en b. */ function som(a, b) { return a + b; } ``` ### 3.3 Functionele code - Schrijf kleine, herbruikbare functies. - Vermijd lange functies (> 20 regels). ### 3.4 Asynchroon werken - Gebruik `async/await` in plaats van `.then()` waar mogelijk. - Bijvoorbeeld: ```javascript async function fetchData() { const response = await fetch('/api/data'); const data = await response.json(); return data; } ``` ### 3.5 Error handling - Implementeer try-catch blokken bij asynchrone operaties. - Voorbeeld: ```javascript try { const data = await fetchData(); } catch (error) { console.error('Fout bij het ophalen van data:', error); } ``` --- ## 4. Linting en Formatteren - Gebruik ESLint met de Airbnb-configuratie als basis. - Gebruik Prettier voor automatische codeformattering. - Automatiseer linting en formattering via pre-commit hooks (bijvoorbeeld met Husky). --- ## 5. Workflow en Samenwerking ### 5.1 Branching - Werk op feature branches afgekort met `feature/`, `bugfix/` of `hotfix/`. - Bijvoorbeeld: `feature/login-screen`. ### 5.2 Commit-berichten - Gebruik duidelijke, beknopte berichten. - Voorbeeld: ``` feat: voeg login functionaliteit toe fix: herstel fout in gebruikersauthenticatie ``` ### 5.3 Code reviews - Voer peer reviews uit voor elke pull request. - Controleer op consistentie met deze richtlijn en codekwaliteit. --- ## 6. Voorbeeldprojectstructuur ``` /src /components login-form.js /services api.js /utils helpers.js index.js ``` --- ## 7. Voorbeelden ### Goede functie: ```javascript /** * Controleert of een gebruiker is ingelogd. * @param {Object} user - Gebruikersobject. * @returns {boolean} - True als ingelogd, anders false. */ function isLoggedIn(user) { return !!user && user.loggedIn === true; } ``` ### Slechte praktijk: ```javascript function checkUser(u){return u!=null&&u.loggedIn===true;} ``` --- ## 8. Samenvatting - Consistente indeling en naamgeving. - Gebruik moderne JavaScript (ES6+). - Goede commentaar en documentatie. - Automatische tools inzetten voor linting en formattering. - Regelmatige code reviews en teamafstemming. --- Voor verdere afstemming en implementatie, stel ik voor om deze richtlijnen te documenteren in een `CONTRIBUTING.md`-bestand en automatische checks in te stellen via CI/CD-pijplijnen. Heeft u nog specifieke wensen of vragen?

Zeker! Hier is een gedetailleerde codestijlrichtlijn voor je JavaScript webapplicatie project met Tabnine: # Codestijlrichtlijn JavaScript Webapplicatie ## 1. Algemene Conventies ### Bestandsstructuur ``` src/ ├── components/ # Herbruikbare UI componenten ├── pages/ # Pagina-specifieke componenten ├── hooks/ # Custom React hooks ├── utils/ Hulpfunctions ├── services/ # API calls en externe services ├── styles/ # Styling bestanden └── constants/ # Constante waarden ``` ### Basisregels - Gebruik **2 spaties** voor indentatie - **UTF-8** bestandsencoding - **LF** (Unix) line endings - Maximale regelbreedte: **80 karakters** ## 2. JavaScript/ES6+ Conventies ### Variabelen en Functies ```javascript // ✅ Goed const userName = 'Jan'; let counter = 0; const MAX_USERS = 10; function calculateTotalPrice(items) { return items.reduce((total, item) => total + item.price, 0); } // ❌ Vermijden var username = 'Jan'; function CalculateTotalPrice(items) { ... } ``` ### Arrow Functions ```javascript // ✅ Goed const handleSubmit = (event) => { event.preventDefault(); submitForm(); }; const double = (x) => x * 2; // ❌ Vermijden const handleSubmit = function(event) { ... }; ``` ## 3. React-specifieke Conventies ### Componenten ```javascript // ✅ Functionele componenten met destructuring const UserProfile = ({ user, onUpdate, isEditing }) => { const [localUser, setLocalUser] = useState(user); const handleSave = useCallback(() => { onUpdate(localUser); }, [localUser, onUpdate]); return ( <div className="user-profile"> <h2>{user.name}</h2> {isEditing && <EditForm user={localUser} onSave={handleSave} />} </div> ); }; // Props destructuring in function body als er veel props zijn const ComplexComponent = (props) => { const { user, permissions, settings, onSave, onCancel, ...restProps } = props; }; ``` ### Hooks ```javascript // ✅ Custom hooks beginnen met 'use' const useUserData = (userId) => { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const fetchUser = async () => { try { const userData = await userService.getById(userId); setUser(userData); } catch (error) { console.error('Fout bij ophalen gebruiker:', error); } finally { setLoading(false); } }; fetchUser(); }, [userId]); return { user, loading }; }; ``` ## 4. Naamgevingsconventies ### Componenten en Bestanden ```javascript // ✅ PascalCase voor componenten en bestanden UserProfile.jsx LoginForm.jsx AddressForm.jsx // ✅ camelCase voor utilities en hooks formatCurrency.js useLocalStorage.js apiHelpers.js ``` ### CSS Classes ```javascript // ✅ kebab-case voor CSS classes <div className="user-profile-card"> <div className="form-input--error"> ``` ## 5. Imports en Exports ```javascript // ✅ Geordende imports // 1. Externe dependencies import React, { useState, useEffect } from 'react'; import { useRouter } from 'next/router'; // 2. Interne components import UserProfile from '../components/UserProfile'; import LoadingSpinner from '../components/LoadingSpinner'; // 3. Utilities en helpers import { formatDate, validateEmail } from '../../utils/helpers'; import { API_ENDPOINTS } from '../../constants/api'; // 4. Styling import './UserPage.scss'; // ✅ Named exports voor utilities export { formatCurrency, validateForm }; export default UserProfile; ``` ## 6. Error Handling ```javascript // ✅ Async/await met try-catch const fetchData = async (url) => { try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP fout: ${response.status}`); } return await response.json(); } catch (error) { console.error('Data ophalen mislukt:', error); throw error; // Opnieuw throwen voor error boundaries } }; // ✅ Error boundaries in React class ErrorBoundary extends Component { state = { hasError: false }; static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { logErrorToService(error, errorInfo); } render() { if (this.state.hasError) { return <FallbackUI />; } return this.props.children; } } ``` ## 7. Performance Best Practices ```javascript // ✅ Memoization voor zware berekeningen const ExpensiveComponent = React.memo(({ data }) => { const processedData = useMemo(() => { return data.filter(item => item.active) .sort((a, b) => a.name.localeCompare(b.name)); }, [data]); return <div>{/* render processedData */}</div>; }); // ✅ Lazy loading voor routes const LazyDashboard = React.lazy(() => import('./components/Dashboard')); ``` ## 8. Tabnine Configuratie ### Aanbevolen Tabnine Instellingen ```json { "tabnine.experimentalAutoImports": true, "tabnine.codeLensEnabled": true, "tabnine.acceptCompletionOnEnter": "on" } ``` ### Tabnine Prompts voor je Team ``` // Gebruik deze comments voor consistente Tabnine suggesties: // TODO: Validatie toevoegen voor email formaat // FIXME: Memory leak oplossen in useEffect // OPTIMIZE: Herberekeningen reduceren in deze component // SECURITY: Input sanitization implementeren ``` ## 9. Code Review Checklist ### Vereisten voor Merge Request - [ ] ESLint errors opgelost - [ ] Alle tests slagen - [ ] Code is gedocumenteerd - [ ] Geen console.log statements in productiecode - [ ] Accessibiliteit (a11y) gecontroleerd - [ ] Responsive design getest ## 10. ESLint Configuratie ```json { "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:react-hooks/recommended" ], "rules": { "react/prop-types": "error", "no-unused-vars": "error", "prefer-const": "error", "no-console": "warn" } } ``` ## 11. Git Workflow ### Commit Conventies ``` feat: nieuwe gebruiker registratie fix: oplossing voor login bug docs: API documentatie bijgewerkt style: code formatting verbeterd refactor: component herstructurering test: unit tests toegevoegd ``` Deze richtlijn zorgt voor consistentie in je webapplicatie project en optimaliseert de samenwerking met Tabnine voor efficiëntere development.