gpt4 book ai didi

javascript - 如何在 VSCode 中智能感知别名模块路径

转载 作者:行者123 更新时间:2023-12-01 16:04:37 24 4
gpt4 key购买 nike

我想要 VSCode 到 IntelliSense the module path所以我可以通过点击访问它。

比如配置了jsconfig.json之后我可以访问 ./src/styled/index通过导入其全局路径。

但我不知道如何使它与别名 @styles 一起工作

// VSCode Intellisene Works
import { mixins, theme } from 'styles';

// VSCode Intellisene Doesn't work
import { mixins, theme } from '@styles';

enter image description here

我的当前 jsconfig.json :
{
"compilerOptions": {
"baseUrl": "./",
"jsx": "react",
"paths": {
"@styles": ["src/styles/index"]
}
}
}

最佳答案

似乎我不得不重新启动 VSCode。

Javascript ( javascript , javascriptreact VSCode 中的文件类型)jsconfig.json 的示例引用文件:

{
"compilerOptions": {
"baseUrl": "./src",
"jsx": "react",
"paths": {
"@styles": ["styles/index"],
"@fonts": ["fonts/index"],
"@components": ["components/index"],
"@atoms": ["components/atoms/index"],
"@molecules": ["components/molecules/index"],
"@organisms": ["components/organisms/index"],
"@templates": ["components/templates/index"],
"@icons": ["components/atoms/Icons/index"],
"@config": ["config/index"],
"@utils": ["utils/index"],
"@hooks": ["hooks/index"],
"@constants": ["constants/index"],
"@queries": ["queries/index"],
"@reducers": ["state/store/reducers"],
"@actions": ["state/store/actions"],
"@slices": ["state/slices/"],
"@storybookHelpers": ["../.storybook/helpers"]
}
}
}
styles/index 的示例好像:
export * from './colors';
export * from './GlobalStyle.styles';
export * from './mixins.styles';

// Or
export { COLORS } from './colors';
export { default as GlobalStyle } from './GlobalStyle.styles';
export { default as mixins } from './mixins.styles';
将允许导入(使用 IntelliSense):
import { COLORS, mixins, GlobalStyle } from '@styles';
奖金: aliases.js ,这是我用来在 webpack 中定义别名的助手config 文件,这有助于不要重复自己,例如在 storybook 中使用相同的别名时以及应用程序本身。
// Remember to update `jsconfig.json`
const aliases = (prefix = `src`) => ({
'@actions': `${prefix}/state/store/actions`,
'@atoms': `${prefix}/components/atoms`,
'@molecules': `${prefix}/components/molecules`,
'@organisms': `${prefix}/components/organisms`,
'@templates': `${prefix}/components/templates`,
'@components': `${prefix}/components`,
'@config': `${prefix}/config`,
'@constants': `${prefix}/constants`,
'@hooks': `${prefix}/hooks`,
'@icons': `${prefix}/components/atoms/Icons`,
'@queries': `${prefix}/queries`,
'@reducers': `${prefix}/state/store/reducers`,
'@slices': `${prefix}/state/slices`,
'@styles': `${prefix}/styles`,
'@utils': `${prefix}/utils`,
'@storybookHelpers': `../.storybook/helpers`,
});

module.exports = aliases;

// usage example at .storybook/webpack.config.js file
const path = require("path");
const alias = require(`../src/config/aliases`);

const SRC = "../src";
const aliases = alias(SRC);

const resolvedAliases = Object.fromEntries(
Object.entries(aliases).map(([key, value]) => [
key,
path.resolve(__dirname, value),
])
);

module.exports = ({ config }) => {
config.resolve.modules.push(path.resolve(__dirname, SRC));
config.resolve.alias = resolvedAliases;
return config;
};

typescript ( typescripttypescriptreact 文件)
tsconfig.json使用 compilerOptions.paths选项,注意路径是相对于 baseUrl :
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@components/*": ["components/*"],
"@config": ["config"],
"@constants": ["constants"],
"@hooks": ["hooks"],
"@styles": ["styles"],
"$types/*": ["types/*"],
"@utils": ["utils"]
}
}
这允许别名(使用 IntelliSense),例如:
// Example of hooks/index.ts file
export * from './useLogin';
export * from './useLocalStorage';
export * from './useAuth';

// Usage examples
import {ROUTES} from '@constants';
import {Text} from '@components/atoms';
import {mixins} from '@styles';
import {useLocalStorage} from '@hooks';

关于javascript - 如何在 VSCode 中智能感知别名模块路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58249053/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com