Question

好的，我正在尝试使用 Airbnb linting 规则设置打字稿。但是我无法让 EsLint 理解我正在导入本地“项目”文件。

我一直看到这个错误：

我确实获得了 Typescript 智能感知，并且可以按 ctrl+单击到该文件。我试过安装 npmpackage“eslint-import-resolver-typescript”.. 但这不起作用。

所以请帮助我理解我做错了什么?！

tsconfig.json:

.eslinrc:

    "dependencies": {
        "@babel/polyfill": "^7.12.1",
        "axios": "^0.21.1",
        "bootstrap-tour": "^0.12.0",
        "chart.js": "^2.9.4",
        "core-js": "^3.6.5",
        "expose-loader": "^0.7.5",
        "history": "^5.0.0",
        "jquery": "^3.5.1",
        "moment": "^2.29.1",
        "query-string": "^5.1.1",
        "react": "^16.14.0",
        "react-chartjs-2": "^2.10.0",
        "react-cropper": "^1.3.0",
        "react-day-picker": "^7.4.8",
        "react-dom": "^16.14.0",
        "react-dropzone": "^11.2.0",
        "react-linkify": "^1.0.0-alpha",
        "react-onclickoutside": "^6.9.0",
        "react-paginate": "^6.5.0",
        "react-range": "^1.8.2",
        "react-redux": "^7.2.1",
        "react-router-dom": "^5.2.0",
        "react-slick": "^0.26.1",
        "react-textarea-autosize": "^8.2.0",
        "react-tippy": "^1.4.0",
        "react-tooltip": "^4.2.15",
        "redux": "^4.0.5",
        "redux-act": "^1.8.0",
        "redux-devtools-extension": "^2.13.9",
        "redux-saga": "^1.1.3",
        "regenerator-runtime": "^0.13.7",
        "styled-components": "^5.2.1",
        "typescript": "^4.2.3"
    },
    "devDependencies": {
        "@babel/core": "7.13.10",
        "@babel/plugin-proposal-class-properties": "7.13.0",
        "@babel/plugin-proposal-object-rest-spread": "7.13.8",
        "@babel/preset-env": "7.13.10",
        "@babel/preset-react": "7.12.13",
        "@babel/preset-typescript": "^7.13.0",
        "@types/core-js": "^2.5.4",
        "@types/jest": "^26.0.21",
        "@types/node": "^14.14.35",
        "@types/react": "^17.0.3",
        "@types/react-dom": "^17.0.2",
        "@types/react-redux": "^7.1.16",
        "@types/react-router-dom": "^5.1.7",
        "@types/styled-components": "^5.1.9",
        "@typescript-eslint/eslint-plugin": "^4.19.0",
        "@typescript-eslint/parser": "^4.19.0",
        "babel-eslint": "10.1.0",
        "babel-jest": "26.6.3",
        "babel-loader": "8.2.2",
        "css-loader": "3.5.3",
        "eslint": "^7.22.0",
        "eslint-config-airbnb-typescript": "^12.3.1",
        "eslint-config-prettier": "^8.1.0",
        "eslint-loader": "4.0.2",
        "eslint-plugin-import": "^2.22.1",
        "eslint-plugin-jsx-a11y": "^6.4.1",
        "eslint-plugin-react": "^7.23.0",
        "eslint-plugin-react-hooks": "^4.2.0",
        "husky": "^4.3.8",
        "identity-obj-proxy": "3.0.0",
        "lint-staged": "^10.5.4",
        "prettier": "2.2.1",
        "style-loader": "1.2.1",
        "tsconfig-paths-webpack-plugin": "^3.5.1",
        "url-loader": "4.1.0",
        "webpack": "4.43.0",
        "webpack-cli": "3.3.11",
        "webpack-dev-server": "3.11.0",
        "webpack-merge": "4.2.2"

编辑：如果我将其添加到 .eslintrc 中，错误就会消失：

   "rules": 
             {
               "import/no-extraneous-dependencies": "off"
             },

但我不希望那样..我希望规则与我自己的 ts 别名一起工作..?

Answer 1

我通过添加 import/core-modules 来解决这个问题，它告诉 ESlint 我的 Colors 已经解决了 As they state here。

"settings": {
.../
"import/core-modules": ["Colors"],
../
}

但是我不太喜欢这个解决方案，我想让 ESLint 自己解决这个问题。因为现在如果我添加更多 alias，我需要同时添加 tsconfig.json 和 .eslintrc。真的很丑的解决方案..

编辑：我使用这个答案解决了我的问题： https://stackoverflow.com/a/57939284/3727466

打字稿、Airbnb 和 eslint 使用别名导入/无无关紧要的依赖项

1 个答案: