Natuurlijk! Hieronder vind je stapsgewijze instructies om de codeopmaak en stijlinstellingen in WebStorm aan te passen volgens de Airbnb stijlhandleiding voor JavaScript, met 2 spaties inspringing en specifieke plaatsing van accolades. Ik zal ook aangeven hoe je deze instellingen project- of teambreed kunt toepassen. --- ### 1. ESLint integreren voor Airbnb stijl De meest efficiënte manier om de Airbnb stijl te volgen, is door ESLint te gebruiken met het Airbnb-configuratiebestand. #### a. ESLint installeren - Open je terminal in de root van je project. - Voer uit: ```bash npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-import ``` - Maak een `.eslintrc.json` bestand aan (of gebruik een bestaand): ```json { "extends": ["airbnb-base"], "rules": { // Pas hier eventuele afwijkingen of extra regels toe } } ``` #### b. ESLint plugin in WebStorm - Ga naar **Preferences** (macOS) of **Settings** (Windows/Linux). - Navigeer naar **Languages & Frameworks** > **JavaScript** > **Code Quality Tools** > **ESLint**. - Selecteer **Automatic ESLint configuration** of kies **Manual configuration** en geef het pad naar je lokale ESLint installatie, bv. `node_modules/eslint/bin/eslint.js`. - Zorg dat **Run for files** en **On code reformat** aangevinkt zijn, zodat ESLint automatisch wordt toegepast. --- ### 2. Code Style aanpassen in WebStorm (zonder ESLint) Als je geen ESLint gebruikt, kun je de codeopmaak handmatig aanpassen: #### a. Instellingen voor JavaScript (projectbreed toepassen) - Ga naar **Preferences / Settings** > **Editor** > **Code Style** > **JavaScript**. - **Tab and Indents:** - **Tab size:** 2 - **Indent:** 2 - **Continuation indent:** 2 - **Use tab character:** uitgevinkt (voor spaties) - **Spaces:** - Pas de spaties aan volgens jouw voorkeur: - **Before opening brace**: uitvinken - **Within braces (object literals, destructuring)**: aan - **After keywords (if, for, while, etc.)**: aan - **Wrapping and Braces:** - Klik op **Set from** en kies **Predefined Style** > **Airbnb** (indien beschikbaar). Anders stel je handmatig in: - Zorg dat **Brace placement** is ingesteld op **Next line** of **End of line**, afhankelijk van jouw voorkeur. - Voor specifieke plaatsing van accolades: - **Object literals:** opening brace op dezelfde regel. - **Functions:** openende accolade op dezelfde regel, tenzij anders gewenst. - Klik op **Apply** en **OK**. #### b. Accolades en Spatiëring - Ga naar tab **Spaces**: - **Before opening brace**: uit - **Inside braces**: aan - **After opening/Before closing**: afhankelijk van je voorkeur, meestal uit. --- ### 3. Plaatsing van accolades aanpassen Voor meer controle over accolades: - Ga naar **Editor** > **Code Style** > **JavaScript** > **Braces**. - Stel in: - **Object literals**: **Next line** of **Same line**, afhankelijk van je stijl. - **Function declarations**: hetzelfde. - **Control statements** (if, for, etc.): hetzelfde. - Kies voor consistentie volgens de Airbnb stijl (bijvoorbeeld: opening accolade op dezelfde regel of op een nieuwe regel). --- ### 4. Toevoegen van een .editorconfig (optioneel) Voor teambreedheid en consistentie: - Maak een `.editorconfig` bestand aan in je project: ```ini root = true [*.js] indent_style = space indent_size = 2 insert_final_newline = true charset = utf-8 trim_trailing_whitespace = true ``` - WebStorm ondersteunt EditorConfig automatisch. Hierdoor worden basisstijlen gedeeld. --- ### 5. Toepassen en testen - Na het instellen, selecteer je je bestanden en gebruik je **Code > Reformat Code** (oftewel `Ctrl + Alt + L`) om je code volgens de nieuwe stijl te formatteren. - Gebruik ESLint (indien geïnstalleerd) om je code automatisch te linten en te corrigeren. --- ### Samenvatting - Installeer en configureer ESLint met de Airbnb-configuratie voor volledige naleving. - Pas via **Preferences/Settings > Editor > Code Style > JavaScript** de inspringing, spaties en accolades aan. - Voeg indien nodig een `.editorconfig` toe voor teamconsistentie. - Gebruik de reformatting en linting tools in WebStorm om je code te stylen volgens de normen. --- Mocht je nog verdere hulp nodig hebben bij specifieke regels of configuraties, laat het gerust weten!

