在React Web应用嵌入Stripe定价表遇ESLint错误，求非禁用注释解法

不用禁用ESLint规则的话，有两种可行方案：

方案1：将全局声明移至独立的.d.ts文件 #

TypeScript会自动扫描项目中的类型声明文件（.d.ts），把Stripe定价表的JSX元素声明单独放在这类文件里，就能避开ESLint对组件文件的命名空间检查。

步骤：

• 在项目的类型目录（比如src/types/）下新建stripe-pricing-table.d.ts文件
• 写入以下内容：

  declare global {
    namespace JSX {
      interface IntrinsicElements {
        'stripe-pricing-table': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
      }
    }
  }
  
  export {};
  

• 这里的export {}是为了让文件被识别为ES模块，避免全局作用域冲突。大部分情况下，ESLint不会对.d.ts文件启用@typescript-eslint/no-namespace规则，自然不会触发错误。

方案2：调整ESLint配置，豁免类型声明文件 #

如果方案1还是触发错误，可以在ESLint配置文件（比如.eslintrc.js）中给.d.ts文件单独禁用该规则：

module.exports = {
  // 其他配置...
  overrides: [
    {
      files: ['*.d.ts'],
      rules: {
        '@typescript-eslint/no-namespace': 'off'
      }
    }
  ]
};

这样既能保持组件文件的ESLint规则严格，又能正确声明Stripe定价表的JSX元素类型。

内容的提问来源于stack exchange，提问作者Simon Berens