Typescript、Airbnb 和 eslint 导入/无外部依赖项（带别名）

Posted 2023-03-07

【中文标题】Typescript、Airbnb 和 eslint 导入/无外部依赖项（带别名）

【英文标题】：Typescript, Airbnb and eslint import/no-extraneous-dependencies with alias

【发布时间】：2021-06-20 16:35:27

【问题描述】：

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

我一直看到这个错误：

我确实得到了 Typescript intellisense 并且可以 ctrl+Click 到文件。 我试过安装 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 别名一起使用.. ????

【问题讨论】：

你也可以分享你的 package.json 内容吗？

当然我也可以分享

稍微更新了我的答案

【参考方案1】：

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

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

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

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