Zeker, ik help je graag WebStorm in te richten volgens de Airbnb JavaScript Style Guide. Hier zijn gedetailleerde instructies: ## 1. Editorconfig Bestand Instellen Maak eerst een `.editorconfig` bestand in je projectroot: ```ini root = true [*] charset = utf-8 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true indent_style = space indent_size = 2 [*.md] trim_trailing_whitespace = false ``` ## 2. Code Stijl Configureren ### Hoofdinstellingen: 1. Ga naar **File > Settings** (Windows/Linux) of **WebStorm > Preferences** (Mac) 2. Navigeer naar **Editor > Code Style > JavaScript** ### Inspringing: - **Tab Size**: 2 - **Indent**: 2 - **Continuation Indent**: 2 - **Use tab character**: UITvinken ### Tabs en Indents Tab: - **Smart tabs**: UITvinken - **Keep indents on empty lines**: UITvinken ### Spaties Configuratie: Ga naar de **Spaces** tab en configureer: **Aanvinken:** - Before parentheses (in function declaration) - Before parentheses (in function expression) - In function expression parentheses - Before left brace (in function declaration) - Before left brace (in function expression) **Uitvinken:** - Within parentheses (alle opties) - Within brackets (alle opties) ### Accolades Plaatsing: Ga naar **Wrapping and Braces** tab: **Function/Class Declarations:** - **Function declaration**: Next line - **Function expression**: Next line - **Class declaration**: Next line **Control Statements:** - **if() statement**: Next line - **for() statement**: Next line - **while() statement**: Next line - **do...while() statement**: Next line - **switch() statement**: Next line - **try/catch/finally**: Next line ## 3. ESLint Integratie ### ESLint Installeren: ```bash npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-import ``` ### ESLint Configuratie (.eslintrc.json): ```json { "extends": "airbnb-base", "rules": { "indent": ["error", 2], "linebreak-style": ["error", "unix"], "quotes": ["error", "single"], "semi": ["error", "always"] } } ``` ### WebStorm ESLint Instellingen: 1. **Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint** 2. **Automatic ESLint configuration**: Aanvinken 3. **Run eslint --fix on save**: Aanvinken (optioneel) ## 4. Imports en Exports Ga naar **Settings > Editor > Code Style > JavaScript > Imports**: **Imports Tab:** - **Use single quotes**: Aanvinken - **Insert imports on top**: Aanvinken - **Sort imports**: Aanvinken - **Sort type**: "by modules and names" ## 5. Projectbrede Toepassing ### Schema Exporteren: 1. **Settings > Editor > Code Style > JavaScript** 2. Klik op het tandwiel icoon rechts van "Scheme" 3. Kies **Export** en sla het XML bestand op ### Schema Importeren (voor teamleden): 1. **Settings > Editor > Code Style > JavaScript** 2. Klik op het tandwiel icoon 3. Kies **Import Scheme** en selecteer het XML bestand ## 6. Team Sharing Opties ### Optie 1: WebStorm Settings Repository 1. Maak een Git repository aan voor WebStorm instellingen 2. Gebruik **File > Manage IDE Settings > Export Settings** 3. Teamleden kunnen importeren via **File > Manage IDE Settings > Import Settings** ### Optie 2: Project Configuratie Bestanden Zorg dat deze bestanden in je repository staan: - `.editorconfig` - `.eslintrc.json` - `.prettierrc` (indien gebruikt) ## 7. Extra Tips ### Live Templates: Maak aangepaste live templates voor veelgebruikte code patronen. ### File Watchers: Stel Prettier in als file watcher voor automatische formatting. ### Code Inspections: Configureer **Settings > Editor > Inspections** om Airbnb-specifieke regels te benadrukken. ## 8. Controleren van Configuratie Test je configuratie met deze voorbeeldcode: ```javascript // Correct geformatteerd volgens Airbnb function exampleFunction(param) { if (param) { return { key: 'value', anotherKey: 42, }; } return null; } // Array method chaining const result = array .filter(item => item.isActive) .map(item => item.name) .sort(); ``` Met deze instellingen zal WebStorm automatisch code formatteren volgens de Airbnb style guide en inconsistenties markeren via ESLint.