早就听说 flow 了，相比 typescript 而言，flow 的功能没那么强大，但是提供了够用的类型声明和静态检查。Vue 2.0 为什么选用 Flow 进行静态代码检查而不是直接使用 TypeScript？尤大大的回答基本说明了 flow 对比 typescript 的优势，当然这种也是相对于具体团队和项目而言。饿了么团队出了一个简单的 flow 的使用教程：Flow 的使用入门 - 知乎专栏，目测国内还没有太多中文的 flow 的资料。

 

我自己开发用 vscode，昨天小小折腾了一下，配置了一下 flow 的开发环境，在此做个备忘。

 

为了避免无关代码和模块的干扰，从一个空项目开始

 

新建两个 .js 文件，用来测试效果

 

这时候 VS Code 自带的语法检查会报错

 

ESlint

 

配合 VS Code ESLint extension 使用，下面配置一个基础的 .eslintrc，使其支持 flowtype

 

ESLint 配置生效后，新增了一条来自 ESLint 插件的语法报错

 

为 ESLint 添加支持 flowtype 插件（需要 npm 或 yarn 安装依赖）

 

但是发现并没有起作用，查文档 Package - eslint-plugin-flowtype 发现需要依赖 eslint-babel

 

安装后发现 ESLint 报的错误更多了，不过都是代码格式上的错误（原来之前 ESLint 一直没识别出来这些错误）

 

排除完代码格式上的错误后台剩下的就是 js 报错了

 

这个报错是来自于 VSCode 自带的代码检查服务，只需要在配置里把这个功能关掉就行了

 

此时没有报错了，可以试试添加一些 flowtype 相关的 rules 了，这里我只添加了一条

 

然后去掉代码中 test 的参数类型，ESLint 插件会给出相应报错

 

至此，ESLint 相关的配置就基本完成了， VS Code ESLint extension 在代码编辑时进行 lint，并实时给出提示

 

Babel

 

Babel 配合 flow 的配置基本参考 官方文档 ，npm 或 yarn 安装 bable-cli, babel-preset-flow，添加 .babelrc

 

运行编译命令

 

查看输出，可以看到 flow 相关的语法被处理掉了，但由于 .babelrc 没有配置 es6 语法的处理，输出代码中 es6 语法没有被处理

 

需要注意的是这里运行 babel 进行编译时并没有进行 lint，上面配置的 ESLint 仅用于 VS Code ESLint extension，如需在编译时进行 lint，需要配合构建工具 webpack 或 rollup 进行配置

 

Languae Support

 

flow 官方提供了一个 VS Code 插件 Flow Language Support，提供了语法高亮，代码感应提示，类型信息等功能

 

直接安装后提示

 

查一下使用说明，第三条要求 flow 命令可运行也就是全局安装 flow-bin，也可以本地安装，并修改 VS Code 配置文件，选一种方式安装就行好了。