如何消除expo-router场景下未使用默认导出组件的Linter警告

阿华AIGC实验室

2026-4-17

我太懂这种明明代码跑起来完全正常，却被个lint警告盯着的烦躁感了！毕竟expo-router是靠文件系统路由识别页面的，咱们确实不用在代码里显式引用这个组件，但linter不知道这层逻辑，才会报出“Unused default export”或者“Unused default function”的警告。给你几个实用的解决办法：

单个文件快速解决：加注释禁用规则
直接在导出语句上方加一行ESLint注释，明确告诉它忽略这个未使用导出的检查。比如：

import React from 'react';

// 你的组件内部代码...

// eslint-disable-next-line import/no-unused-modules
export default function DummyPage(): React.JSX.Element {
  // 组件逻辑...
}

如果是先定义函数再导出的写法，就把注释加在导出那行上面：

function DummyPage(): React.JSX.Element {
  // 组件逻辑...
}

// eslint-disable-next-line import/no-unused-modules
export default DummyPage;

全局配置：一次性搞定所有路由页面
要是你有一堆路由页面都遇到这个问题，不想挨个加注释，可以在项目的ESLint配置文件（比如.eslintrc.js）里全局调整规则，针对路由页面所在的目录禁用这个检查。比如你的页面都在main/menu/下面，配置可以这么写：
```
module.exports = {
  // ...其他已有的ESLint配置...
  overrides: [
    {
      files: ['main/menu/**/*.jsx', 'main/menu/**/*.tsx'],
      rules: {
        'import/no-unused-modules': 'off'
      }
    }
  ]
};
```
针对Rider IDE的设置调整
既然你用的是JetBrains Rider，也可以直接在IDE里处理：右键点击警告提示，选择「Suppress for statement」或者「Suppress in file」，让IDE直接忽略这个位置的警告。或者去设置里找「Languages & Frameworks > JavaScript > Code Quality Tools > ESLint」，检查是否可以针对这个规则进行全局或局部的禁用配置。