使用StandardJS Linter时，React Native代码为何出现Unexpected token Props解析错误？

这个报错的核心原因很明确：你写的type Props = {};是Flow的静态类型定义语法，但StandardJS默认并没有配置支持Flow的解析规则，它的默认解析器识别不了这种非标准的JavaScript语法，所以才会抛出"Unexpected token Props"的解析错误。

StandardJS底层依赖ESLint，默认用的是Espree解析器——这个解析器只能处理标准ECMAScript语法，而Flow的类型注解属于扩展语法，不在它的识别范围内。

下面给你几个可行的解决办法：

• 方法一：给StandardJS添加Flow支持

  1. 先安装所需的依赖包：

     npm install --save-dev eslint-plugin-flowtype babel-eslint
     

  2. 在项目根目录创建或修改.eslintrc配置文件，加入Flow相关配置：

     {
       "parser": "babel-eslint",
       "plugins": ["flowtype"],
       "extends": ["standard", "plugin:flowtype/recommended"]
     }
     

  3. 最后别忘了在项目里初始化Flow的配置文件，执行npx flow init生成.flowconfig，这样整套Flow的检查机制就能和StandardJS配合工作了。

• 方法二：改用TypeScript替代Flow
  如果你更熟悉或者倾向于TypeScript，可以把代码改成TS风格的类型定义，同时配置StandardJS支持TS：

  1. 安装TS相关的ESLint依赖：

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

  2. 修改代码里的类型定义为TS的接口形式：

     import React, { Component } from 'react';
     import { Text, View } from 'react-native';
     
     interface Props {};
     export default class App extends Component<Props> {
       render() {
         return (
           <View>
             <Text> Welcome to React Native! </Text>
           </View>
         );
       }
     }
     

  3. 在.eslintrc里配置使用TS解析器，让StandardJS能识别TS语法。

• 方法三：直接移除Flow类型语法
  如果你的项目暂时不需要静态类型检查，最简单的办法就是删掉type Props = {};这一行，同时把Component<Props>改成Component，代码就变成了标准的React Native JavaScript代码，StandardJS自然就能正常解析了。

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