eslint 使用配置了路径映射的 jsconfig.json 解决导入错误答案

【问题标题】：eslint resolve error on imports using with path mapping configured jsconfig.jsoneslint 使用配置了路径映射的 jsconfig.json 解决导入错误
【发布时间】：2023-04-09 18:43:01
【问题描述】：

这是我的项目结构：

-src

--assets
--components
--constants
--helpers
--pages
--routes

eslintrc.json
jsconfig.json
App.js
index.js

我厌倦了：

import SomeComponent from '../../../../../components/SomeComponent';

而我想做：

import SomeComponent from '@components/SomeComponent';

所以我在这里看到了这个问题：

VSCode Intellisense does not work with webpack + alias

我得到了它的工作：

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es6",
    "module": "commonjs",
    "paths": {
      "@components/*": ["./src/components/*"]
     }
  }
}

但是现在 eslint 抱怨它没有解决，即使它编译得很好。

eslint 错误：

无法解析模块 '@components/SocialMedia'.eslint(import/no-unresolved) 的路径

注意：

我不想禁用 eslint。我也想让它理解这种路径。

【问题讨论】：

标签： javascript visual-studio-code eslint vscode-settings eslintrc

【解决方案1】：

另一种方法，假设您已安装 eslint-plugin-import（在您的 devDependencies 中）。只需在您的 .eslintrc.json 文件中添加此“设置”即可。

.eslintrc.json

{
  "settings": {
    "import/resolver": {
      "node": {
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  }
}

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

然后你就可以调用了

import SomeComponent from 'components/SomeComponent';`

【讨论】：

此解决方案适用于 src 中的文件。但是 eslint 无法解析根目录下的文件路径。怎么解决？
似乎 eslint 和 jsconfig 应该很好地结合在一起，所以你不需要这样做，但也许我没有完全理解 jsconfig 的目的。您的回答对我有用，谢谢！
这行得通，但我失去了⌘ +click，即我主要用于跨文件跳转的goto定义功能。有什么建议？（我也不是 TS 项目）
@StangSpree 你可以做moduleDirectory: ['node_modules', './']，但是现在你需要添加一个src前缀来导入上面例子中的相同组件。

【解决方案2】：

我已经安装了：

npm install -D eslint-import-resolver-alias

我添加到我的 eslint 配置文件中：

eslintrc.json

"settings": {
    "import/resolver" : {
      "alias" : {
        "map" : [
          ["@components","./src/components/"]
        ],
        "extensions": [".js"]
      }
    }
  }

现在它正在工作，并且 eslint 不再显示错误。

编辑：

我正在使用 webpack，我也需要这样做：

webpack.config.js

resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components/')
    }
  }

【讨论】：

此解决方案适用于 src 中的文件。但是 eslint 无法解析根目录下的文件路径。怎么解决？

【解决方案3】：

对于 lerna 用户：

eslintrc

{
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".js", ".jsx", ".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        // this resolves path alias import problems
        "moduleDirectory": [ "apps/*/src", "packages/*/src" ]
      },
      "typescript": {
        "alwaysTryTypes": true,
        // this resolves packages import problems
        "project": [
          "packages/*/tsconfig.json", 
          "apps/*/tsconfig.json"
        ]
      }
    }
  }
}

【讨论】：