Como converter maiúsculas e minúsculas no VS Code: atalhos e extensões

O VS Code tem sete comandos nativos para converter maiúsculas e minúsculas: Transform to Uppercase, Lowercase, Title Case, Snake Case, Camel Case, Kebab Case e Pascal Case. Selecione um trecho de texto, abra a Paleta de Comandos (Command Palette) com Ctrl+Shift+P (Cmd+Shift+P no Mac), digite “transform” e escolha um deles. Nenhum tem atalho de teclado padrão; por isso, se você os usa com frequência, crie os seus em keybindings.json. Tudo de que você precisa para isso está logo abaixo.
Os comandos têm algumas esquisitices que vale conhecer antes de rodá-los num arquivo inteiro. Por isso, vamos ver o que cada um realmente faz, depois os atalhos e, por fim, os dois truques que cobrem as lacunas: a substituição por regex e as transformações de snippet. As extensões ficam para o final, porque talvez você nem precise de uma.
Os comandos nativos de maiúsculas e minúsculas do VS Code
A lista cresceu ao longo dos anos. Se algum comando não aparece na sua paleta, confira a versão em Help, About (Code, About no Mac).
| Nome na Paleta de Comandos (em inglês) | ID do comando | Desde a versão |
|---|---|---|
| Transform to Uppercase | editor.action.transformToUppercase | Há muito tempo |
| Transform to Lowercase | editor.action.transformToLowercase | Há muito tempo |
| 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 |
Olhe com atenção os IDs: é transformToSnakecase com c minúsculo, e não transformToSnakeCase. Copie-os exatamente como estão ao escrever os atalhos, senão o atalho não vai fazer nada, e sem avisar.
Dois comportamentos deixam esses comandos melhores do que parecem à primeira vista. Sem nada selecionado, o comando converte a palavra sob o cursor, então você pode clicar dentro de userId e rodar Snake Case sem selecionar nada. E, com vários cursores ou várias seleções, cada um é convertido separadamente.
O que cada comando realmente faz
Os comandos separam as palavras de maneiras diferentes, e isso passa despercebido com facilidade. Veja o que eles produzem nas versões atuais (conferimos no código-fonte do VS Code):
| Entrada | 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 |
Os padrões por trás dessa tabela:
- Snake Case e Kebab Case separam só onde a caixa muda. Eles lidam bem com siglas, mas os espaços continuam sendo espaços, então
hello worldapenas vai para minúsculas. O Kebab Case também transforma sublinhados em hifens; o Snake Case deixa os hifens em paz. - Camel Case e Pascal Case separam em espaços, sublinhados e hifens e põem maiúscula em cada pedaço, mas o Camel Case não converte o resto da palavra para minúsculas. É por isso que
USER_IDsai comoUSERID. O Pascal Case normaliza as palavras inteiras em maiúsculas e entregaUserId. (Não sabe qual dos dois o seu código pede? Veja o nosso guia de camelCase vs. PascalCase.) - Title Case põe maiúscula em todas as palavras, até nas pequenas, e converte todo o resto para minúsculas:
the lord of the ringsviraThe Lord Of The Rings. Ele serve para correções rápidas, não para títulos e manchetes. Os apóstrofos recebem um tratamento sensato:don'tviraDon't.
Então, para transformar uma frase como Shipping Address Line 2 em snake_case, rode primeiro Camel Case e depois Snake Case, o que dá shipping_address_line2. Ou cole-a no nosso conversor de maiúsculas e minúsculas, que separa por espaços, pontuação e mudanças de caixa numa única etapa e ainda oferece CONSTANT_CASE, que o VS Code não tem.
Criando atalhos de teclado no keybindings.json
Para um ou dois atalhos, o editor Keyboard Shortcuts basta: pressione Ctrl+K e depois Ctrl+S (Cmd+K Cmd+S no Mac), procure por “transform”, dê um clique duplo num comando e pressione as teclas que quiser. Para o conjunto todo, é mais rápido editar o arquivo. Execute Preferences: Open Keyboard Shortcuts (JSON) na Paleta de Comandos e adicione estas entradas dentro dos colchetes:
{ "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" }São atalhos em sequência (chords): pressione Ctrl+K, solte e depois pressione Shift+U. Escolhemos o prefixo Ctrl+K porque o VS Code já o usa para comandos do editor, e nenhuma dessas sete sequências é ocupada por um atalho padrão nas versões atuais. No Mac, escreva cmd+k em vez de ctrl+k. Não mantenha ctrl+k ali: no macOS ele está associado ao comando Delete All Right, e uma sequência que comece com ele atrapalharia. Se um atalho um dia parar de funcionar, provavelmente uma extensão reivindicou as mesmas teclas; procure por elas no editor Keyboard Shortcuts para descobrir qual.
Substituição por regex com mudança de caixa
Para mudanças num arquivo inteiro ou num projeto todo, use Find and Replace com expressões regulares. Abra o Replace com Ctrl+H (Cmd+Option+F no Mac), ative o regex com Alt+R (Cmd+Option+R) e use \u, \U, \l ou \L na frente de um grupo. Procurar por _([a-z]) e substituir por \U$1 transforma user_id em userId. O mesmo vale para o Replace in Files (Ctrl+Shift+H, ou Cmd+Shift+H).
Uma diferença em relação ao sed e ao Perl pega muita gente: no VS Code, cada escape vale só para o próximo grupo, então \U$1_$2 coloca $1 em maiúsculas e deixa $2 em paz, e não existe \E. Nosso guia rápido de regex para converter maiúsculas e minúsculas traz receitas testadas e uma comparação com outras ferramentas.
Transformações de snippet: um snake_case que lida com espaços
Os snippets também podem transformar texto e, desde o VS Code 1.108, as opções de formato deles incluem /snakecase e /kebabcase, ao lado de /upcase, /downcase, /capitalize, /camelcase e /pascalcase, que já existiam. O snake_case deles segue regras diferentes das do comando: transforma espaços e hifens em sublinhados. Associe-o a uma tecla com editor.action.insertSnippet, e ele substitui a seleção:
{
"key": "ctrl+k shift+n",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus && editorHasSelection",
"args": { "snippet": "${TM_SELECTED_TEXT/(.*)/${1:/snakecase}/}" }
}Selecione Shipping Address Line 2, pressione as teclas e você obtém shipping_address_line_2. O preço a pagar são as siglas: esta versão transforma XMLHttpRequest em xmlhttp_request, enquanto o comando nativo acerta. Ela também só converte a primeira linha de uma seleção de várias linhas, porque o . não casa com quebras de linha. Troque por /kebabcase para ter uma versão kebab.
Extensões para todo o resto
Os comandos nativos não cobrem CONSTANT_CASE, dot.case, path/case nem a inversão de maiúsculas e minúsculas. Duas extensões populares dão conta disso:
- change-case (publicada por wmaurer) envolve a biblioteca JavaScript change-case. Ela adiciona comandos para camel, constant, dot, kebab, lower, lowerFirst, no, param, pascal, path, sentence, snake, swap, title, upper e upperFirst, além de um seletor Change Case Commands que mostra uma prévia de cada resultado quando uma única palavra está selecionada.
- Text Power Tools (de Dániel Tar) é uma caixa de ferramentas mais ampla, com mais de 240 comandos de texto. A conversão de maiúsculas e minúsculas é só uma parte: cobre camelCase, PascalCase, snake_case, CONSTANT_CASE, dash-case, dot.case e Title Case, ao lado de filtragem de linhas, ordenação e sequências numéricas.
Nossa opinião: se você só precisa dos sete estilos nativos, dispense a extensão e crie os atalhos. Se o CONSTANT_CASE aparece todo dia, instale a change-case, porque um comando só vale mais do que Snake Case seguido de Uppercase.
Um checklist rápido de configuração: confirme que você está na versão 1.88 ou posterior, para que os sete comandos existam; cole os sete atalhos (com cmd+k no Mac); acrescente o atalho do snippet se você converte frases com frequência; e recorra a uma ferramenta de estilo Título (title case) de verdade quando estiver escrevendo títulos em inglês.


