有很多东西需要配置。让我引导您完成这个过程。
TLDR: use wemake-vue-template。它配备了nuxt
, flow
,以及许多其他好东西。
Babel
首先我们需要配置babel
。这就是你的babel
配置应如下所示:
{
"presets": [
["vue-app", {
"useBuiltIns": true
}],
"flow"
]
}
安装这些礼物npm install --save-dev babel-preset-flow babel-preset-vue-app
.
Eslint
接下来我们需要配置eslint
来清理我们的flow
文件。这就是如何.eslintrc
应该看起来像:
{
"root": true,
"plugins": [
"flowtype-errors"
],
"env": {
"node": true,
"browser": true
},
"rules": {
// raise flow errors
"flowtype-errors/show-errors": 2,
"flowtype-errors/show-warnings": 1,
// "flowtype-errors/enforce-min-coverage": [2, 50]
},
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 2017,
"sourceType": "module"
}
}
确保您已安装所有内容。
.flowconfig
这是最难的部分。您需要指定配置flow
。根据您的设置,它可能会有所不同。
[ignore]
./nuxt/*
<PROJECT_ROOT>/node_modules/.*config-chain/test/broken.json
[include]
<PROJECT_ROOT>/client
<PROJECT_ROOT>/
[libs]
[lints]
all=warn
untyped-import=off
unsafe-getters-setters=off
[options]
include_warnings=true
esproposal.decorators=ignore
module.name_mapper='^~' -> '<PROJECT_ROOT>/client'
module.system.node.resolve_dirname=node_modules
module.system.node.resolve_dirname=client
module.file_ext=.vue
module.file_ext=.js
nuxt.config.js
最后一步。我们需要在每次更改时启用 linting。
build: {
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
就是这样。现在你将有工作flow
类型检查。