NextJS配合TypeScript使用时如何像CRA一样在终端显示未使用变量警告？

核心实现逻辑 #

通过开启TypeScript语法校验、配置Next.js开发环境ESLint校验规则，即可实现和CRA一致的终端实时提示未使用变量的效果，无需等到构建阶段才暴露问题。

操作步骤 #

步骤1：修改tsconfig.json开启未使用变量校验 #

在项目根目录的tsconfig.json中新增如下配置：

{
  "compilerOptions": {
    // 保留原有其他配置不变
    "noUnusedLocals": true, // 开启未使用局部变量校验
    "noUnusedParameters": true, // 开启未使用函数参数校验
  }
}

步骤2：配置next.config.js开启开发环境校验 #

在项目根目录的next.config.js中新增ESLint校验配置，让开发服务（next dev）运行时实时触发校验：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 保留原有其他配置不变
  eslint: {
    dirs: ['pages', 'components', 'lib', 'src'], // 按需填写需要校验的目录
  },
}

module.exports = nextConfig

步骤3：调整警告级别（可选） #

如果希望未使用变量仅输出警告、不阻断开发流程，可在项目根目录的.eslintrc.json中调整规则级别：

{
  "rules": {
    "@typescript-eslint/no-unused-vars": ["warn"]
  }
}

如果需要开发阶段直接报错提示，将上方的warn修改为error即可。

步骤4：配置提交前置校验（可选，彻底避免漏改） #

如果要从流程上杜绝未使用变量被提交到代码库，可通过husky + lint-staged配置提交前自动校验：

• 安装依赖：yarn add husky lint-staged -D
• 启用husky：npx husky install
• 新增pre-commit钩子：npx husky add .husky/pre-commit "npx lint-staged"
• 项目根目录新增.lintstagedrc.json配置文件：

{
  "**/*.{ts,tsx}": ["eslint --fix", "tsc --noEmit"]
}

配置完成后每次提交代码会自动校验改动文件，存在未使用变量时会直接阻断提交，无需手动执行构建排查。

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