[英]Visual Studio Code “Cick-Through / Go-To” does not work with path aliases in jsconfig.json (and Next.js)
I am running a next.js project, as the project grew my imports became harder and harder to read.我正在运行一个 next.js 项目,随着项目的发展,我的导入变得越来越难阅读。
Which is why I really love the path aliasing in jsconfig.json.这就是为什么我真的很喜欢 jsconfig.json 中的路径别名。 Makes everything so much cleaner.
让一切变得如此干净。
However, and that's a big however, I used to be able to click on any variable (or import) holding cmd and would be directly taken to the final definition.但是,这是一个很大的问题,我曾经能够单击任何包含 cmd 的变量(或导入),并直接进入最终定义。 Same with getting a peek ("Code Peek") into the module/variable that I was importing.
与我正在导入的模块/变量中窥视(“代码窥视”)相同。
This functionality did not seem to work with aliases.此功能似乎不适用于别名。 Installing
module-resolver
helped on the top level.安装
module-resolver
有助于顶层。 Ie click-through
through is now possible for everything starting with @/Components
but not the lower level aliases.即,现在所有以
@/Components
开头但不是较低级别别名的所有内容都可以click-through
。 Any Idea how to fix that?任何想法如何解决?
Those tools are surely useful, but I want to keep the additional tooling to a minimum right now.这些工具肯定很有用,但我现在想尽量减少额外的工具。
This is my jsconfig.json这是我的 jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/Components/*": ["components/*"],
"@/Concepts/*": ["components/Concepts/*"],
...
}
}
}
this is my .babelrc
这是我的
.babelrc
{
"presets": ["next/babel"],
"plugins": [
["styled-components", { "ssr": true }],
["module-resolver", {
"root": ["."],
"alias": {
"@/Components": "components",
"@/Concepts": "components/Concepts",
...
}
}]
]
}
I am importing like this (both imports work):我正在像这样导入(两个导入都有效):
Click-through works:
import { Bold } from "@/Components/styles";
Click-through does not work:
import { DefaultMarginSlider, Formula } from "@/Concepts/utils";
for completeness sake here is my package.json
为了完整起见,这里是我的
package.json
I got it working with the following config settings我让它使用以下配置设置
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"]
}
my.eslintec file looks like my.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": {}
}
And there are the extra plugins I installed to get it working我安装了一些额外的插件来让它工作
eslint-import-resolver-alias
eslint-import-resolver-webpack
eslint-plugin-import
And this is my webpack config to resolve while building这是我在构建时要解决的 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]),
],
},
For next.js you can skip the above webpack config and eslint-import-resolver-webpack npm package.对于 next.js 您可以跳过上面的 webpack 配置和 eslint-import-resolver-webpack npmC ZEFE6407A8DZ03A77A It will work fine.
它会正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.