是否存在ESLint规则可检测不含JSX的.jsx扩展名文件？

eslint-plugin-react 目前没有内置规则专门用于检测后缀为 .jsx/.tsx 但实际不含任何JSX语法的文件。

如果要自动找出这类文件，有两种可行方案：

方案1：自定义ESLint规则 #

你可以快速编写一个自定义ESLint规则，核心逻辑是：

• 检查当前文件的后缀是否为 .jsx/.tsx
• 遍历AST，确认是否存在JSXOpeningElement、JSXFragment等JSX相关节点
• 如果文件后缀符合但无JSX节点，抛出重命名建议的提示

示例规则的核心代码片段：

module.exports = {
  create(context) {
    const filename = context.getFilename();
    if (!/\.tsx?$|\.jsx?$/.test(filename)) return {};
    const isJSXFile = /\.tsx$|\.jsx$/.test(filename);
    let hasJSX = false;

    return {
      JSXOpeningElement() { hasJSX = true; },
      JSXFragment() { hasJSX = true; },
      "Program:exit"() {
        if (isJSXFile && !hasJSX) {
          context.report({
            message: "该文件不含JSX语法，建议重命名为 .ts/.js",
            loc: { line: 1, column: 0 }
          });
        }
      }
    };
  }
};

方案2：批量检测脚本 #

如果不想编写ESLint规则，也可以用Node.js写一个简单脚本，配合@babel/parser解析文件AST，批量扫描项目：

const fs = require('fs');
const path = require('path');
const { parse } = require('@babel/parser');

function scanDir(dir) {
  const files = fs.readdirSync(dir);
  files.forEach(file => {
    const fullPath = path.join(dir, file);
    const stats = fs.statSync(fullPath);
    if (stats.isDirectory()) {
      scanDir(fullPath);
    } else if (/\.tsx$|\.jsx$/.test(file)) {
      const content = fs.readFileSync(fullPath, 'utf8');
      const ast = parse(content, { sourceType: 'module', plugins: ['jsx', 'typescript'] });
      const hasJSX = ast.program.body.some(node => 
        node.type.startsWith('JSX') || 
        (node.type === 'ExpressionStatement' && node.expression.type.startsWith('JSX'))
      );
      if (!hasJSX) {
        console.log(`可重命名: ${fullPath}`);
      }
    }
  });
}

scanDir('./src'); // 替换为你的项目源码目录

不需要给eslint-plugin-react开发补丁，自定义规则或脚本就能解决问题——后者适合一次性批量检测，前者则可以集成到日常代码检查流程中。

内容的提问来源于stack exchange，提问作者Nikolai Prokoschenko