Natuurlijk! Hieronder vind je een uitgebreide gids voor het instellen van WebStorm voor geavanceerde codeanalyse en statische typecontrole voor een Node.js-project met JavaScript: ### 1. WebStorm Inspecties Configureren 1. **Inspecties inschakelen en aanpassen** - Ga naar **File > Settings > Editor > Inspections**. - Zoek naar secties zoals **JavaScript**, **Code Quality Tools**, en **TypeScript**. - Schakel de volgende inspecties in of pas ze aan: - **JavaScript > Type correctness** (voor type-inferentie en controle) - **JavaScript > Linting** (bijvoorbeeld ESLint) - **Code Quality Tools > ESLint** (voor statische codeanalyse) - **Potential bugs** (voor het detecteren van veel voorkomende fouten) - Zorg dat de inspecties op **Error** of **Warning** staan, afhankelijk van je voorkeur. 2. **Gebruik van ESLint voor uitgebreide analyse** - ESLint kan je helpen om codekwaliteit en consistentie te bewaken. - Ga naar **File > Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint**. - Kies **Automatic ESLint configuration** of stel handmatig in: - **ESLint package**: selecteer de locatie van je `node_modules`. - **Configuration file**: kies je `.eslintrc.js`, `.eslintrc.json`, of `.eslintrc.yml`. - **Run ESLint on**: kies **Whole project**. - Klik op **Apply** en **OK**. ### 2. ESLint en Configuratie Maak of pas je ESLint-configuratie aan voor strengere checks: ```json // .eslintrc.json { "env": { "node": true, "es2021": true }, "extends": [ "eslint:recommended", "plugin:node/recommended" ], "plugins": ["node"], "rules": { "no-unused-vars": "warn", "no-undef": "error", "eqeqeq": "error", "curly": "error", "no-console": "warn" } } ``` ### 3. TypeScript voor Typechecking in JavaScript Hoewel je in JavaScript werkt, kun je TypeScript gebruiken voor statische typecontrole: 1. **TypeScript installeren** - Voer in je terminal uit: ```bash npm install --save-dev typescript ``` 2. **TypeScript configureren** - Maak een `tsconfig.json`: ```json { "compilerOptions": { "checkJs": true, "noEmit": true, "allowJs": true, "target": "ES2021", "moduleResolution": "node", "strict": true, "esModuleInterop": true }, "include": ["src/**/*.js"] } ``` 3. **WebStorm instellen voor TypeScript-checks in JS** - Ga naar **File > Settings > Languages & Frameworks > TypeScript**. - Selecteer **Enable**. - Kies voor **Use TypeScript Service** en selecteer de lokale `typescript` package (indien geïnstalleerd). 4. **TypeContrôle inschakelen** - WebStorm gebruikt nu de TypeScript Language Service om je JavaScript-bestanden te analyseren. ### 4. Integratie met Linters en analysetools - **Prettier** voor code formatting: - Installeer: ```bash npm install --save-dev prettier ``` - Maak `.prettierrc` voor consistente stijl. - Configureer WebStorm om Prettier te gebruiken onder **Languages & Frameworks > JavaScript > Prettier**. - **Husky en lint-staged** voor automatische checks vóór commit: - Installeer: ```bash npm install --save-dev husky lint-staged ``` - Voeg toe aan `package.json`: ```json "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.js": ["eslint --fix", "git add"] } ``` ### 5. Extra tools en plugins - **SonarLint** plugin voor WebStorm: - Ga naar **File > Settings > Plugins**. - Zoek naar **SonarLint** en installeer. - Configureer via **File > Settings > SonarLint**. - **JSHint** of andere linters kunnen ook worden geïntegreerd op vergelijkbare wijze. ### 6. Automatisering en CI/CD - Voeg lint- en typecheck-commando’s toe aan je build- of CI-pijplijn om vroegtijdig fouten te vangen. --- Door deze stappen te volgen, zet je een krachtige analyse- en typecontrole-omgeving op in WebStorm, waardoor je vroegtijdig fouten detecteert en de kwaliteit van je Node.js API significant verbetert.

