如何在VS Code中用JSDoc实现React组件Props校验？

我当前编写的React组件如下：

/**
 * Textbox input component
 * @param {{
 * label: string
 * }} props
 *
 */
function Textbox(props) {
  return (
    <>
      <label htmlFor="txtbox">{props.label}</label>
      <input type="text" id="txtbox" />
    </>
  );
}

我已经在JSDoc注释里定义了Props及其预期类型，但VS Code里ESLint还是因为无法识别该JSDoc类型而报错。我不想禁用ESLint，也不愿意重复编写如下PropTypes代码：

Textbox.propTypes = {
  label: PropTypes.string.isRequired,
};

请问使用JSDoc进行Props校验的理想方案是什么？

方案一：配置ESLint识别JSDoc并跳过PropTypes检查 #

通过eslint-plugin-jsdoc配合eslint-plugin-react的规则配置，让ESLint认可JSDoc的Props类型声明，不再强制要求写PropTypes：

1. 安装依赖：

   npm install eslint-plugin-jsdoc --save-dev
   # 或用yarn：yarn add eslint-plugin-jsdoc -D
   # 或pnpm：pnpm add eslint-plugin-jsdoc -D
   

2. 修改ESLint配置文件（比如.eslintrc.js）：

   module.exports = {
     plugins: ['react', 'jsdoc'],
     rules: {
       // 让react/prop-types规则跳过已用JSDoc声明Props的组件
       'react/prop-types': ['error', { skipUndeclared: true }],
       // 启用JSDoc的参数类型校验规则
       'jsdoc/require-param': 'error',
       'jsdoc/require-param-type': 'error',
       'jsdoc/require-param-description': 'warn' // 可选，根据需求开启
     },
     settings: {
       jsdoc: {
         mode: 'jsdoc' // 指定使用标准JSDoc模式
       }
     }
   };
   

这样配置后，ESLint会校验你的JSDoc类型是否规范，同时不会再因为没写PropTypes而报错。

方案二：用TypeScript的JSDoc类型检查（无需改写为TS文件） #

如果项目可以引入TypeScript的类型检查能力，无需将组件改为.tsx文件，只需通过JSDoc配合TypeScript配置实现更严格的Props校验：

1. 安装TypeScript依赖：

   npm install typescript --save-dev
   

2. 创建tsconfig.json并配置：

   {
     "compilerOptions": {
       "allowJs": true,
       "checkJs": true,
       "jsx": "react-jsx",
       "noEmit": true // 只做类型检查，不生成TS编译产物
     },
     "include": ["src/**/*"] // 指定要检查的文件范围
   }
   

3. 调整ESLint配置（可选，增强TS相关的ESLint规则）：
   先安装依赖：

   npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
   

   再修改ESLint配置：

   module.exports = {
     parser: '@typescript-eslint/parser',
     plugins: ['react', '@typescript-eslint'],
     rules: {
       'react/prop-types': 'off', // 关闭PropTypes检查，改用TS的JSDoc类型检查
       '@typescript-eslint/typedef': ['error', { parameter: true }] // 强制参数声明类型
     },
     settings: {
       react: {
         version: 'detect'
       }
     }
   };
   

这种方案下，TypeScript会通过JSDoc注释识别Props的类型，在VS Code里实时给出类型提示和错误，同时ESLint也能配合做代码规范检查，完全不需要写PropTypes。

内容的提问来源于stack exchange，提问作者yogeshwar-b