[Tutorial] VSCode 정규식 찾기·치환 완벽 가이드

개요

Visual Studio Code(VSCode)는 다양한 언어와 도구를 지원하는 코드 에디터이다. 그중 **정규식(Regular Expression)**을 활용한 검색·치환은 반복적인 텍스트 수정, 코드 스타일 통일, 문서 일괄 변환 등에서 개발자 생산성을 크게 높여 준다. 이 글에서는 VSCode에서 정규식 찾기·치환을 활성화하는 방법, Find/Replace 패턴의 의미, 캡처 그룹과 대소문자 변환까지 단계별로 다루고, 실무에 바로 쓸 수 있는 예시와 워크플로우를 정리한다.

추천 대상

VSCode로 코드·문서를 편집하는 개발자
동일 패턴의 텍스트를 일괄 치환해야 하는 경우
변수명·함수명 대소문자 규칙을 한 번에 맞추고 싶은 경우

다루는 내용

정규식 검색·치환 기능 활성화 및 단축키
예시 패턴 ^- ([a-zA-Z]+)\s([a-zA-Z]+)\s([a-zA-Z]+)$와 치환 - \u$1\u$2\u$3 상세 해설
단계별 적용 방법과 워크플로우 다이어그램
추가 팁 및 참고 문헌

정규식 검색·치환이란

VSCode의 기본 찾기(Ctrl+F / Cmd+F)는 입력한 문자열을 그대로 찾는다. 정규식 모드를 켜면 검색창에 입력한 내용이 정규식 패턴으로 해석되어 다음이 가능해진다.

특정 패턴의 단어·기호만 검색: 예) \d+로 숫자만, [a-zA-Z]+로 영문 단어만
문자열의 앞뒤 조건 확인: ^(줄 시작), $(줄 끝), \b(단어 경계) 등
캡처 그룹으로 원하는 부분만 치환: (…)로 잡은 부분을 $1, $2로 재사용
대소문자 변환: \u, \l 등으로 캡처한 텍스트의 첫 글자만 대문자/소문자로 바꾸기

이를 잘 활용하면 수십·수백 곳을 손으로 바꿀 필요 없이 한 번에 패턴 기반 치환이 가능하다.

사용 환경 및 단축키

동작	Windows / Linux	macOS
현재 파일에서 찾기	`Ctrl + F`	`Cmd + F`
현재 파일에서 찾기·치환	`Ctrl + H`	`Cmd + Option + F`
전체 프로젝트에서 찾기	`Ctrl + Shift + F`	`Cmd + Shift + F`

찾기·치환 창이 열린 상태에서 검색창 왼쪽의 .* 아이콘을 클릭하면 정규식 모드가 켜진다. 아이콘이 눌린 상태일 때 입력한 내용이 정규식으로 해석된다.

예시: Find 패턴 상세 해설

다음은 “대시 + 공백 + 세 개의 영문 단어” 한 줄을 찾아, 세 단어를 이어 붙이고 각 단어 첫 글자를 대문자로 만드는 예시이다.

Find(찾기)
^- ([a-zA-Z]+)\s([a-zA-Z]+)\s([a-zA-Z]+)$

Replace(바꾸기)
- \u$1\u$2\u$3

Find 패턴 구성 요소

부분	의미
`^`	줄의 시작
`-`	리터럴 대시 한 개 + 공백 한 개
`([a-zA-Z]+)`	영문 대소문자 하나 이상 → 캡처 그룹 1 (`$1`)
`\s`	공백 문자 하나
`([a-zA-Z]+)`	두 번째 단어 → 캡처 그룹 2 (`$2`)
`\s`	공백 하나
`([a-zA-Z]+)`	세 번째 단어 → 캡처 그룹 3 (`$3`)
`$`	줄의 끝

예: - foo bar baz 한 줄은 이 패턴에 매칭되고, $1=foo, $2=bar, $3=baz로 캡처된다.

Replace 구문: `- \u$1\u$2\u$3`

치환 문자열의 의미는 다음과 같다.

- : 대시와 공백은 그대로 유지
\u$1: $1(첫 번째 단어)의 첫 글자만 대문자로 → foo → Foo
\u$2: 두 번째 단어 첫 글자 대문자 → Bar
\u$3: 세 번째 단어 첫 글자 대문자 → Baz

결과적으로 - foo bar baz → - FooBarBaz로 바뀐다.