Zeker, hier een gedetailleerde handleiding voor het optimaliseren van je WebStorm-omgeving voor Node.js backend ontwikkeling: ## 1. TypeScript & JavaScript Type Checking ### TypeScript Compiler Configureren - Ga naar **Settings/Preferences > Languages & Frameworks > TypeScript** - Enable **TypeScript Language Service** - Zet **TypeScript compiler** aan voor strikte type checking - Configureer `tsconfig.json` in je projectroot: ```json { "compilerOptions": { "target": "ES2022", "module": "CommonJS", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "outDir": "./dist", "rootDir": "./src" }, "include": ["src/**/*"], "exclude": ["node_modules", "dist"] } ``` ### JavaScript Language Versie - **Settings > Languages & Frameworks > JavaScript** - Kies **JavaScript language version: ECMAScript 2022+** - Enable **Enable TypeScript compiler for JS files** voor JSDoc type checking ## 2. WebStorm Inspecties Configureren ### Code Quality Inspecties - **Settings > Editor > Inspections** - Enable deze JavaScript/TypeScript inspecties: - **Probable bugs** → alle aan - **Code quality issues** → alle aan - **TypeScript** → **Type checking** → alle aan - **Node.js** → **Code validation checks** → alle aan ### Aanbevolen Inspectie Groepen ```javascript // Voorbeelden van wat WebStorm zal detecteren: // 1. Type inconsistenties const user = getUser(); console.log(user.name.toLowerCase()); // Warning als user mogelijk null/undefined // 2. Ongebruikte variabelen const unusedVar = 42; // Wordt gedetecteerd // 3. Promise handling issues async function fetchData() { const data = await fetch('/api'); // Missing error handling } ``` ## 3. ESLint Integratie ### ESLint Configureren - **Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint** - Kies **Automatic ESLint configuration** - Of manual: **Manual ESLint configuration** - Configuratiebestand `.eslintrc.js`: ```javascript module.exports = { env: { node: true, es2022: true, }, extends: [ 'eslint:recommended', '@typescript-eslint/recommended' ], parser: '@typescript-eslint/parser', parserOptions: { ecmaVersion: 'latest', sourceType: 'module', }, rules: { 'no-unused-vars': 'error', 'no-console': 'warn', 'prefer-const': 'error', 'no-var': 'error' } }; ``` ## 4. Node.js Specifieke Configuratie ### Node.js Core Modules - **Settings > Languages & Frameworks > Node.js and NPM** - Enable **Coding assistance for Node.js** - Configureer **Node.js core modules** voor autocomplete ### NPM Scripts - **Settings > Languages & Frameworks > Node.js and NPM** - Enable **Coding assistance for Node.js** - **Package.json** scripts worden automatisch gedetecteerd ## 5. Geavanceerde Type Checking ### JSDoc Annotaties ```javascript /** * @typedef {Object} User * @property {string} id * @property {string} name * @property {number} age */ /** * @param {User} user * @returns {Promise<string>} */ async function processUser(user) { // WebStorm biedt nu autocomplete voor user properties return user.name.toUpperCase(); } ``` ### Flow Type Checking (optioneel) - **Settings > Languages & Frameworks > JavaScript** - Kies **Flow** als JavaScript language version - Specificeer Flow executable pad ## 6. Live Templates voor Code Quality ### Create Custom Live Templates - **Settings > Editor > Live Templates** - Voeg templates toe voor: - Try-catch blocks - JSDoc comments - Type definitions - Error handling patterns Voorbeeld template voor error handling: ```javascript try { $END$ } catch (error) { console.error('Error in $METHOD$:', error); throw error; } ``` ## 7. Debugging Configuratie ### Node.js Debugger - Maak een **Node.js** run configuration - Configureer **JavaScript file** naar je entry point - Enable **Breakpoints** voor: - Line breakpoints - Exception breakpoints - Promise rejection breakpoints ## 8. Code Stijl en Formattering ### Prettier Integratie - **Settings > Languages & Frameworks > JavaScript > Prettier** - Enable **On 'Reformat Code' action** - Enable **On save** ### EditorConfig - Maak een `.editorconfig` bestand: ```ini root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true ``` ## 9. Performance Optimalisatie ### Excluded Mappen - **Settings > Project Structure > Modules** - Markeer als excluded: - `node_modules` - `dist` - `build` - `coverage` ### Power Save Mode - Gebruik **File > Power Save Mode** alleen wanneer nodig - Dit schakelt sommige inspecties uit voor betere performance ## 10. Automatische Code Review ### Pre-commit Hook Configureer in `package.json`: ```json { "scripts": { "lint": "eslint src/**/*.js", "type-check": "tsc --noEmit", "pre-commit": "npm run lint && npm run type-check" } } ``` ### Git Integration - **Settings > Version Control > Commit** - Enable **Perform code analysis** - Enable **Check TODO** ## Monitoring en Onderhoud 1. **Regularly Update Inspections**: Houd WebStorm en plugins up-to-date 2. **Custom Inspection Profiles**: Maak profielen voor verschillende projectfases 3. **Code Metrics**: Gebruik **Code > Inspect Code** voor periodieke reviews Deze configuratie geeft je een robuuste ontwikkelomgeving die vroege fouten detecteert en consistentie in je codebase handhaaft. Start met de basisinspecties en breid geleidelijk uit naar geavanceerde type checking op basis van je projectbehoeften.