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

问题描述

好的，我正在尝试使用 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 别名一起工作..?

解决方法

我通过添加 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