在settings.json文件中，添加这一行：

"typescript.preferences.importModuleSpecifier": "non-relative"

如果删除此属性，则丑陋的相对自动导入是默认选项。如果你正在使用JS，只需将'typescript'改为'javascript'即可。要了解有关此设置选项的更多信息，只需像这样将鼠标悬停在上面：

**（额外提示）**在tsconfig.json中使用以下编译器选项将~/作为所有 * 内部 * 导入路径的前缀：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"]
    }
  },
}

我不得不重新启动VSCode。

Javascript（VSCode中的javascript、javascriptreact文件类型）

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配置文件中的别名，它有助于避免重复，例如在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（typescript、typescriptreact文件）

在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';

我有正确的配置所描述的其他答案。在VS代码中，我使用Ctrl + Shift + P-> TypeScript: Restart TS server命令重新启动了TypeScript服务器，它修复了编辑器突出显示导入路径的错误。
为了完整起见，下面是我的tsconfig.json的样子：

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*"]
}

作为旁注，请确保jsconfig/tsconfig中的include指向正确的路径。

对于像我这样的其他答案不起作用的人来说，这些是对我有用的tsconfig位，除了在接受的答案中添加设置并确保您正确设置包括/排除：

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  }

完全归功于这个要点：https://gist.github.com/EmilyRosina/eef3aa0d66568754a98382121fefa154