在WebStorm中使用Node.js和Flow

Question

I am trying to setup WebStorm with Flow typing for a Node.js project.

I have it all working fine with NPM scripts but would like to integrate with the IDE.

Here is the scripts portion of my 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"
  },

Now if I modify the run configuration for a test and:

• change the src directory to lib
• specify a before launch, run NPM script 'flow:build'

then I can run that configuration.

I still have two problems.

1. Debugging will not stop on a breakpoint
2. If I hit the arrow in the source code gutter to run the test, it creates a new config which runs against the flow source and fails

Does anyone have Node.js and flow working well together in WebStorm?

Answer 1

1. flow-remove-types does not generate sourcemaps, so there is absolutely no way for debugger to map the generated file in lib to original files in src . You have to add breakpoints to the generated files located in lib folder if you like to debug your tests

2. no way - configuration is generated for the file you hit the arrow in. If you like to run individual tests from gutter, hit the arrow in generated file, not in the source one

You can use Babel flow preset instead of flow-remove-types :

• npm install --save-dev babel-cli babel-preset-env babel-preset-flow
• create a .babelrc file in your project root dir:

{ "presets": ["flow"] }

And that's all you have to do - no precompiling, etc., running from gutter/debugging for source files will work out of the box

Answer 2

You can use --sourcemaps and -pretty flags:

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

• The -m or --sourcemaps flag adds sourcemaps files to your /out folder

• The -p or --pretty flag removes the empty spaces in the files of your /out folder