扩展名为 '.tsx'eslint(react/jsx-filename-extension) 的文件中不允许使用 JSX

Question

在.tsx文件中，为什么 eslint 报告：

扩展名为 '.tsx'eslint(react/jsx-filename-extension) 的文件中不允许使用 JSX

eslint config 怎么设置才能重新喜欢

Answer 1

您可能希望在您的 TypeScript 文件中配置react/jsx-filename-extension规则，.eslintrc.js以便 ESLint 对 JSX 感到满意：

rules:  {
  'react/jsx-filename-extension': [2, { 'extensions': ['.js', '.jsx', '.ts', '.tsx'] }],
},

为什么这是必要的？我也在这里看到它：https://www.npmjs.com/package/tslint-config-airbnb。.tsx 不是一个明显的文件扩展名吗？ (4认同)
我相信第一个参数“2”指的是布尔值“additionalProperties”，应该是“1”（这里并不重要）。请参阅：https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/jsx-filename-extension.js 和其他解决方案/sf/answers/3012186131/ (3认同)
@MoBeigi：不，“1”表示“警告”，“2”表示“错误”。两者都有效。 (2认同)
@Remi如果您使用airbnb，您目前需要一个单独的包来支持打字稿：https://www.npmjs.com/package/eslint-config-airbnb-typescript 它允许在.tsx文件中使用JSX。 (2认同)

Answer 2

在 eslint 配置的规则部分下添加此规则：

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".ts"] }]
}