Natuurlijk! Hier is een uitgebreide gids om een geavanceerde projectconfiguratie voor "MijnWebApp" in Sublime Text op te zetten, inclusief aangepaste build systemen, linting, formattering en workflows. 1. Projectinstellingen maken ----------------------------- Maak een projectbestand aan: - Ga naar **Project > Save Project As...** en sla het op als `MijnWebApp.sublime-project`. - Voeg de volgende inhoud toe voor basisconfiguratie: ```json { "folders": [ { "path": "/pad/naar/mijnwebapp" } ], "settings": { "build_systems": [], // Hier voegen we later build systemen toe "linter_enabled": true, "linter": "eslint", // Bij gebruik van JavaScript "formatter": "prettier" // Bij gebruik van Prettier } } ``` 2. Aangepaste build systemen instellen -------------------------------------- Maak een custom build systeem voor bijvoorbeeld JavaScript met ESLint en Prettier: - Ga naar **Tools > Build System > New Build System...** en voeg bijvoorbeeld toe: ```json { "shell_cmd": "npm run build", "name": "NPM Build", "working_dir": "${project_path}" } ``` Voor meer controle, bijvoorbeeld voor Babel of Webpack: ```json { "shell_cmd": "npx webpack --config webpack.config.js", "name": "Webpack Build", "working_dir": "${project_path}" } ``` Bewaar dit als `Webpack.sublime-build` in je User map. 3. Linting integreren --------------------- Gebruik een linter zoals ESLint: - Installeer ESLint lokaal in je project via npm: ```bash npm install eslint --save-dev ``` - Voeg een `.eslintrc.json` toe met je regels. - Installeer SublimeLinter en SublimeLinter-eslint via Package Control. - Configureer SublimeLinter: ```json { "linters": { "eslint": { "args": [] } } } ``` - Zorg dat je in je project de regels hebt ingesteld en dat ESLint werkt via de command line. 4. Formattering instellen ------------------------- Gebruik Prettier voor code formatting: - Installeer Prettier: ```bash npm install prettier --save-dev ``` - Maak een `.prettierrc` bestand met je voorkeuren. - Installeer Sublime Text plugin voor Prettier (bijvoorbeeld via Package Control). - Configureer een sneltoets of commando om Prettier uit te voeren, bijvoorbeeld via Sublime Text's build systeem of commando palette. 5. Automatisering van workflows ------------------------------- Gebruik **npm scripts** voor automatisering: - Voeg in je `package.json`: ```json { "scripts": { "lint": "eslint src/**/*.js", "format": "prettier --write src/**/*.js", "build": "webpack --config webpack.config.js" } } ``` - Binnen Sublime Text kun je de build systemen aanpassen zodat ze deze scripts uitvoeren. Gebruik **tasks** en **external tools**: - Maak aangepaste commando's in Sublime Text via het Command Palette en custom keybindings om linten, formatteren en build processen snel uit te voeren. - Automatiseer met Git hooks (bijv. Husky) om code te linten en formatteren vóór commits. 6. Samenvatting van workflow ---------------------------- - Code schrijven in Sublime Text. - Save en formatter met Prettier via sneltoets of build. - Run linting via SublimeLinter of npm script. - Build je project met je custom build systeem. - Gebruik Git hooks voor automatische checks bij commits. --- Wil je dat ik je help met een specifiek voorbeeld van een `.sublime-build` of configuratiebestanden?

