Visual Studio Code“Cick-Through / Go-To”不适用于 jsconfig.json（和 Next.js）中的路径别名

Question

我正在运行一个 next.js 项目，随着项目的增长，我的导入变得越来越难读。

这就是为什么我非常喜欢 jsconfig.json 中的路径别名。让一切变得更加干净。

然而，这是一个很大的问题，我过去可以单击任何包含 cmd 的变量（或导入），然后直接进入最终定义。与查看（“代码查看”）我正在导入的模块/变量相同。

此功能似乎不适用于别名。安装module-resolver在顶层有帮助。即click-through现在对于以别名开头的所有内容都是可能的@/Components，但不是较低级别的别名。知道如何解决这个问题吗？

注意事项：

• 我知道我应该这样做，但我目前还没有使用 es-lint，
• 我也没有明确使用 webpack （我知道 next.js 在幕后使用它）
• 纯 Javascript（无打字稿）

这些工具肯定很有用，但我现在想将额外的工具保持在最低限度。

配置：

这是我的 jsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/Components/*": ["components/*"],
            "@/Concepts/*": ["components/Concepts/*"],
            ...
        }
    }
}

这是我的.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true }],
    ["module-resolver", {
      "root": ["."],
      "alias": {
        "@/Components": "components",
        "@/Concepts": "components/Concepts",
        ...
      }
    }]
  ]
}

我像这样导入（两种导入都有效）：

Click-through works:
import { Bold } from "@/Components/styles";

Click-through does not work:
import { DefaultMarginSlider, Formula } from "@/Concepts/utils";

为了完整起见，这是我的package.json

Answer 1

我让它与以下配置设置一起工作

jsconfig.json

{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "jsx": "react",
    "noImplicitAny": false,
    "paths": {
      "components/*": [
        "./components/*"
      ],
      "utils/*": [
        "./utils/*"
      ],
      "UI/*": [
        "./UI/*"
      ],
      "assets/*": [
        "./assets/*"
      ]
    }
  },
  "exclude": ["node_modules"]
}

我的 .eslintec 文件看起来像

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "plugin:import/react",
    "airbnb"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "settings": {
    "import/resolver": {
      "alias": {
        "map": [
          [
            "UI",
            "./src/UI"
          ],
          [
            "components",
            "./src/components"
          ],
          [
            "assets",
            "./src/assets"
          ]
        ],
        "extensions": [
          ".js",
          ".jsx",
          ".svg",
          ".png"
        ]
      },
      "webpack": {
        "config": "config/webpack.config.js"
      }
    }
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "parser": "babel-eslint",
  "plugins": [
    "react",
    "react-hooks",
     "import",
     "resolver-alias"
  ],
  "rules": {}
}

我安装了额外的插件来让它工作

eslint-import-resolver-alias
eslint-import-resolver-webpack
eslint-plugin-import

这是我在构建时要解决的 webpack 配置

resolve: {
  modules: ['node_modules', paths.appNodeModules].concat(
    modules.additionalModulePaths || []
  ),
  extensions: paths.moduleFileExtensions
    .map(ext => `.${ext}`)
    .filter(ext => useTypeScript || !ext.includes('ts')),
  alias: {
    // Support React Native Web
    // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
    'react-dom': '@hot-loader/react-dom',
    'components': path.resolve(__dirname, '../src/components'),
    'assets': path.resolve(__dirname, '../src/assets'),
    'UI': path.resolve(__dirname, '../src/UI'),
    'utils': path.resolve(__dirname, '../src/utils'),
    ...(isEnvProductionProfile && {
      'react-dom$': 'react-dom/profiling',
      'scheduler/tracing': 'scheduler/tracing-profiling',
    }),
    ...(modules.webpackAliases || {}),
  },
  plugins: [
    PnpWebpackPlugin,
    new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
  ],
},

对于 next.js 你可以跳过上面的 webpack 配置和 eslint-import-resolver-webpack npm 包。它会工作得很好。