问题
I trying incrementaly migration from Flow to Typescript. I use webpack with babel for transpile flow and typescript. ('@babel/preset-flow', '@babel/typescript')
I have this import in FLOW file test.js
/* @flow */
import MyComponent from 'components/myComponent'
on path: src/components/myComponent/index.tsx is
class MyComponent extends Component<Props> {
render() {}
}
export default MyComponent
My WebStorm IDE display eslint error Flow: Cannot resolve module components/myComponent
For resolve this issue I tryied use "eslint-import-resolver-typescript"
My .eslintrc
{
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"plugin:cypress/recommended",
"plugin:@typescript-eslint/recommended"
],
"globals": {
"API_HOST": true,
"Raven": true
},
"plugins": [
"import",
"flowtype",
"react",
"prettier",
"json",
"emotion",
"cypress",
"@typescript-eslint"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"experimentalObjectRestSpread": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true,
"jquery": true,
"mocha": true,
"jest": true,
"jasmine": true,
"cypress/globals": true
},
"rules": {
"comma-dangle": ["error", "always-multiline"],
"import/no-unresolved": 0,
"import/extensions": [0, "never", { "svg": "always", "css": "always", "png": "always", "ts": "never"}],
"import/no-named-as-default-member": 0,
"quotes": [1, "single"],
"no-console": 1,
"no-debugger": 1,
"no-var": 1,
"semi": [
"error",
"never"
],
"no-trailing-spaces": 1,
"no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
"no-prototype-builtins": 0,
"require-atomic-updates": 0,
"eol-last": 0,
"no-unused-vars": [1, {"ignoreRestSiblings": true}],
"no-underscore-dangle": 0,
"no-alert": 0,
"no-lone-blocks": 0,
"jsx-quotes": 1,
"react/display-name": [
1,
{
"ignoreTranspilerName": false
}
],
"react/forbid-prop-types": [
1,
{
"forbid": [
"any"
]
}
],
"react/jsx-boolean-value": 1,
"react/jsx-closing-bracket-location": 0,
"react/jsx-curly-spacing": 1,
"react/jsx-indent-props": 0,
"react/jsx-key": 1,
"react/jsx-max-props-per-line": 0,
"react/jsx-no-bind": 1,
"react/jsx-no-duplicate-props": 1,
"react/jsx-no-literals": 0,
"react/jsx-no-undef": 1,
"react/jsx-pascal-case": 1,
"react/jsx-sort-prop-types": 0,
"react/jsx-sort-props": 0,
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
"react/jsx-wrap-multilines": 1,
"react/no-danger": 1,
"react/no-did-mount-set-state": 1,
"react/no-did-update-set-state": 1,
"react/no-direct-mutation-state": 1,
"react/no-multi-comp": 1,
"react/no-set-state": 0,
"react/no-unknown-property": 1,
"react/prefer-es6-class": 1,
"react/prop-types": 0,
"react/react-in-jsx-scope": 1,
"react/self-closing-comp": 1,
"react/sort-comp": 0,
"flowtype/boolean-style": [
2,
"boolean"
],
"flowtype/define-flow-type": 1,
"flowtype/delimiter-dangle": [
1,
"always-multiline"
],
"flowtype/generic-spacing": [
2,
"never"
],
"flowtype/no-primitive-constructor-types": 2,
"flowtype/no-types-missing-file-annotation": 2,
//"flowtype/no-weak-types": 2,
"flowtype/object-type-delimiter": [
2,
"comma"
],
"flowtype/require-parameter-type": 2,
// "flowtype/require-return-type": [
// 2,
// "always",
// {
// "annotateUndefined": "never"
// }
// ],
"flowtype/require-valid-file-annotation": [2, "always"],
// "flowtype/semi": [
// 2,
// "always"
// ],
"flowtype/space-after-type-colon": [
2,
"always"
],
"flowtype/space-before-generic-bracket": [
2,
"never"
],
"flowtype/space-before-type-colon": [
2,
"never"
],
// "flowtype/type-id-match": [
// 1,
// "^([A-Z][a-z0-9]+)+Type$"
// ],
"flowtype/union-intersection-spacing": [
2,
"always"
],
"flowtype/use-flow-type": 1,
"flowtype/valid-syntax": 1,
"prettier/prettier": [
"error", {
"singleQuote": true,
"trailingComma": "all",
"parser": "flow",
"useTabs": true,
"tabWidth": 2,
"semi": false,
"bracketSpacing": true,
"printWidth": 120
}],
"emotion/jsx-import": "error",
"emotion/no-vanilla": "error",
"emotion/import-from-emotion": "error",
"emotion/styled-import": "error"
},
"overrides": [
{
"files": ["*.ts", "*.tsx"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"useJSXTextNode": true
}
},
"rules": {
"@typescript-eslint/member-delimiter-style": ["error", {
"multiline": {
"delimiter": "comma",
"requireLast": true
},
"singleline": {
"delimiter": "comma",
"requireLast": true
}
}],
"flowtype/no-types-missing-file-annotation": 0,
"@typescript-eslint/explicit-function-return-type": "off"
}
}
],
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"],
"paths": ["src"]
},
"eslint-import-resolver-typescript": true
},
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"]
},
"flowtype": {
"onlyFilesWithFlowAnnotation": true
},
"react": {
"version": "detect"
}
}
}
Any idea for this issue?
来源:https://stackoverflow.com/questions/59993606/import-typescript-file-in-flowjs-eslit-flow-cannot-resolve-module