VS Code 대소문자 변환: 단축키와 확장 프로그램
VS Code에는 대소문자를 변환하는 기본 명령이 일곱 개 있습니다. Transform to Uppercase, Lowercase, Title Case, Snake Case, Camel Case, Kebab Case, Pascal Case입니다. 텍스트를 선택하고 Ctrl+Shift+P(Mac에서는 Cmd+Shift+P)로 명령 팔레트(Command Palette)를 연 다음 “transform”을 입력해 하나를 고르세요. 어느 것도 기본 키보드 단축키가 없으므로 자주 쓴다면 keybindings.json에 직접 단축키를 지정하세요. 그 방법은 모두 아래에 있습니다.
이 명령들에는 파일 전체에 실행하기 전에 알아 둘 만한 특이점이 몇 가지 있습니다. 그래서 각 명령이 실제로 하는 일을 먼저 살펴보고, 이어서 단축키, 그리고 빈틈을 메우는 두 가지 요령인 정규식 치환과 스니펫 변환을 다룹니다. 확장 프로그램은 필요하지 않을 수도 있으니 마지막에 둡니다.
VS Code의 기본 대소문자 명령
목록은 해가 갈수록 늘어났습니다. 명령 팔레트에 어떤 명령이 보이지 않는다면 Help, About(Mac에서는 Code, About)에서 버전을 확인하세요.
| 명령 팔레트 이름 | 명령 ID | 도입 버전 |
|---|---|---|
| Transform to Uppercase | editor.action.transformToUppercase | 오래전부터 |
| Transform to Lowercase | editor.action.transformToLowercase | 오래전부터 |
| 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 |
ID를 자세히 보세요. transformToSnakeCase가 아니라 소문자 c를 쓴 transformToSnakecase입니다. 키 바인딩을 작성할 때는 그대로 복사하세요. 그렇지 않으면 단축키가 아무 오류 없이 그냥 작동하지 않습니다.
이 명령들은 처음 보기보다 편리한 점이 두 가지 있습니다. 아무것도 선택하지 않으면 명령이 커서 아래의 단어를 변환하므로, userId를 클릭하고 아무것도 선택하지 않은 채 Snake Case를 실행할 수 있습니다. 그리고 커서나 선택 영역이 여러 개이면 각각 따로 변환됩니다.
각 명령이 실제로 하는 일
명령마다 단어를 나누는 방식이 달라서 놓치기 쉽습니다. 현재 릴리스에서 나오는 결과는 다음과 같습니다(VS Code 소스 코드로 확인했습니다).
| 입력 | 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 |
이 표 뒤에 있는 패턴은 다음과 같습니다.
- Snake Case와 Kebab Case는 대소문자가 바뀌는 지점에서만 단어를 나눕니다. 약어를 잘 처리하지만 공백은 공백으로 남으므로
hello world는 소문자로만 바뀝니다. Kebab Case는 밑줄도 하이픈으로 바꾸고, Snake Case는 하이픈을 그대로 둡니다. - Camel Case와 Pascal Case는 공백, 밑줄, 하이픈에서 나누고 각 조각의 첫 글자를 대문자로 만들지만, Camel Case는 단어의 나머지를 소문자로 바꾸지 않습니다. 그래서
USER_ID가USERID가 됩니다. Pascal Case는 전체 대문자 단어를 정규화해서UserId를 만듭니다. (둘 중 코드에 맞는 쪽이 헷갈린다면 camelCase와 PascalCase 비교 가이드를 보세요.) - Title Case는 짧은 단어까지 모든 단어의 첫 글자를 대문자로 만들고, 나머지는 소문자로 바꿉니다.
the lord of the rings는The Lord Of The Rings가 됩니다. 영어 헤드라인용이 아니라 빠른 수정용으로 만들어졌습니다. 아포스트로피는 합리적으로 처리되어don't는Don't가 됩니다.
그래서 Shipping Address Line 2 같은 구를 snake_case로 바꾸려면 Camel Case를 먼저, Snake Case를 나중에 실행하세요. 그러면 shipping_address_line2가 나옵니다. 아니면 저희 대소문자 변환기에 붙여 넣으세요. 공백, 구두점, 대소문자 변화를 한 번에 나누고, VS Code에는 없는 CONSTANT_CASE도 제공합니다.
keybindings.json에 키보드 단축키 추가하기
단축키가 한두 개라면 Keyboard Shortcuts 편집기로 충분합니다. Ctrl+K 다음에 Ctrl+S(Mac에서는 Cmd+K Cmd+S)를 누르고 “transform”을 검색한 뒤, 명령을 더블클릭하고 원하는 키를 누르세요. 전체를 설정한다면 파일을 편집하는 쪽이 빠릅니다. 명령 팔레트에서 Preferences: Open Keyboard Shortcuts (JSON)을 실행하고 대괄호 안에 다음 항목을 추가하세요.
{ "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" }이것들은 연속 입력 단축키(chord)입니다. Ctrl+K를 누르고 뗀 다음 Shift+U를 누릅니다. Ctrl+K를 앞에 붙인 이유는 VS Code가 이미 편집기 명령에 이 조합을 쓰고, 현재 버전에서는 이 일곱 개 중 기본 바인딩과 겹치는 것이 없기 때문입니다. Mac에서는 ctrl+k 대신 cmd+k를 쓰세요. ctrl+k를 그대로 두면 안 됩니다. macOS에서는 Delete All Right에 연결되어 있어서, 이 키로 시작하는 연속 입력이 걸림돌이 됩니다. 단축키가 어느 날 작동하지 않는다면 확장 프로그램이 같은 키를 차지했을 가능성이 큽니다. Keyboard Shortcuts 편집기에서 그 키를 검색해 어느 쪽인지 확인하세요.
대소문자 변경을 쓰는 정규식 치환
파일 하나나 프로젝트 전체에 걸친 변경에는 정규식을 켠 Find and Replace(찾기 및 바꾸기)를 쓰세요. Ctrl+H(Mac에서는 Cmd+Option+F)로 바꾸기를 열고, Alt+R(Cmd+Option+R)로 정규식을 켠 다음, 그룹 앞에 \u, \U, \l, \L을 쓰세요. _([a-z])를 찾아 \U$1로 바꾸면 user_id가 userId가 됩니다. Replace in Files(파일에서 바꾸기)에서도 똑같이 됩니다(Ctrl+Shift+H, 또는 Cmd+Shift+H).
sed나 Perl과 다른 점 하나가 사람들을 헷갈리게 합니다. VS Code에서는 각 이스케이프가 바로 다음 그룹에만 적용됩니다. 그래서 \U$1_$2는 $1만 대문자로 바꾸고 $2는 그대로 두며, \E도 없습니다. 정규식 대소문자 변환 치트시트에는 검증한 레시피와 다른 도구와의 비교가 있습니다.
스니펫 변환: 공백까지 처리하는 snake_case
스니펫도 텍스트를 변환할 수 있고, VS Code 1.108부터는 포맷 옵션에 기존의 /upcase, /downcase, /capitalize, /camelcase, /pascalcase와 함께 /snakecase와 /kebabcase가 들어 있습니다. 이쪽의 snake_case는 명령과 규칙이 다릅니다. 공백과 하이픈을 밑줄로 바꿉니다. editor.action.insertSnippet으로 키에 연결하면 선택 영역을 대체합니다.
{
"key": "ctrl+k shift+n",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus && editorHasSelection",
"args": { "snippet": "${TM_SELECTED_TEXT/(.*)/${1:/snakecase}/}" }
}Shipping Address Line 2를 선택하고 키를 누르면 shipping_address_line_2가 나옵니다. 대신 약어 처리에서 손해를 봅니다. 이 방식은 XMLHttpRequest를 xmlhttp_request로 바꾸는데, 기본 명령은 이를 제대로 처리합니다. 또 .이 줄바꿈과 일치하지 않기 때문에 여러 줄을 선택해도 첫 줄만 변환합니다. 케밥 버전이 필요하면 /kebabcase로 바꿔 쓰세요.
나머지를 위한 확장 프로그램
기본 기능은 CONSTANT_CASE, dot.case, path/case, 대소문자 맞바꾸기를 다루지 않습니다. 인기 있는 확장 프로그램 두 가지가 이를 해결합니다.
- change-case(게시자 wmaurer)는 change-case JavaScript 라이브러리를 감싼 확장입니다. camel, constant, dot, kebab, lower, lowerFirst, no, param, pascal, path, sentence, snake, swap, title, upper, upperFirst 명령을 추가하고, 단어 하나를 선택하면 각 결과를 미리 보여 주는 Change Case Commands 선택기도 제공합니다.
- Text Power Tools(Dániel Tar 제작)는 240개가 넘는 텍스트 명령을 갖춘 더 폭넓은 도구 모음입니다. 대소문자 변환은 그 일부로 camelCase, PascalCase, snake_case, CONSTANT_CASE, dash-case, dot.case, Title Case를 다루며, 줄 필터링, 정렬, 숫자 시퀀스도 함께 있습니다.
저희 생각은 이렇습니다. 기본 일곱 가지 스타일만 필요하다면 확장 프로그램은 건너뛰고 키만 지정하세요. CONSTANT_CASE가 매일 필요하다면 change-case를 설치하세요. 명령 하나가 Snake Case 다음에 Uppercase를 실행하는 것보다 낫기 때문입니다.
빠른 설정 체크리스트입니다. 일곱 가지 명령이 모두 있도록 1.88 이상인지 확인하고, 키 바인딩 일곱 개를 붙여 넣고(Mac에서는 cmd+k로), 구를 자주 변환한다면 스니펫 바인딩도 추가하세요. 영어 헤드라인을 쓸 때는 제대로 된 제목 형식(Title Case) 도구를 쓰세요.