VSCode 치환에서 쓸 수 있는 대소문자 변환

구문	효과
`\u`	다음 캡처 그룹의 첫 글자만 대문자
`\l`	다음 캡처 그룹의 첫 글자만 소문자
`\U`	다음 캡처 그룹 전체를 대문자 (해당 그룹 끝까지)
`\L`	다음 캡처 그룹 전체를 소문자

변수명·함수명을 PascalCase나 camelCase로 일괄 변환할 때 유용하다.

단계별 적용 방법

찾기·치환 창 열기
- 현재 파일만: Ctrl + H(Windows/Linux) 또는 Cmd + Option + F(Mac)
- 전체 프로젝트: Ctrl + Shift + F(Windows/Linux) 또는 Cmd + Shift + F(Mac) 후 상단에서 “Replace” 영역 사용
정규식 모드 켜기
검색창 왼쪽 .* 아이콘을 눌러 활성화한다.
Find 필드에 정규식 입력
예: ^- ([a-zA-Z]+)\s([a-zA-Z]+)\s([a-zA-Z]+)$
Replace 필드에 치환 문자열 입력
예: - \u$1\u$2\u$3
결과 확인 후 치환
검색 결과 하이라이트를 보면서 “Replace"로 한 곳씩, 또는 “Replace All"로 일괄 치환한다.

정규식 찾기·치환 워크플로우

아래 플로우는 “정규식 모드 활성화 → Find 입력 → Replace 입력 → 확인 후 치환” 순서를 요약한 것이다.

flowchart LR
  subgraph open["검색·치환"]
    A[찾기·치환 창 열기]
    B["정규식 버튼 .* 클릭"]
    C["Find 필드에 패턴 입력"]
    D["Replace 필드에 치환문 입력"]
  end
  subgraph run["실행"]
    E[결과 하이라이트 확인]
    F{"일괄 치환?"}
    G[Replace 한 곳씩]
    H[Replace All]
  end
  A --> B
  B --> C
  C --> D
  D --> E
  E --> F
  F -->|"아니오"| G
  F -->|"예"| H

노드 ID: 공백 없이 camelCase 사용 (open, run, A~H 등).
라벨에 특수문자·등호가 있는 경우: "정규식 버튼 .* 클릭", "일괄 치환?" 등 큰따옴표로 감쌌다.

추가 팁 및 주의사항

전체 프로젝트 치환 전: “Replace All” 전에 반드시 검색 결과를 훑어보고, 의도한 파일·라인만 포함되는지 확인하는 것이 안전하다.
정규식 테스트: 복잡한 패턴은 regex101.com이나 RegExr에서 먼저 테스트해 보면 실수가 줄어든다.
이스케이프: Find 필드에서 \는 이스케이프 문자이므로, 리터럴 \를 찾으려면 \\\\처럼 입력해야 할 수 있다(엔진에 따라 다름).
줄 단위 vs 전체: 기본적으로 VSCode 정규식은 여러 줄에 걸친 매칭도 가능하다. 줄 단위로만 매칭하려면 ^·$를 사용하면 된다.

참고 문헌

Visual Studio Code 공식 문서
Code Navigation - Visual Studio Code — 에디터 기본 기능 및 코드 탐색. 찾기·치환 관련 단축키와 동작을 이해하는 데 도움이 된다.
VS Code 문서 루트
Visual Studio Code Documentation — 설치, 설정, 확장, 디버깅 등 전반적인 공식 문서.
정규식 문법 참고 (MDN)
Regular expressions - JavaScript | MDN — 정규식 패턴, 그룹, 플래그 등 문법 설명. VSCode의 JavaScript/TypeScript 정규식 동작과 대부분 호환된다.
정규식 테스트 도구
regex101: build, test, and debug regex — 패턴을 입력하고 테스트 문자열로 결과를 확인할 수 있는 온라인 도구.

마무리

VSCode의 정규식 찾기·치환을 쓰면 반복적인 텍스트·코드 수정을 빠르게 처리할 수 있다. 캡처 그룹($1, $2, …)과 대소문자 변환(\u, \l)만 익혀도 변수명·목록 포맷 등을 일괄로 맞추는 데 큰 도움이 된다. 위 참고 문헌과 테스트 사이트를 활용해 패턴을 연습해 보면 실무 적용이 수월해진다.