이제는 TSLint를 사용하는 개발자들이 많은데, 기본 룰 외에 추가적인 커스텀 룰을 만들고 싶을 때가 있을 수 있습니다. 이번 블로그 포스트에서는 TSLint에서 사용할 수 있는 커스텀 룰을 만드는 방법에 대해 알아보겠습니다.
1. 프로젝트 설정
TSLint 커스텀 룰을 작성하기 위해 먼저 프로젝트 설정을 해야 합니다. 아래의 명령을 사용하여 TSLint를 설치해주세요.
npm install tslint --save-dev
프로젝트 루트 디렉토리에 tslint.json 파일을 생성하고, 아래의 예시 코드를 추가해주세요.
{
"extends": ["tslint:recommended"],
"rules": {}
}
2. 커스텀 룰 작성
커스텀 룰을 작성하기 위해서는 TSLint 룰을 상속받아 사용하거나, 직접 룰을 작성해야 합니다.
2.1 상속을 통한 커스텀 룰 작성
TSLint에 기본적으로 제공되는 룰을 상속받아 사용하는 방법을 살펴보겠습니다. 아래의 예시 코드와 같이 tslint.json 파일에서 rules 항목에 원하는 규칙을 추가해주세요.
{
"extends": ["tslint:recommended"],
"rules": {
"no-console": false,
"custom-rule": {
"description": "Custom rule example",
"severity": "warning",
"options": {
"option1": true,
"option2": false
}
}
}
}
위의 예시에서는 no-console 룰을 비활성화하고, custom-rule을 추가했습니다. 다음과 같이 해당 룰을 JavaScript 혹은 TypeScript 파일 상단에 주석으로 사용할 수 있습니다.
/* tslint:disable:custom-rule */
console.log("This will be ignored by the custom rule");
/* tslint:enable:custom-rule */
2.2 직접 룰 작성
TSLint에서 제공하는 룰 외에 직접 룰을 작성할 수도 있습니다. 새로운 룰을 작성하려면 다음과 같은 파일 구조를 생성해야 합니다.
.
├── tslint.json
└── customRules
└── customRule.ts
customRule.ts 파일을 생성하고 다음의 코드를 추가해주세요.
import * as ts from 'typescript';
import * as Lint from 'tslint';
export class Rule extends Lint.Rules.AbstractRule {
public static FAILURE_STRING = 'Custom rule violation';
public apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] {
// Rule implementation
// ...
return this.applyWithWalker(new CustomRuleWalker(sourceFile, this.getOptions()));
}
}
class CustomRuleWalker extends Lint.RuleWalker {
public visitCallExpression(node: ts.CallExpression) {
const functionName = node.expression.getText();
if (functionName === 'customFunction') {
// Violation
this.addFailureAt(node.getStart(), node.getWidth(), Rule.FAILURE_STRING);
}
super.visitCallExpression(node);
}
}
위의 예시에서는 customRule.ts 파일에 Rule 클래스를 작성했습니다. Rule 클래스는 AbstractRule 클래스를 상속받아 apply 메소드를 구현하고, CustomRuleWalker 클래스를 사용하여 노드를 검사합니다.
tslint.json 파일에 다음의 설정을 추가하여 작성한 커스텀 룰을 사용할 수 있습니다.
{
"rulesDirectory": ["./customRules"],
"rules": {
"no-console": false,
"custom-rule": true
}
}
3. 커스텀 룰 적용
위에서 작성한 커스텀 룰이 적용되기 위해서는 프로젝트를 다시 빌드해야 합니다. 빌드 후 TSLint를 실행하면 커스텀 룰이 적용된 결과를 확인할 수 있습니다.
npm run build
npx tslint --project .
마무리
이번 블로그 포스트에서는 TSLint에서 사용할 수 있는 커스텀 룰을 만드는 방법에 대해 알아보았습니다. 이러한 커스텀 룰을 활용하여 코드의 품질을 더욱 향상시킬 수 있습니다. 추가적으로 TSLint의 공식 문서를 참고하여 더 다양한 커스텀 룰을 만들어 보세요!