Hier is een gedetailleerde handleiding om een gepersonaliseerde code snippet manager in Sublime Text te maken, inclusief categorisatie, organisatie, onderhoud en best practices voor JavaScript en Python: 1. Snippets maken en opslaan a. Nieuwe snippets aanmaken: - Open Sublime Text. - Ga naar Tools > Snippet... of gebruik het sneltoetscommando (Ctrl+Alt+S op Windows/Linux, Cmd+Alt+S op Mac). - Een nieuw snippet-voorbeeld wordt geopend. Vul de inhoud in volgens het XML-formaat: ```xml <snippet> <content><![CDATA[ # Jouw code hier ]]></content> <tabTrigger>triggernaam</tabTrigger> <scope>scope</scope> <description>Omschrijving</description> </snippet> ``` b. Voorbeeld voor Python: ```xml <snippet> <content><![CDATA[ def ${1:functie}(${2:parameters}): ${3:# code} ]]></content> <tabTrigger>def</tabTrigger> <scope>source.python</scope> <description>Python functie</description> </snippet> ``` Voor JavaScript: ```xml <snippet> <content><![CDATA[ function ${1:naam}(${2:parameters}) { ${3:// code} } ]]></content> <tabTrigger>func</tabTrigger> <scope>source.js</scope> <description>JavaScript functie</description> </snippet> ``` c. Opslaan: - Sla de snippet op met een duidelijke naam, bv. `python_functie.sublime-snippet` of `js_functie.sublime-snippet`. - Bewaar ze in een centrale map, bijvoorbeeld `Snippets/`, zodat je ze makkelijk terugvindt. 2. Organiseren en categoriseren van snippets a. Mappenstructuur: - Maak een hoofdmap voor snippets, bijvoorbeeld `MySnippets/`. - Maak submappen voor verschillende talen of projecttypes: ``` MySnippets/ ├── Python/ └── JavaScript/ ``` - Plaats de relevante snippets in de juiste submap. b. Sublime Text configureren voor meerdere snippet-locaties: - Ga naar Preferences > Browse Packages. - Maak een nieuwe map, bijvoorbeeld `MySnippets`, en plaats je snippets daarin. - Om Sublime dit te laten herkennen, kun je een aangepaste pakket maken: - Maak een nieuw pakket via `Preferences > Browse Packages` en voeg je map toe. - Of gebruik de ingebouwde 'User' map voor je persoonlijke snippets. - Alternatief: Gebruik SFTP of Git om je snippets gesynchroniseerd te houden. 3. Snippets laden en gebruiken - Om snippets te gebruiken, typ je de `tabTrigger` en druk je op Tab. - Voor verschillende projecten of talen, zorg dat je de juiste scope instelt: - Bijvoorbeeld `<scope>source.python</scope>` voor Python snippets. - Je kunt ook snel toegang krijgen via Tools > Snippets of door de snippetnaam te zoeken. 4. Best practices voor onderhoud en bijwerken a. Versiebeheer: - Gebruik Git voor je snippetmap: - Initialiseer Git (`git init`) in je snippetsmap. - Commit regelmatig en maak branches voor nieuwe sets. - Synchroniseer via GitHub of andere platformen. b. Documentatie: - Voeg beschrijvingen toe in `<description>` voor duidelijkheid. - Voeg commentaar toe in snippets om het gebruik te verduidelijken. c. Consistentie: - Gebruik consistente tabTrigger- en scope-namen. - Maak gebruik van `${}` en `${1:default}` placeholders voor flexibiliteit. d. Updaten: - Als je een snippet wilt aanpassen, open het bestand en wijzig de inhoud. - Herlaad Sublime Text of herstart om wijzigingen door te voeren. - Test snippets regelmatig om zeker te zijn dat ze correct werken. 5. Workflow verbeteren voor JavaScript en Python a. Snippets collection automatiseren: - Overweeg het gebruik van een script om je snippets te genereren op basis van templates. - Gebruik JSON of YAML voor makkelijker beheer (met convertertools). b. Plugins en packages: - Installeer Package Control (indien nog niet gedaan). - Overweeg packages zoals 'Emmet' voor HTML/CSS, of 'SublimeSnippets' voor geavanceerd beheer. c. Automatisering: - Gebruik build-systemen of scripts om snippets automatisch te genereren of te synchroniseren. 6. Extra tips - Maak een README-bestand in je snippetsmap met uitleg en voorbeelden. - Overweeg een korte handleiding of cheat sheet voor jezelf. - Bewaar je snippets in een cloud-opslag of GitRepo voor back-up en toegang vanaf meerdere apparaten. Door deze stappen te volgen, heb je een gestructureerde, gemakkelijk te onderhouden code snippet manager in Sublime Text, gecategoriseerd op taal en projecttype, die je workflow optimaliseert voor zowel JavaScript als Python.

