使用ts-checker-webpack-plugin时自定义TSLint规则无法被识别

我之前也碰到过类似的坑，结合你的情况，大概率是TSLint加载规则的时机、路径，或者编译配置出了问题，给你梳理几个关键排查点和解决方案：

1. 先确认TSLint配置的路径指向 #

TSLint只能识别编译后的.js规则文件，所以你得确保tslint.json里的配置指向正确的输出目录：

• 首先在tslint.json中添加rulesDirectory字段，指向你自定义规则编译后的文件夹，比如：

  {
    "rulesDirectory": "./dist/rules",
    "rules": {
      "custom-check": ["error"]
    }
  }
  

• 注意：这里的路径是相对项目根目录的，别写成源文件的.ts路径，TSLint不认TypeScript源文件。

2. 调整构建顺序：先编译规则，再跑TSLint/Webpack #

Webpack构建时，TSLint可能在你的自定义规则编译完成前就开始检查代码了，这时候自然找不到规则文件。解决办法是拆分编译流程：

• 在package.json里添加预编译脚本，先单独编译自定义规则，再执行Webpack：

  "scripts": {
    "prebuild": "tsc -p ./tsconfig.rules.json",
    "build": "webpack"
  }
  

• 这里的tsconfig.rules.json是专门给自定义规则用的编译配置，要确保它的compilerOptions符合TSLint的要求：

  {
    "compilerOptions": {
      "target": "ES5", // TSLint对ES版本兼容更好的是ES5/ES6
      "module": "CommonJS", // 必须是CommonJS，TSLint用CommonJS加载规则
      "outDir": "./dist/rules", // 输出到指定目录，和tslint.json里的路径对应
      "strict": true
    },
    "include": ["./src/rules/**/*.ts"]
  }
  

3. 检查自定义规则的导出格式 #

TSLint对规则的导出格式有严格要求，你的TypeScript代码必须正确实现IRule接口：

• 示例正确的规则模板：

  import * as Lint from "tslint";
  import * as ts from "typescript";
  
  export class Rule extends Lint.Rules.AbstractRule {
    // 必须定义metadata，ruleName要和tslint.json里的规则名完全一致
    public static metadata: Lint.IRuleMetadata = {
      ruleName: "custom-check",
      description: "你的自定义规则描述",
      options: null,
      type: "style",
      typescriptOnly: false
    };
  
    public apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] {
      return this.applyWithWalker(new CustomCheckWalker(sourceFile, this.getOptions()));
    }
  }
  
  class CustomCheckWalker extends Lint.RuleWalker {
    // 这里写你的规则逻辑，比如遍历AST节点检查
    visitIdentifier(node: ts.Identifier) {
      // 示例逻辑：禁止使用特定变量名
      if (node.text === "forbiddenVar") {
        this.addFailureAtNode(node, "禁止使用该变量名");
      }
      super.visitIdentifier(node);
    }
  }
  

• 编译后的JS文件必须导出Rule类，TSLint才能识别到规则实现。

4. 手动验证编译后的规则文件 #

你可以先单独执行tsc -p ./tsconfig.rules.json，然后去dist/rules目录下看生成的.js文件，确认：

• 文件存在，且内容里有module.exports.Rule = Rule这类导出语句
• 文件名和规则名对应（比如customCheckRule.ts编译后是customCheckRule.js，TSLint会自动匹配custom-check的规则名）

按这几步排查下来，基本能解决规则找不到的问题。

内容的提问来源于stack exchange，提问作者Carlos Muñoz