React 项目使用静态类型检查Flow

「爱情、让人受尽委屈。」 2022-11-16 10:54 368阅读 0赞

文章目录

    1. react项目安装Flow
    1. 初始化配置文件
    1. 代码静态检查
    1. 常见问题
    • 4.1 VSCode 报错：Type annotations can only be used in TypeScript files

1. react项目安装Flow

npm/yarn安装，可以全局安装，也可项目安装：

  1. npm install -g flow-bin

2. 初始化配置文件

Flow的配置文件，默认为根目录下的.flowconfig。2种方式创建该文件

  1. 命令npx flow init
  2. 直接手工创建文件

配置文件

  1. [ignore] # 忽略的不需要检查的文件
  2. <PROJECT_ROOT>/node_modules/.*
  3. # <PROJECT_ROOT> 表示根目录的绝对路径
  4. [include] # 表示待检测的路径， .flowconfig 所在目录下的所有文件都被认为是待检测的 
  5. [libs] # 指定接口文件的路径
  6. [lints]
  7. [options] # 设置配置项
  8. [strict]

3. 代码静态检查

js文件第一行，加入// @flow这个注释，这样 flow 就会检查此文件了。
e.g.

  1. // @flow
  2. handleClick(i: number) { 
  3. }

详细用法，参考官方文档。

4. 常见问题

4.1 VSCode 报错：Type annotations can only be used in TypeScript files

是因为javascript的验证，需要在设置中配置一下，具体路径为：

Settings - User - Extensions - TypeScript - JavaScript - Validate: Enable

对应配置文件：

  1. // .vscode\settings.json
  2. { 
  3.     "javascript.validate.enable": false
  4. }

发表评论

表情：
评论列表 （有 0 条评论，368人围观）

还没有评论，来说两句吧...

相关阅读

    相关 使用SpotBug进行静态代码检查

    在运行程序前我们可以通过编译来发现问题，但这样是远远不够的。这是因为在编译期间仅捕获到非常小的错误范围，即语法错误，无效引用等。当程序包含编译错误时，IDE会发出警告，但它无法

    淩亂°似流年淩亂°似流年/ 0 赞/ 141 阅读