Hier is een gedetailleerde handleiding voor het opzetten van een gepersonaliseerde snippetmanager in Sublime Text: ## 1. Basis Snippet Structuur ### Snippets Map Aanmaken 1. Open Sublime Text 2. Ga naar `Preferences > Browse Packages` 3. Maak een nieuwe map aan: `MyCodeSnippets` 4. Maak binnen deze map submappen per categorie: ``` MyCodeSnippets/ ├── JavaScript/ ├── Python/ ├── HTML/ ├── CSS/ ├── ProjectTypes/ └── Utilities/ ``` ## 2. Snippets Aanmaken ### JavaScript Snippet Voorbeeld Maak een bestand `JavaScript/function-comment.sublime-snippet`: ```xml <snippet> <content><![CDATA[ /** * ${1:functionDescription} * @param {${2:type}} ${3:parameter} - ${4:description} * @returns {${5:returnType}} */ function ${6:functionName}(${3:parameter}) { ${7:// code} } ]]></content> <tabTrigger>fnjs</tabTrigger> <scope>source.js</scope> <description>JavaScript Function with JSDoc</description> </snippet> ``` ### Python Snippet Voorbeeld Maak een bestand `Python/class-template.sublime-snippet`: ```xml <snippet> <content><![CDATA[ class ${1:ClassName}: """${2:Class documentation}""" def __init__(self${3:, parameters}): ${4:# Initialize attributes} def ${5:method_name}(self${6:, parameters}): ${7:# Method implementation} ]]></content> <tabTrigger>classpy</tabTrigger> <scope>source.python</scope> <description>Python Class Template</description> </snippet> ``` ## 3. Geavanceerde Organisatie ### Project-specifieke Snippets Maak een `ProjectTypes/` map met subcategorieën: - `web-project/` - `data-analysis/` - `api-server/` Voorbeeld web-project snippet: ```xml <snippet> <content><![CDATA[ // Web project configuration const config = { apiUrl: '${1:https://api.example.com}', timeout: ${2:5000}, retryAttempts: ${3:3} }; ]]></content> <tabTrigger>webconfig</tabTrigger> <scope>source.js</scope> <description>Web Project Configuration</description> </snippet> ``` ## 4. Snippet Syntax Uitleg - **`<tabTrigger>`**: Het keyword dat de snippet activeert - **`<scope>`**: Bepaalt in welke bestandstypes de snippet werkt - **`${1:placeholder}`**: Genummerde plaatshouders met standaard tekst - **`${1}` en `${1:default}`: Zelfde placeholder, navigeer met Tab ## 5. Workflow Optimalisaties ### Sneltoetsen Toevoegen Voeg toe aan `Preferences > Key Bindings`: ```json [ { "keys": ["ctrl+alt+s"], "command": "show_overlay", "args": {"overlay": "command_palette", "text": "Snippet: "} } ] ``` ### User Settings Optimalisatie In `Preferences > Settings`: ```json { "auto_complete": true, "auto_complete_commit_on_tab": true, "tab_completion": false, "ensure_newline_at_eof_on_save": true } ``` ## 6. Onderhoud en Updates ### Best Practices voor Snippet Beheer 1. **Consistente Naming Convention**: - Gebruik beschrijvende namen: `react-component.sublime-snippet` - Logische tabTriggers: `rc` voor React component 2. **Regelmatige Review**: - Review snippets maandelijks - Verwijder verouderde snippets - Update best practices 3. **Documentatie**: Maak een `README.md` in je snippet map: ```markdown # Mijn Snippet Bibliotheek ## JavaScript Snippets - fnjs: Function met JSDoc - arrow: Arrow function - imp: Import statement ## Python Snippets - classpy: Class template - defpy: Function definition ``` 4. **Backup Strategie**: - Sla je `Packages/MyCodeSnippets` map op in cloud storage - Gebruik Git voor versiebeheer ## 7. Handige Snippet Voorbeelden ### JavaScript React Component ```xml <snippet> <content><![CDATA[ import React from 'react'; const ${1:ComponentName} = (${2:props}) => { return ( <div> ${3} </div> ); }; export default ${1:ComponentName}; ]]></content> <tabTrigger>rfc</tabTrigger> <scope>source.jsx</scope> </snippet> ``` ### Python Data Analysis ```xml <snippet> <content><![CDATA[ import pandas as pd import numpy as np import matplotlib.pyplot as plt # Load data df = pd.read_csv('${1:data.csv}') # Basic analysis print(df.info()) print(df.describe()) ]]></content> <tabTrigger>pda</tabTrigger> <scope>source.python</scope> </snippet> ``` ## 8. Gebruikstips 1. **Snel Access**: Gebruik `Ctrl+Shift+P` en typ "Snippet" om alle snippets te zien 2. **Context Aware**: Snippets werken alleen in de juiste bestandstypes door de scope 3. **Tab Navigation**: Gebruik Tab om tussen placeholders te navigeren 4. **Snippet Preview**: Hover over snippet naam in command palette voor preview Deze setup geeft je een volledig gepersonaliseerde snippet bibliotheek die groeit met je programmeerbehoeften en consistent blijft over verschillende projecten.