간단한 린팅 도구 만들기
컴파일러 API로 사용자 정의 진단 도구를 만듭니다.
간단한 린팅 도구 만들기은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
코드 검사 도구란 무엇입니까?
코드 검사 도구는 소스 코드를 분석하여 스타일 또는 정확성 문제를 보고합니다. TypeScript 컴파일러 API를 사용하면 ESLint 플러그인만으로는 구현할 수 없는 타입 인식 규칙을 만들 수 있습니다.
// Goal: warn when console.log is called in TypeScript files프로젝트 설정
TypeScript 프로그램을 불러오고 AST를 순회하며 진단 정보를 보고하는 Node.js 스크립트를 만드십시오.
import ts from "typescript";
import path from "path";
const files = ["src/index.ts"];
const program = ts.createProgram(files, { strict: true });규칙 정의하기
규칙은 AST 노드를 받아 규칙이 위반되었을 때 선택적 진단 메시지를 반환하는 함수입니다.
type Diagnostic = { file: string; line: number; message: string };
function noConsoleLog(node: ts.Node, sf: ts.SourceFile): Diagnostic | null {
if (!ts.isCallExpression(node)) return null;
const expr = node.expression.getText(sf);
if (expr !== "console.log") return null;
const { line } = sf.getLineAndCharacterOfPosition(node.pos);
return { file: sf.fileName, line: line + 1, message: "No console.log allowed" };
}AST 순회하기
각 소스 파일의 모든 노드에 모든 규칙을 적용하는 재귀적 순회를 작성하십시오.
function walk(
node: ts.Node,
sf: ts.SourceFile,
rules: ((n: ts.Node, sf: ts.SourceFile) => Diagnostic | null)[]
): Diagnostic[] {
const diags: Diagnostic[] = [];
for (const rule of rules) {
const d = rule(node, sf);
if (d) diags.push(d);
}
ts.forEachChild(node, child => diags.push(...walk(child, sf, rules)));
return diags;
}린터 실행하기
모든 소스 파일을 순회하며 규칙을 적용하고 진단 정보를 출력합니다.
const rules = [noConsoleLog];
const allDiagnostics: Diagnostic[] = [];
for (const sf of program.getSourceFiles()) {
if (!sf.isDeclarationFile) {
allDiagnostics.push(...walk(sf, sf, rules));
}
}
allDiagnostics.forEach(d =>
console.log(`${d.file}:${d.line} — ${d.message}`)
);타입 인식 규칙 추가하기
표현식의 TypeScript 타입에 따라 동작하는 규칙을 만들려면 타입 검사기를 사용합니다.
const checker = program.getTypeChecker();
function noAnyReturn(node: ts.Node, sf: ts.SourceFile): Diagnostic | null {
if (!ts.isFunctionDeclaration(node)) return null;
const sig = checker.getSignatureFromDeclaration(node);
if (!sig) return null;
const ret = checker.getReturnTypeOfSignature(sig);
if (ret.flags & ts.TypeFlags.Any) {
const { line } = sf.getLineAndCharacterOfPosition(node.pos);
return { file: sf.fileName, line: line + 1, message: "Function returns any" };
}
return null;
}CI용 종료 코드
진단 정보가 발견되면 0이 아닌 종료 코드를 반환하여 CI 파이프라인이 빌드에 실패하도록 합니다.
if (allDiagnostics.length > 0) {
console.error(`${allDiagnostics.length} lint error(s)`);
process.exit(1);
}
process.exit(0);규칙: 사용하지 않는 변수 금지
컴파일러 API는 ts.getPreEmitDiagnostics를 통해 사용하지 않는 변수에 대한 진단 정보를 제공하므로, 사용자 지정 규칙에 기본 제공 검사를 추가할 수 있습니다.
const preEmit = ts.getPreEmitDiagnostics(program);
preEmit.forEach(d => {
const msg = ts.flattenDiagnosticMessageText(d.messageText, "
");
console.log(msg);
});규칙: 반환 타입 필수 지정
함수에 명시적인 반환 타입 표기가 없을 때 경고하는 규칙은 문서화 규율을 유지하는 데 도움이 됩니다.
function requireReturnType(node: ts.Node, sf: ts.SourceFile): Diagnostic | null {
if (!ts.isFunctionDeclaration(node)) return null;
if (!node.type) {
const { line } = sf.getLineAndCharacterOfPosition(node.pos);
return { file: sf.fileName, line: line + 1, message: "Missing return type" };
}
return null;
}ESLint와 비교하기
사용자 지정 린터는 ESLint를 보완합니다. 스타일 규칙에는 ESLint를 사용하고, ESLint로 표현할 수 없는 타입 인식 규칙에는 TypeScript 컴파일러 API 도구를 사용합니다.
// ESLint: stylistic and common pattern rules
// Compiler API linter: deep type reasoning, custom constraints요약: 린터 구축
TypeScript 컴파일러 API 린터는 프로그램을 만들고, 규칙으로 AST를 순회하며, 필요하면 타입 검사기에 질의하고, 오류가 있으면 0이 아닌 코드로 종료합니다. 이 접근 방식으로 진정한 타입 인식 린트 규칙을 구현할 수 있습니다.
빠른 확인
컴파일러 API 린터가 ESLint보다 유리한 이유는 무엇입니까?
학습 내용
컴파일러 API를 사용하여 간단한 TypeScript 린터를 만들었습니다. 프로그램을 불러오고, AST를 순회하며, 규칙을 적용하고(선택적으로 타입 인식 가능), 진단 정보를 보고합니다. 이는 모든 TypeScript 프로젝트에서 사용자 지정 정적 분석을 구현하기 위한 토대입니다.
자주 묻는 질문
“간단한 린팅 도구 만들기” 강의는 무료인가요?
네 — “간단한 린팅 도구 만들기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“간단한 린팅 도구 만들기”에서 뭘 배우나요?
컴파일러 API로 사용자 정의 진단 도구를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“간단한 린팅 도구 만들기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.