VSCode 작업 및 문제에 대한 사용자 지정 출력 구문 분석

콘텐츠에 문제가 있는지 확인하는 Node.js 스크립트가 있다고 가정합니다. 이러한 오류를 나타내는 출력이 있으면 좋습니다. 예를 들면 다음과 같습니다.



문제(오류 또는 경고)가 있음을 식별하기 위해 예를 들어 chalk 라이브러리를 사용하여 문제 유형에 색상을 지정할 수 있습니다. 나는 console.log()를 사용하여 출력에 쓰는 이러한 메시지를 생성하기 위해 몇 가지 간단한 기능을 사용합니다.

createWarningOrErrorString.ts: (참고로 이것은 TypeScript입니다)

import * as path from "path";
import chalk from "chalk"; // use version 4 for TypeScript, until TypeScript 4.6 is available

export function createErrorString(message: string, errorType: string, filepath = "", line = 1, column = 1): string {
    const filepathString = filepath === "" ? "<nofile>" : path.join(process.cwd(), filepath);
    const errorMessage = `${chalk.bgRed("ERROR")}: ${filepathString}(${line},${column}): ${errorType} - ${message}`;
    return errorMessage;
}

export function createWarningString(message: string, errorType: string, filepath = "", line = 1, column = 1): string {
    const filepathString = filepath === "" ? "<nofile>" : path.join(process.cwd(), filepath);
    const warningMessage = `${chalk.bgYellow("WARNING")}: ${filepathString}(${line},${column}): ${errorType} - ${message}`;
    return warningMessage;
}

다음과 같이 유효성을 검사하는 npm 스크립트가 있다고 가정합니다(내 경우에는 validate.js가 validate.ts에서 변환됨).

   "scripts": {
       "validate": "node validate.js"
   }

VSCode 내의 터미널 창에서 npm run validate를 실행하면 오류 및 경고 메시지가 포함된 출력을 얻을 수 있지만 Visual Studio Code인 "문제"패널에서는 끝나지 않습니다.

그 이유는 두 가지입니다.

Visual Studio Code가 터미널 창에서 실행된 명령의 출력을 구문 분석하지 않음

유효성 검사 스크립트에서 사용자 지정 오류 및 경고가 생성된 경우 VSCode는 이러한 오류 및 경고를 구문 분석하는 방법을 모릅니다.

두 문제에 대한 해결책은 VSCode 작업입니다.

VSCode 작업은 실행 작업의 이름을 딴 별도의 터미널 작업 탭에서 실행됩니다.



좋은 점은 VSCode가 문제에 대해 이 탭에서 생성된 출력을 구문 분석한다는 것입니다.

그러나 먼저 이를 위해 VSCode 작업을 정의해야 합니다.

.vscode/tasks.json:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Validate",
            "detail": "Validate all content and parse errors from output",
            "type": "npm",
            "script": "validate --silent",
            "problemMatcher": [
                {
                    "owner": "content-linter",
                    "fileLocation": ["autoDetect", "${workspaceFolder}"],
                    "pattern": {
                        "regexp": "^(ERROR|WARNING):\\s*(.*)\\((\\d+),(\\d+)\\):\\s+(.*)$",
                        "file": 2,
                        "line": 3,
                        "column": 4,
                        "severity": 1,
                        "message": 5
                    }
                }
            ],
            "options": {
                "statusbar": {
                    "label": "$(check-all) Validate",
                    "color": "#00FF00"
                }
            }
        }
    ]
}

위의 작업 구성은 출력의 오류/경고를 구문 분석하여 "문제"패널에 표시합니다. 그래서 라인:

C:\P\competenceframework\packages\content\src\competenceframework-settings.json(1,1): SchemaValidationError - rings is not allowed.

정규식^(ERROR|WARNING):\\s*(.*)\\((\\d+),(\\d+)\\):\\s+(.*)$을 사용하여 구문 분석됩니다.

"문제"창에 다음 정보가 표시됩니다.



이 작업을 실행하려면 작업을 실행하고 F1 키를 누르고 Tasks: Run Task 를 선택한 다음 Validate 작업을 선택합니다.

위의 작업 구성에는 옵션에 몇 가지 추가 정보가 포함되어 있습니다. 이렇게 하면 VSCode 상태 표시줄에 작업을 추가하기 위해 VSCode 확장Tasks이 구성됩니다.



위의 예에서는 Validate 및 Build 상태의 두 작업을 만들었습니다.

이제 한 번의 클릭으로 작업을 시작하고 출력을 구문 분석하고 "문제"창에 결과를 표시할 수 있습니다.

일반적으로 "문제"창에는 열린 파일의 문제만 표시되지만 작업을 사용하면 작업 실행 중에 발생한 모든 문제에 대해 보고할 수 있습니다.

VSCode에는 great documentation on tasks 가 있습니다. 확인 해봐!