Visual Studio Code에서 문제 매처 이해하기: 디버깅 효율 극대화

문제 매처란 무엇인가?

Visual Studio Code(이하 VS Code)는 다양한 작업을 자동화할 수 있는 기능을 제공하며, 이는 개발 효율성을 크게 향상시킵니다. 특히 반복적으로 파일 변화를 추적하는 작업(예: TypeScript 컴파일, Webpack 번들링, 린팅)을 수행할 때, VS Code는 문제를 추적하고 하이라이트하기 위한 도구가 필요합니다. 바로 이것이 문제 매처의 역할입니다.

문제 매처는 터미널 출력에서 오류, 경고 및 정보 메시지를 스캔하고, 파일명, 행 번호, 오류 설명 등 유용한 정보를 추출합니다. 이를 통해 개발자는 콘솔을 수동으로 검색하지 않고도 즉시 문제를 발견하고 해결할 수 있습니다.

문제 매처의 작동 원리

문제 매처는 정규 표현식(regexp)를 활용하여 비구조화된 터미널 출력으로부터 구조화된 정보를 추출합니다. 일반적으로 포함되는 정보는 다음과 같습니다:

• 문제가 발생한 파일명
• 문제의 발생 행 번호
• 문제의 발생 열 번호(가능한 경우)
• 오류 메시지
• 오류 심각도(오류, 경고, 정보)

이러한 매처는 .vscode/tasks.json 파일 내에 구성되며, 기본 제공 문제 매처 또는 사용자 정의 문제 매처를 사용할 수 있습니다.

기본 제공 문제 매처

VS Code는 많은 도구에 대한 기본 문제 매처를 제공하므로 복잡한 정규 표현식을 정의할 필요 없이 직접 사용할 수 있습니다. 여기 몇 가지 인기 있는 기본 제공 문제 매처를 소개합니다:

일반적인 문제 매처

• $tsc-watch: TypeScript 컴파일러(watch 모드)용
• $eslint-stylish: ESLint(스타일리시 포맷)용
• $gcc: GCC 컴파일러용
• $msCompile: Microsoft C++ 컴파일러용
• $lessCompile: Less CSS 컴파일러용

예를 들어, TypeScript 컴파일을 VS Code에서 자동으로 오류를 감지하도록 설정하는 방법은 다음과 같습니다:

{
  "label": "Run TypeScript",
  "type": "shell",
  "command": "tsc -w",
  "problemMatcher": "$tsc-watch"
}

이 설정은 VS Code에 내장된 TypeScript 문제 매처를 사용하여 컴파일 오류와 경고를 식별하도록 지시합니다.

사용자 정의 문제 매처 만들기

기본 매처가 필요에 맞지 않을 때, 특히 고유한 오류 형식을 사용하는 도구를 사용할 때, 사용자 정의 문제 매처를 .vscode/tasks.json에 정의할 수 있습니다.

예시: Webpack을 위한 사용자 정의 문제 매처

Webpack을 watch 모드로 사용할 때, 다음과 같은 명령어를 사용한다고 가정하겠습니다:

"watch": "webpack --watch"

Webpack이 다음과 같은 오류를 출력할 수 있습니다:

ERROR in ./src/index.js 10:5
Module not found: Error: Can't resolve 'lodash' in '/project/src'

이를 위한 사용자 정의 문제 매처는 다음과 같이 설정할 수 있습니다:

{
  "label": "webpack watch",
  "type": "npm",
  "script": "watch",
  "problemMatcher": {
    "owner": "webpack",
    "pattern": [
      {
        "regexp": "ERROR in (.*) (\\d+):(\\d+)",
        "file": 1,
        "line": 2,
        "column": 3,
        "message": "Module error detected"
      }
    ]
  }
}

설명

• regexp: Webpack 오류 메시지를 매치하기 위한 정규 표현식을 정의합니다.
• file: 에러가 발생한 파일 경로를 캡처합니다.
• line 및 column: 오류가 발생한 행과 열 번호를 추출합니다.
• message: 매칭된 오류에 표시할 일반 메시지를 정의합니다.

설정 후, VS Code는 "문제" 패널에 Webpack 오류를 자동으로 하이라이트합니다.

문제 매처 필드 설명

문제 매처는 그 동작을 세밀하게 조정할 수 있는 여러 필드를 포함할 수 있습니다. 여기 주요 필드들을 설명합니다:

필드	설명
owner	오류를 소유하는 시스템을 정의합니다(예: typescript, webpack).
pattern	문제를 감지하기 위해 사용되는 정규 표현식을 명시합니다.
regexp	오류 메시지를 파싱하기 위해 사용하는 실제 정규 표현식입니다.
file	문제가 발생한 파일명을 캡처합니다.
line	오류의 발생 행 번호를 추출합니다.
column	발생 열 번호를 추출합니다.
severity	오류의 심각도를 지정할 수 있습니다: error, warning, info.
message	실제 오류 메시지를 추출합니다.

문제 매처 디버깅하기

문제 매처가 제대로 작동하지 않는 경우:

• 정규 표현식을 regex101 같은 온라인 도구로 테스트하십시오.
• 터미널 출력을 검토하고 예상 형식과 일치하는지 확인하십시오.
• 명령 팔레트(Ctrl+Shift+P)에서 Tasks: Run Task를 실행하여 작업 디버깅을 활성화하십시오.
• 복잡한 패턴을 추가하기 전에 간단한 문제 매처로 테스트하십시오.

결론

VS Code의 문제 매처는 작업 출력을 자동으로 인식하여 디버깅 워크플로우를 향상시키는 강력한 도구입니다. TypeScript, Webpack, ESLint 또는 사용자 정의 도구를 사용하든 문제 매처는 로그를 수동으로 확인할 필요 없이 중요한 문제를 파악하는 데 도움을 줄 것입니다.

일반적인 도구를 사용할 경우 $tsc-watch 또는 $eslint-stylish 같은 기본 제공 문제 매처를 시도해 보세요. 필요한 경우, .vscode/tasks.json 파일에 정규 표현식을 사용하여 직접 사용자 정의 매처를 정의하십시오.

문제 매처를 숙달하면 개발 프로세스를 간소화하고, 디버깅 시간을 줄이며, 전반적인 생산성을 향상시킬 수 있습니다.

Happy Typing :)

참고자료: regex 사용법