javascript - Visual Studio Code "Cick-Through/Go-To"不适用于 jsconfig.json(和 Next.js)中的路径别名

Question

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

这就是为什么我真的很喜欢 jsconfig.json 中的路径别名。让一切变得如此干净。

但是，这是一个很大的问题，我曾经能够单击任何包含 cmd 的变量(或导入)，并直接进入最终定义。与我正在导入的模块/变量中窥视(“代码窥视”)相同。

此功能似乎不适用于别名。安装 module-resolver在顶层帮助。 IE。 click-through现在可以通过 @/Components 开始的所有内容但不是较低级别的别名。任何想法如何解决？

注意事项:

我知道我应该，但我目前还没有使用 es-lint，

我也没有明确使用 webpack(我知道 next.js 在后台使用它)

纯 Javascript(无 typescript )

这些工具肯定很有用，但我现在想尽量减少额外的工具。

配置:

这是我的 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 包。它会正常工作。