React项目中如何配置ESLint，使调用指定弃用函数时触发错误？

下面是几个可行的实现方案，你可以根据项目情况选择：

方案1：用eslint-plugin-deprecation快速实现 #

这个插件能直接识别代码里的@deprecated注释，把调用弃用函数的行为转为ESLint错误。

• 先安装插件：

  npm install eslint-plugin-deprecation --save-dev
  # 或者用yarn/pnpm
  yarn add eslint-plugin-deprecation -D
  pnpm add eslint-plugin-deprecation -D
  

• 然后在你的ESLint配置文件（比如.eslintrc.js）里添加配置：

  module.exports = {
    // ...其他配置
    plugins: ['deprecation'],
    rules: {
      'deprecation/deprecation': 'error' // 设为error就会抛出错误，改成warn是警告
    }
  };
  

  配置完之后，所有带有@deprecated注释的函数被调用时，ESLint就会直接报错提示。

方案2：自定义ESLint规则（适合定制化需求） #

如果需要更灵活的检测逻辑（比如只针对特定函数、自定义错误提示语），可以自己写ESLint规则：

1. 在项目根目录新建eslint-custom-rules文件夹，创建no-deprecated-myfunc.js文件：

   module.exports = {
     create(context) {
       return {
         // 监听函数调用表达式
         CallExpression(node) {
           // 替换成你要弃用的函数名
           const deprecatedFuncName = 'oldDeprecatedFunc';
           if (node.callee.name === deprecatedFuncName) {
             context.report({
               node,
               message: `${deprecatedFuncName}已弃用，请使用newReplacementFunc替代`
             });
           }
         }
       };
     }
   };
   

2. 在ESLint配置里引入这个自定义规则：

   module.exports = {
     // ...其他配置
     rules: {
       'custom/no-deprecated-myfunc': 'error'
     },
     plugins: {
       custom: require('./eslint-custom-rules')
     }
   };
   

   这种方式可以完全按照你的需求定制检测逻辑，比如检测多个函数、根据文件路径过滤等。

方案3：TypeScript项目专属方案 #

如果你的React项目用了TypeScript，除了@deprecated注释，还可以配合@typescript-eslint的规则实现：

• 确保已经安装了@typescript-eslint/eslint-plugin和@typescript-eslint/parser
• 在ESLint配置里开启@typescript-eslint/no-deprecated规则：

  module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    // ...其他配置
    rules: {
      '@typescript-eslint/no-deprecated': 'error'
    }
  };
  

  TypeScript会自动识别函数上的@deprecated JSDoc注释，配合这个规则就能直接把调用行为报成ESLint错误。

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