Visual代码“通过/转到”不适用于jsconfig.json (和Next.js)中的路径别名。

Question

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

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

然而，这是一个很大的问题，但是，我以前能够点击任何变量(或导入)保持cmd，并直接进入最终的定义。与将一个peek ("Code“)导入到我正在导入的模块/变量相同。

此功能似乎不适用于别名。在顶层安装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解析器-webpack npm包。会很好的。