电子邮件lint

用于客户端兼容的 Lint 电子邮件 HTML 。 校验 CSS 属性、 HTML 元素和属性 邮件 30+电子邮件客户端的数据.

$ email-lint check welcome.html

welcome.html
  12:5   error    cursor not supported (4/4 variants)  [gmail]
  18:3   warning  background-image not supported (2/6 variants: windows, windows-mail)  [outlook]
  24:10  warning  <picture> not supported (4/4 variants)  [gmail]

✖ 1 error, 2 warnings

为什么不直接用罐头?

你可以,而且你经常应该. caniemail 解析您的 HTML 和 CSS, 返回拆分出的问题 errors 财务报告和审定财务报表 warnings,和船舶 groupIssues() 财务报告和审定财务报表 formatIssue() 帮助你介绍他们。 这是一个很好的图书馆, 电子邮件林特建在它上.

它不做的是决定什么 在你的密码库, 或者在你面前的答案 在CI。 这就是燃灯的目的:

• 家庭崩溃 ——"在gmail.android,gmail.ios,gmail.desktop-webmail,gmail.mobile-webmail中不支持"成为一行: cursor not supported (4/4 variants) [gmail]
• 严重性规则 ——并非所有问题都是平等的. cursor 在电子邮件中是化妆品(降级为 info) (中文(简体) ). Gmail部队 target="_blank" 在所有链接上,所以如果你已经使用它,这就是 info 没有 error
• 框架过滤 —— React Email 添加了预览文本块,预装图像标记,以及 target="_blank" 用于输出。 罐头信封上这些 电子邮件林特知道它们是框架文物 压制它们
• CLI 有退出代码 —— 说 email-lint check 在错误中退出1个,当唯一的发现是警告时退出0个,所以CI屏蔽了那些断断续续的东西,对其余的保持安静
• 输出格式 – 漂亮的终端输出, 用于工具的 JSON, GitHub 动作说明, 在 PR diffs 上显示内含
• TSX 支持 - 指着一个 .tsx 它使+ lints 一步,不需要建造管道

安装

npm install @email-lint/core

国 际

# Lint HTML files
email-lint check emails/*.html

# Lint React Email components directly (.tsx/.jsx)
email-lint check src/emails/welcome.tsx

# Target specific clients
email-lint check welcome.html --preset gmail
email-lint check welcome.html --preset outlook

# Several at once, for the union of their clients
email-lint check welcome.html --preset gmail,outlook

# Drop clients your audience never uses
email-lint check welcome.html --exclude orange,mail-ru
email-lint check welcome.html --preset all-clients --exclude '*.android'

# Output formats
email-lint check welcome.html --format pretty   # default, colored terminal output
email-lint check welcome.html --format json      # structured JSON for tooling
email-lint check welcome.html --format github    # GitHub Actions annotations

# Expand collapsed diagnostics to one line per variant
email-lint check welcome.html --verbose

有代码的退出 1 当发现错误时, 把它放进CI中, 它只是工作.

预设

反应电子邮件 / TSX

当你通过 .tsx 或者说 .jsx 文件, CLI 自动 :

1. 使用 吉地语 (不需要建设步骤)
2. 通过 HTML 将其渲染到 HTML @react-email/components
3. 启用框架感知过滤以压制已知的假阳性

导出您的组件为默认和可选导出 testData 用于道具:

export const testData = { name: 'Jane' };

export default function Welcome({ name }: { name: string }) {
  return (
    <Html>
      <Body>
        <Text>Hey {name}</Text>
      </Body>
    </Html>
  );
}

email-lint check src/emails/welcome.tsx

使用 --no-ignore-framework 以禁用框架过滤,或 --show-ignored 在一个单独的章节中看到被压制的诊断.

图书馆 API

import { lint } from '@email-lint/core';

const html = '<div style="cursor: pointer;">Click</div>';
const result = lint(html, { preset: 'gmail' });

console.log(result.success);      // false
console.log(result.errorCount);   // 1
console.log(result.diagnostics);  // LintDiagnostic[]

lint(html, config?)

回返a LintResult 根据客户家庭分类的诊断.

interface LintResult {
  diagnostics: LintDiagnostic[];
  errorCount: number;
  warningCount: number;
  success: boolean;
}

interface LintDiagnostic {
  severity: 'error' | 'warning' | 'info';
  title: string;                    // Feature name from caniemail
  message: string;                  // Human-readable message with notes
  family: string;                   // "gmail", "outlook", etc.
  variants: string[];               // Affected variants within the family
  familySize: number;               // Total variants in this family
  position?: {
    start: { line: number; column: number };
    end: { line: number; column: number };
  };
}

interface LintConfig {
  preset?: string;                  // Client preset (default: "all-clients")
  exclude?: string;                 // Clients to drop, comma-separated globs
  framework?: 'react-email';       // Enable framework-aware filtering
  showIgnored?: boolean;            // Keep suppressed diagnostics in output
}

格式化器

import { lint, formatPretty, formatJson, formatGitHub } from '@email-lint/core';

const result = lint(html);
console.log(formatPretty([result]));
console.log(formatJson([result]));
console.log(formatGitHub([result]));

如何运作

1. 解析 - 将您的 HTML 提供给 邮件,用于对照其兼容性数据库检查每个 CSS 属性、 HTML 元素和属性
2. 严重性规则 ——适用上下文意识规则. cursor 在电子邮件中是化妆品,所以降级到 info. Gmail 部队 target="_blank" 在所有链接上,所以如果你已经使用它,这就是 info 还有
3. 家庭崩溃 ——将每个变量的诊断组分入家庭. 代替4个单独的"Gmail Android / Gmail iOS / Gmail 桌面 / Gmail 移动"条目,你得到一个诊断显示 (4/4 variants)
4. 框架过滤 ——在闪接回电子邮件组件时,压制由框架本身引起的诊断(审查文本块,预装图像标记,强制) target="_blank"(中文(简体) )

GitHub 动作

- name: Lint emails
  run: email-lint check 'src/emails/**/*.tsx' --format github

这个 github 用于物质释放 工作流程命令 在您的 PR diffs 上显示内含注释 .

许可证

麻省理工学院