Zeker, hier is een geavanceerde projectconfiguratie voor je "MijnWebApp" in Sublime Text: ## 1. Projectbestand aanmaken Maak een bestand `MijnWebApp.sublime-project` aan met deze inhoud: ```json { "folders": [ { "name": "MijnWebApp", "path": ".", "file_exclude_patterns": [ "*.log", "*.tmp", "node_modules", ".git", "dist", "build" ], "folder_exclude_patterns": [ "__pycache__", ".venv", "vendor" ] } ], "settings": { "tab_size": 2, "translate_tabs_to_spaces": true, "trim_trailing_white_space_on_save": true, "ensure_newline_at_eof_on_save": true, "rulers": [80, 120], "word_wrap": "auto", "wrap_width": 120 }, "build_systems": [ { "name": "MijnWebApp - Development Build", "cmd": ["npm", "run", "dev"], "working_dir": "${project_path}", "env": {"NODE_ENV": "development"}, "target": "terminus_exec", "cancel": {"kill": true} }, { "name": "MijnWebApp - Production Build", "cmd": ["npm", "run", "build"], "working_dir": "${project_path}", "env": {"NODE_ENV": "production"}, "target": "terminus_exec" } ] } ``` ## 2. Geavanceerde Build Systemen Voeg deze build systemen toe aan je projectconfiguratie: ```json "build_systems": [ { "name": "ESLint Fix", "cmd": ["npx", "eslint", "--fix", "${file}"], "working_dir": "${project_path}", "file_regex": "^(.+?):(\\d+):(\\d+): (.*)$" }, { "name": "Prettier Format", "cmd": ["npx", "prettier", "--write", "${file}"], "working_dir": "${project_path}" }, { "name": "TypeScript Check", "cmd": ["npx", "tsc", "--noEmit"], "working_dir": "${project_path}" } ] ``` ## 3. Linting en Formattering Installeer deze packages via Package Control: - **LSP** (Language Server Protocol) - **LSP-eslint** - **LSP-typescript** - **Terminus** (voor geïntegreerde terminal) Voeg deze LSP configuratie toe aan je gebruikersinstellingen: ```json { "lsp_format_on_save": true, "lsp_code_actions_on_save": { "source.fixAll.eslint": true } } ``` ## 4. Geautomatiseerde Workflows Maak een `.sublime-commands` bestand aan in je projectmap: ```json [ { "caption": "MijnWebApp: Full Build & Test", "command": "chain", "args": { "commands": [ ["exec", {"cmd": ["npm", "run", "lint"]}], ["exec", {"cmd": ["npm", "run", "build"]}], ["exec", {"cmd": ["npm", "test"]}] ] } }, { "caption": "MijnWebApp: Code Quality Check", "command": "chain", "args": { "commands": [ ["exec", {"cmd": ["npm", "run", "lint"]}], ["exec", {"cmd": ["npx", "tsc", "--noEmit"]}] ] } } ] ``` ## 5. Snippets voor Automatisering Maak project-specifieke snippets aan in `Packages/User/MijnWebApp/`: **React Component Snippet:** ```json { "scope": "source.js, source.ts, source.tsx", "description": "React Function Component", "content": "const ${1:Component} = (${2:props}) => {\n return (\n <div>\n ${3}\n </div>\n );\n};\n\nexport default ${1:Component};" } ``` ## 6. Key Bindings voor Workflows Voeg deze key bindings toe aan je projectconfiguratie: ```json "keys": [ { "keys": ["ctrl+shift+b"], "command": "show_overlay", "args": {"overlay": "command_palette", "text": "MijnWebApp:"} }, { "keys": ["ctrl+shift+l"], "command": "exec", "args": {"cmd": ["npm", "run", "lint"]} } ] ``` ## Installatie Stappen: 1. **Sla het projectbestand op** in je projectroot 2. **Installeer vereiste packages** via Package Control 3. **Zorg dat Node.js dependencies** geïnstalleerd zijn: ```bash npm install --save-dev eslint prettier typescript ``` 4. **Configureer ESLint en Prettier** in je project 5. **Herstart Sublime Text** om de configuratie te laden ## Gebruik: - **Ctrl+Shift+B**: Toon project-specifieke commands - **Ctrl+B**: Selecteer build system - **Auto-formatting** bij opslaan via LSP - **Geïntegreerde terminal** voor build processen Deze configuratie biedt een complete ontwikkelomgeving met geautomatiseerde linting, formattering en build workflows specifiek voor je MijnWebApp project.