Angular应用自定义Lint规则需求：禁止在HTML标签内调用函数

步骤1：生成自定义规则模板 #

Angular的Lint基于ESLint和@angular-eslint，可以用官方工具快速生成规则模板：

# 若未安装@angular-eslint/schematics，先安装
npm install @angular-eslint/schematics --save-dev

# 生成名为no-direct-html-function-call的自定义规则
ng generate @angular-eslint/schematics:custom-rule no-direct-html-function-call

执行后会在项目根目录下创建tools/eslint-rules/no-direct-html-function-call.ts文件。

步骤2：编写规则检测逻辑 #

打开生成的规则文件，替换为以下代码，核心是遍历HTML模板的文本节点，检测是否存在直接调用函数的格式：

import { ESLintUtils } from '@typescript-eslint/utils';
import { TemplateRule } from '@angular-eslint/template-rule';

const createRule = ESLintUtils.RuleCreator(() => '');

export default createRule({
  create(context) {
    const parserServices = ESLintUtils.getParserServices(context);
    const templateAST = parserServices.getTemplateBodyTokenStore()?.templateAST;

    if (!templateAST) return {};

    // 检测文本节点是否包含函数调用格式
    const checkTextNode = (node: any) => {
      // 匹配类似func()、func(123)的函数调用，排除插值表达式外的合法括号场景
      const funcCallRegex = /[a-zA-Z_]\w*\(\s*.*?\s*\)/;
      if (node.type === 'Text' && funcCallRegex.test(node.value)) {
        context.report({
          node,
          messageId: 'noDirectFunctionCall',
        });
      }
    };

    // 递归遍历所有节点
    const traverseNodes = (node: any) => {
      if (node.type === 'Text') checkTextNode(node);
      node.children?.forEach(traverseNodes);
    };

    traverseNodes(templateAST);
    return {};
  },
  name: 'no-direct-html-function-call',
  meta: {
    type: 'suggestion',
    docs: {
      description: '禁止在HTML标签内部直接写函数调用（非插值表达式形式）',
      recommended: 'warn',
    },
    messages: {
      noDirectFunctionCall: 'HTML标签内禁止直接调用函数，请避免使用非插值表达式的函数调用语法',
    },
    schema: [],
  },
  defaultOptions: [],
});

步骤3：配置ESLint识别自定义规则 #

修改项目根目录的.eslintrc.json，添加自定义规则的引用和配置：

{
  "overrides": [
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {
        "custom/no-direct-html-function-call": "warn" // 可设置为error触发错误提示
      },
      "plugins": ["custom"]
    }
  ],
  "plugins": ["custom"],
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

同时在tsconfig.eslint.json中添加自定义规则的路径，确保ESLint能正确解析：

{
  "extends": "./tsconfig.json",
  "include": [
    "src/**/*",
    "tools/eslint-rules/**/*"
  ]
}

步骤4：测试规则效果 #

创建测试用的HTML模板：

<span>call()</span> <!-- 会触发警告/错误 -->
<p>正常文本内容</p> <!-- 无提示 -->
<div>{{ loadData() }}</div> <!-- 无提示（插值表达式不受限制） -->
<section>getUserInfo(123)</section> <!-- 会触发警告/错误 -->

运行Lint命令：

ng lint

此时就能看到对应节点的警告或错误提示。

内容的提问来源于stack exchange，提问作者HafizMuhammad Shoaib