React中Flow与ESLint联用遇解析错误：意外令牌，预期','

嘿，你碰到的这个问题其实是两个点导致的：一是Flow类型注解的语法写错了，二是ESLint还没配置好支持Flow的解析规则。我来帮你一步步搞定：

第一步：先修正代码里的Flow语法错误 #

你当前的函数参数类型注解写法不符合Flow的规范，Flow对解构参数的类型注解需要明确声明整个参数对象的类型结构，而不是直接在解构里写类型：

错误的写法：

export default function Container({ children: React.Node }) {
  return <Wrapper>{children}</Wrapper>;
}

改成正确的写法：

export default function Container({ children }: { children: React.Node }) {
  return <Wrapper>{children}</Wrapper>;
}

如果组件的props以后会扩展，用类型别名会更清晰：

// 先定义props的类型别名
type ContainerProps = {
  children: React.Node,
};

export default function Container({ children }: ContainerProps) {
  return <Wrapper>{children}</Wrapper>;
}

第二步：配置ESLint支持Flow语法 #

光改代码还不够，你得让ESLint能识别Flow的类型注解，这需要安装对应的依赖并调整配置：

1. 安装必要的开发依赖
   打开终端运行：

# npm 版本
npm install --save-dev @babel/eslint-parser eslint-plugin-flowtype @babel/preset-flow @babel/preset-react

# yarn 版本
yarn add --dev @babel/eslint-parser eslint-plugin-flowtype @babel/preset-flow @babel/preset-react

2. 修改ESLint配置文件（比如.eslintrc.js）
   把下面的配置添加进去，覆盖或补充你现有的配置：

module.exports = {
  // 指定用支持Flow的Babel解析器
  parser: "@babel/eslint-parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true, // 支持JSX语法
    },
    babelOptions: {
      presets: ["@babel/preset-react", "@babel/preset-flow"], // 加载React和Flow的Babel预设
    },
  },
  // 启用Flow的ESLint插件
  plugins: ["flowtype"],
  // 扩展推荐的规则集，包含ESLint、React和Flow的基础规则
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:flowtype/recommended"
  ],
  rules: {
    // 强制所有Flow文件都加上// @flow注解
    "flowtype/require-valid-file-annotation": ["error", "always"],
  },
  settings: {
    react: {
      version: "detect", // 自动检测你的React版本，不用手动指定
    },
  },
};

3. 确保Babel配置正确（比如.babelrc或babel.config.js）
   如果还没配置Babel，添加以下内容：

module.exports = {
  presets: [
    "@babel/preset-react",
    "@babel/preset-flow"
  ]
};

完成这些步骤后，ESLint应该就能正常解析你的Flow类型注解，不会再报“意外令牌”的错误了。

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