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

Posted 2023-02-19

【中文标题】如何在 VSCode 中智能感知别名模块路径

【英文标题】：How to intellisense alias module path in VSCode

【发布时间】：2020-02-03 12:56:18

【问题描述】：

我想将 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';

我现在的jsconfig.json：

  "compilerOptions": 
    "baseUrl": "./",
    "jsx": "react",
    "paths": 
      "@styles": ["src/styles/index"]
    
  

【参考方案1】：

看来我必须重新启动 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,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';

【讨论】：

如何在jsconfig.json中使用aliases.js？你能分享更新的jsconfig.json吗？

你不能在非javascript文件中使用它，jsconfig看起来像答案

【参考方案2】：

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

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

如果这个属性被移除，那么丑陋的相对自动导入是默认选项。如果您当前正在使用 JS，只需将“typescript”更改为“javascript”。要了解有关此设置选项的更多信息，只需将鼠标悬停在其上即可：

【讨论】：

注意它不是别名，它是绝对引用的一个选项

【参考方案3】：

附带说明，确保您的jsconfig/tsconfig 中的include 指向正确的路径。