Zmiana wielkości liter w VS Code: skróty klawiszowe i rozszerzenia

VS Code ma siedem wbudowanych poleceń do zmiany wielkości liter: Transform to Uppercase, Lowercase, Title Case, Snake Case, Camel Case, Kebab Case i Pascal Case. Zaznacz tekst, otwórz paletę poleceń (Command Palette) skrótem Ctrl+Shift+P (Cmd+Shift+P na Macu), wpisz „transform” i wybierz jedno z nich. Żadne nie ma domyślnego skrótu klawiszowego, więc jeśli używasz ich często, przypisz własne w pliku keybindings.json. Wszystko, czego do tego potrzebujesz, znajdziesz poniżej.
Polecenia mają kilka dziwactw, które warto znać, zanim uruchomisz je na całym pliku. Omówimy więc, co dokładnie robi każde z nich, potem skróty, a na końcu dwie sztuczki, które wypełniają luki: zamianę z regex i transformacje w snippetach. Rozszerzenia zostawiamy na koniec, bo być może żadne nie będzie Ci potrzebne.
Wbudowane polecenia VS Code do zmiany wielkości liter
Lista rosła przez lata. Jeśli jakiegoś polecenia brakuje w Twojej palecie, sprawdź wersję w menu Help, About (na Macu Code, About).
| Nazwa w Command Palette | ID polecenia | Od wersji |
|---|---|---|
| Transform to Uppercase | editor.action.transformToUppercase | Od dawna |
| Transform to Lowercase | editor.action.transformToLowercase | Od dawna |
| 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 |
Przyjrzyj się dokładnie identyfikatorom: jest transformToSnakecase z małym c, a nie transformToSnakeCase. Przy pisaniu skrótów przepisz je co do znaku, bo inaczej skrót po cichu nic nie zrobi.
Dwie cechy sprawiają, że te polecenia są wygodniejsze, niż się z początku wydaje. Gdy nic nie jest zaznaczone, polecenie zamienia wyraz pod kursorem, więc możesz kliknąć w userId i uruchomić Snake Case bez zaznaczania czegokolwiek. A przy kilku kursorach lub zaznaczeniach każde z nich jest konwertowane osobno.
Co dokładnie robi każde polecenie
Polecenia dzielą wyrazy na różne sposoby, co łatwo przeoczyć. Oto, co dają w aktualnych wersjach (sprawdziliśmy to w kodzie źródłowym VS Code):
| Dane wejściowe | 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 |
Zasady stojące za tą tabelą:
- Snake Case i Kebab Case dzielą tekst tylko tam, gdzie zmienia się wielkość liter. Dobrze radzą sobie ze skrótowcami, ale spacje zostają spacjami, więc
hello worldjest jedynie zapisane małymi literami. Kebab Case zamienia też podkreślniki na łączniki; Snake Case łączników nie rusza. - Camel Case i Pascal Case dzielą tekst na spacjach, podkreślnikach i łącznikach i zaczynają wielką literą każdy fragment, ale Camel Case nie zamienia reszty wyrazu na małe litery. Dlatego z
USER_IDwychodziUSERID. Pascal Case normalizuje wyrazy pisane samymi wielkimi literami, więc dajeUserId. (Nie wiesz, którego z nich wymaga Twój kod? Zajrzyj do naszego porównania camelCase i PascalCase.) - Title Case zaczyna wielką literą każdy wyraz, także krótkie, a wszystko inne zamienia na małe litery:
the lord of the ringsdajeThe Lord Of The Rings. Polecenie służy do szybkich poprawek, a nie do nagłówków. Apostrofy obsługuje rozsądnie:don'tzamienia się wDon't.
Żeby więc zamienić frazę taką jak Shipping Address Line 2 na snake_case, uruchom najpierw Camel Case, a potem Snake Case, co da shipping_address_line2. Możesz też wkleić ją do naszego konwertera wielkości liter, który dzieli tekst na spacjach, znakach interpunkcyjnych i zmianach wielkości liter w jednym kroku, a do tego ma CONSTANT_CASE, którego VS Code nie ma.
Dodawanie skrótów klawiszowych w keybindings.json
Przy jednym czy dwóch skrótach wystarczy edytor Keyboard Shortcuts: naciśnij Ctrl+K, a potem Ctrl+S (Cmd+K Cmd+S na Macu), wyszukaj „transform”, kliknij polecenie dwukrotnie i naciśnij wybrane klawisze. Dla całego zestawu szybciej jest edytować plik. Uruchom z palety poleceń Preferences: Open Keyboard Shortcuts (JSON) i dodaj te wpisy wewnątrz nawiasów kwadratowych:
{ "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" }To skróty dwuetapowe (chords): naciśnij Ctrl+K, puść, a potem naciśnij Shift+U. Wybraliśmy prefiks Ctrl+K, ponieważ VS Code już go używa do poleceń edytora, a żaden z tych siedmiu skrótów nie jest w aktualnych wersjach zajęty przez domyślne przypisanie. Na Macu zapisz cmd+k zamiast ctrl+k. Nie zostawiaj tam ctrl+k: w macOS jest przypisany do Delete All Right, a skrót dwuetapowy zaczynający się od niego by przeszkadzał. Jeśli któryś skrót kiedyś przestanie działać, prawdopodobnie jakieś rozszerzenie zajęło te same klawisze; wyszukaj je w edytorze Keyboard Shortcuts, żeby sprawdzić które.
Zamiana z regex ze zmianą wielkości liter
Przy zmianach w całym pliku lub projekcie użyj funkcji Find and Replace z wyrażeniami regularnymi. Otwórz Replace skrótem Ctrl+H (Cmd+Option+F na Macu), włącz regex skrótem Alt+R (Cmd+Option+R) i wstaw \u, \U, \l lub \L przed grupą. Wyszukanie _([a-z]) i zamiana na \U$1 zmienia user_id w userId. To samo działa w Replace in Files (Ctrl+Shift+H albo Cmd+Shift+H).
Jedna różnica względem sed i Perla potrafi zaskoczyć: w VS Code każda sekwencja dotyczy tylko następnej grupy, więc \U$1_$2 zamienia na wielkie litery $1, a $2 zostawia w spokoju, i nie ma tu \E. Nasza ściągawka o zmianie wielkości liter w regex zawiera przetestowane przepisy i porównanie z innymi narzędziami.
Transformacje w snippetach: snake_case, który radzi sobie ze spacjami
Snippety też potrafią przekształcać tekst, a od VS Code 1.108 ich opcje formatu obejmują /snakecase i /kebabcase obok starszych /upcase, /downcase, /capitalize, /camelcase i /pascalcase. Ich snake_case działa według innych reguł niż polecenie: zamienia spacje i łączniki na podkreślniki. Przypisz go do klawisza przez editor.action.insertSnippet, a zastąpi zaznaczenie:
{
"key": "ctrl+k shift+n",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus && editorHasSelection",
"args": { "snippet": "${TM_SELECTED_TEXT/(.*)/${1:/snakecase}/}" }
}Zaznacz Shipping Address Line 2, naciśnij klawisze i dostaniesz shipping_address_line_2. Haczyk dotyczy skrótowców: ta wersja zamienia XMLHttpRequest w xmlhttp_request, a wbudowane polecenie robi to poprawnie. Konwertuje też tylko pierwszy wiersz zaznaczenia wielowierszowego, bo . nie pasuje do znaków końca wiersza. Podmień na /kebabcase, jeśli chcesz wersję kebab.
Rozszerzenia na całą resztę
Wbudowane polecenia nie obejmują CONSTANT_CASE, dot.case, path/case ani odwracania wielkości liter. Robią to dwa popularne rozszerzenia:
- change-case (wydawca wmaurer) opakowuje bibliotekę JavaScript change-case. Dodaje polecenia camel, constant, dot, kebab, lower, lowerFirst, no, param, pascal, path, sentence, snake, swap, title, upper i upperFirst, a także selektor Change Case Commands, który po zaznaczeniu jednego wyrazu pokazuje podgląd każdego wyniku.
- Text Power Tools (autor: Dániel Tar) to szerszy zestaw ponad 240 poleceń tekstowych. Zmiana wielkości liter to jedna z jego części: obejmuje camelCase, PascalCase, snake_case, CONSTANT_CASE, dash-case, dot.case i Title Case, a obok niej są filtrowanie wierszy, sortowanie i ciągi liczb.
Nasza opinia: jeśli potrzebujesz tylko siedmiu wbudowanych stylów, pomiń rozszerzenie i przypisz klawisze. Jeśli CONSTANT_CASE pojawia się u Ciebie codziennie, zainstaluj change-case, bo jedno polecenie jest lepsze niż Snake Case, a po nim jeszcze Uppercase.
Krótka lista kontrolna konfiguracji: upewnij się, że masz wersję 1.88 lub nowszą, żeby istniało wszystkie siedem poleceń, wklej siedem skrótów (z cmd+k na Macu), dodaj skrót do snippetu, jeśli często konwertujesz frazy, a przy pisaniu angielskich nagłówków sięgnij po porządne narzędzie do title case.


