Hoofdletters omzetten in VS Code: sneltoetsen en extensies

VS Code heeft zeven ingebouwde commando's om hoofdletters en kleine letters om te zetten: Transform to Uppercase, Lowercase, Title Case, Snake Case, Camel Case, Kebab Case en Pascal Case. Selecteer wat tekst, open het Command Palette met Ctrl+Shift+P (Cmd+Shift+P op een Mac), typ ‘transform’ en kies er een. Geen van allen heeft een standaardsneltoets, dus als je ze vaak gebruikt, koppel je er zelf toetsen aan in keybindings.json. Alles wat je daarvoor nodig hebt, staat hieronder.
De commando's hebben een paar eigenaardigheden die je beter kent voordat je ze op een heel bestand loslaat. We behandelen daarom eerst wat elk commando echt doet, dan de sneltoetsen en dan de twee trucs die de gaten vullen: vervangen met regex en snippet-transformaties. Extensies komen als laatste, want misschien heb je er helemaal geen nodig.
De ingebouwde commando's van VS Code voor hoofdletters en kleine letters
De lijst is in de loop der jaren gegroeid. Ontbreekt er een commando in je palet, controleer dan je versie via Help, About (Code, About op een Mac).
| Naam in het Command Palette | Commando-ID | Sinds |
|---|---|---|
| Transform to Uppercase | editor.action.transformToUppercase | Al lang aanwezig |
| Transform to Lowercase | editor.action.transformToLowercase | Al lang aanwezig |
| Transform to Title Case | editor.action.transformToTitlecase | 1.34 |
| Transform to Snake Case | editor.action.transformToSnakecase | 1.53 |
| Transform to Kebab Case | editor.action.transformToKebabcase | 1.69 |
| Transform to Camel Case | editor.action.transformToCamelcase | 1.75 |
| Transform to Pascal Case | editor.action.transformToPascalcase | 1.88 |
Kijk goed naar de ID's: het is transformToSnakecase met een kleine c, niet transformToSnakeCase. Kopieer ze exact als je sneltoetsen schrijft, anders gebeurt er stilletjes niets.
Twee eigenschappen maken deze commando's prettiger dan ze op het eerste gezicht lijken. Als er niets is geselecteerd, zet een commando het woord onder de cursor om, dus je kunt in userId klikken en Snake Case uitvoeren zonder iets te selecteren. En bij meerdere cursors of selecties wordt elk daarvan afzonderlijk omgezet.
Wat elk commando echt doet
De commando's splitsen woorden elk op een andere manier, en dat is gemakkelijk over het hoofd te zien. Dit komt eruit in de huidige versies (we hebben het gecontroleerd in de broncode van VS Code):
| Invoer | Snake | Kebab | Camel | Pascal | Title |
|---|---|---|---|---|---|
hello world | hello world | hello world | helloWorld | HelloWorld | Hello World |
userID | user_id | user-id | userID | UserID | Userid |
USER_ID | user_id | user-id | USERID | UserId | User_Id |
XMLHttpRequest | xml_http_request | xml-http-request | XMLHttpRequest | XMLHttpRequest | Xmlhttprequest |
De patronen achter die tabel:
- Snake Case en Kebab Case splitsen alleen op de plekken waar hoofdletters en kleine letters wisselen. Ze gaan goed met afkortingen om, maar spaties blijven spaties, dus
hello worldwordt alleen in kleine letters gezet. Kebab Case maakt van underscores ook koppeltekens; Snake Case laat koppeltekens met rust. - Camel Case en Pascal Case splitsen op spaties, underscores en koppeltekens en geven elk deel een hoofdletter, maar Camel Case zet de rest van een woord niet in kleine letters. Daarom wordt
USER_IDUSERID. Pascal Case normaliseert woorden in hoofdletters wel en geeftUserId. (Weet je niet zeker welke van de twee je code nodig heeft? Zie onze gids camelCase vs. PascalCase.) - Title Case geeft elk woord een hoofdletter, ook de kleine woorden, en zet al het andere in kleine letters:
the lord of the ringswordtThe Lord Of The Rings. Het is bedoeld voor snelle correcties, niet voor koppen. Apostrofs worden verstandig behandeld:don'twordtDon't.
Wil je een zin als Shipping Address Line 2 omzetten naar snake_case, voer dan eerst Camel Case uit en daarna Snake Case; dat geeft shipping_address_line2. Of plak hem in onze hoofdletter-converter, die in één stap splitst op spaties, leestekens en wisselingen tussen hoofd- en kleine letters en ook CONSTANT_CASE biedt, dat VS Code niet heeft.
Sneltoetsen toevoegen in keybindings.json
Voor een of twee sneltoetsen is de editor Keyboard Shortcuts genoeg: druk op Ctrl+K en dan op Ctrl+S (Cmd+K Cmd+S op een Mac), zoek op ‘transform’, dubbelklik op een commando en druk op de toetsen die je wilt. Voor de hele set is het sneller om het bestand zelf te bewerken. Voer in het Command Palette Preferences: Open Keyboard Shortcuts (JSON) uit en voeg deze regels toe tussen de vierkante haken:
{ "key": "ctrl+k shift+u", "command": "editor.action.transformToUppercase", "when": "editorTextFocus" },
{ "key": "ctrl+k shift+l", "command": "editor.action.transformToLowercase", "when": "editorTextFocus" },
{ "key": "ctrl+k shift+t", "command": "editor.action.transformToTitlecase", "when": "editorTextFocus" },
{ "key": "ctrl+k shift+s", "command": "editor.action.transformToSnakecase", "when": "editorTextFocus" },
{ "key": "ctrl+k shift+c", "command": "editor.action.transformToCamelcase", "when": "editorTextFocus" },
{ "key": "ctrl+k shift+p", "command": "editor.action.transformToPascalcase", "when": "editorTextFocus" },
{ "key": "ctrl+k shift+k", "command": "editor.action.transformToKebabcase", "when": "editorTextFocus" }Dit zijn zogenoemde chords, toetscombinaties in twee stappen: druk op Ctrl+K, laat los en druk dan op Shift+U. We hebben het voorvoegsel Ctrl+K gekozen omdat VS Code het al voor editorcommando's gebruikt en geen van deze zeven chords in de huidige versies al door een standaardkoppeling wordt gebruikt. Schrijf op een Mac cmd+k in plaats van ctrl+k. Laat ctrl+k daar niet staan: op macOS is het gekoppeld aan Delete All Right, en een chord die ermee begint, zou in de weg zitten. Als een sneltoets ooit niet meer werkt, heeft waarschijnlijk een extensie dezelfde toetsen geclaimd; zoek ze op in de editor Keyboard Shortcuts om te zien welke.
Vervangen met regex en hoofdletters
Voor wijzigingen in een heel bestand of project gebruik je Find and Replace met reguliere expressies. Open Replace met Ctrl+H (Cmd+Option+F op een Mac), zet regex aan met Alt+R (Cmd+Option+R) en zet \u, \U, \l of \L voor een groep. Zoek je _([a-z]) en vervang je door \U$1, dan wordt user_id userId. Hetzelfde werkt in Replace in Files (Ctrl+Shift+H, of Cmd+Shift+H).
Eén verschil met sed en Perl laat mensen struikelen: in VS Code geldt elke escape alleen voor de volgende groep, dus \U$1_$2 zet $1 in hoofdletters en laat $2 met rust, en een \E bestaat niet. Ons spiekbriefje voor hoofdletters omzetten met regex bevat geteste recepten en een vergelijking met andere tools.
Snippet-transformaties: een snake_case die met spaties overweg kan
Ook snippets kunnen tekst transformeren, en sinds VS Code 1.108 horen /snakecase en /kebabcase bij hun opmaakopties, naast de oudere /upcase, /downcase, /capitalize, /camelcase en /pascalcase. Hun snake_case volgt andere regels dan het commando: spaties en koppeltekens worden underscores. Koppel het met editor.action.insertSnippet aan een toets, en het vervangt de selectie:
{
"key": "ctrl+k shift+n",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus && editorHasSelection",
"args": { "snippet": "${TM_SELECTED_TEXT/(.*)/${1:/snakecase}/}" }
}Selecteer Shipping Address Line 2, druk op de toetsen, en je krijgt shipping_address_line_2. De keerzijde zijn afkortingen: deze versie maakt van XMLHttpRequest het resultaat xmlhttp_request, terwijl het ingebouwde commando dat goed doet. Ook wordt alleen de eerste regel van een selectie met meerdere regels omgezet, omdat . geen regeleinden matcht. Vervang het door /kebabcase voor een kebab-versie.
Extensies voor al het andere
De ingebouwde commando's dekken CONSTANT_CASE, dot.case, path/case of het omwisselen van hoofd- en kleine letters niet. Twee populaire extensies doen dat wel:
- change-case (uitgever wmaurer) verpakt de JavaScript-bibliotheek change-case. Het voegt commando's toe voor camel, constant, dot, kebab, lower, lowerFirst, no, param, pascal, path, sentence, snake, swap, title, upper en upperFirst, plus een kiezer Change Case Commands die van elk resultaat een voorbeeld toont als je één woord hebt geselecteerd.
- Text Power Tools (van Dániel Tar) is een bredere gereedschapskist met meer dan 240 tekstcommando's. Het omzetten van hoofdletters en kleine letters is daar één onderdeel van, met camelCase, PascalCase, snake_case, CONSTANT_CASE, dash-case, dot.case en Title Case, naast het filteren en sorteren van regels en getalreeksen.
Onze mening: als je alleen de zeven ingebouwde stijlen nodig hebt, sla de extensie dan over en koppel de toetsen. Komt CONSTANT_CASE elke dag voor, installeer dan change-case, want één commando is beter dan Snake Case gevolgd door Uppercase.
Een korte checklist voor de installatie: controleer of je op 1.88 of nieuwer zit, zodat alle zeven commando's bestaan, plak de zeven sneltoetsen (met cmd+k op een Mac), voeg de snippet-koppeling toe als je vaak zinnen omzet, en pak een echte Titelvorm-tool (Title Case) erbij als je Engelse koppen schrijft.


