在 WebStorm 中使用 Flow Node.js

Question

我正在尝试为 Node.js 项目设置带有流类型的 WebStorm。

我在 NPM 脚本上一切正常，但想与 IDE.

集成

这是我的 package.json:

的脚本部分

"scripts": {
    "dev":
    "watch --wait=1 'flow-remove-types src/ -d lib/ --all --pretty' ./src/ & nodemon ./lib/server.js",
    "start": "npm run flow:build && node ./lib/",
    "lint": "eslint src/**",
    "test": "npm run flow:build && jest lib",
    "coverage": "jest --collectCoverageFrom=src/**.js --coverage src",
    "flow": "flow",
    "flow:check": "flow check ./src/",
    "flow:build": "flow-remove-types ./src/ -d ./lib/ --all --pretty",
    "flow:deps": "flow-typed install",
    "flow:watch": "flow-watch"
  },

现在，如果我修改运行配置进行测试并且：

将 src 目录更改为 lib
在启动前指定一个，运行 NPM 脚本 'flow:build'

那我就可以运行那个配置了

我还有两个问题。

调试不会在断点处停止
如果我点击源代码栏中的箭头进行运行测试，它会创建一个新的配置，该配置运行与流源相对并失败

有没有人 Node.js 和 flow 在 WebStorm 中协同工作？

Answer 1

flow-remove-types 不生成源映射，因此调试器绝对没有办法将 lib 中生成的文件映射到 src 中的原始文件。如果您想调试测试，您必须将断点添加到位于 lib 文件夹中的生成文件中
没办法 - 为你点击箭头的文件生成配置。如果你想运行来自装订线的单独测试，点击生成文件中的箭头，而不是源文件中的箭头一个

你可以使用 Babel flow preset 而不是 flow-remove-types:

npm install --save-dev babel-cli babel-preset-env babel-preset-flow
在您的项目根目录中创建一个 .babelrc 文件：

{ "presets": ["flow"] }

这就是您要做的所有事情 - 无需预编译等，运行来自 gutter/debugging 的源文件将开箱即用

Answer 2

您可以使用 --sourcemaps 和 -pretty 标志：

flow-remove-types --pretty --sourcemaps --out-dir out/ in/

-m 或 --sourcemaps 标志将源映射文件添加到您的 /out 文件夹
-p 或 --pretty 标志删除 /out 文件夹文件中的空白区域

在 WebStorm 中使用 Flow Node.js

Using Node.js with Flow in WebStorm

node.js

webstorm

flowtype