How to intellisense alias module path in VSCode

问题

I would like VSCode to IntelliSense the module path so I can access it by click.

For example, after configurating jsconfig.json I'm able to access ./src/styled/index by importing its global path.

But I couldn't figure out how to make it work with an alias @styles

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

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

My current jsconfig.json:

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

回答1:

Seems I had to restart vscode.

Here is an example of jsconfig.json file for reference:

{
  "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"]
    }
  }
}

An example of how styles/index looks like:

export { spring, variants } from './animation';
export { COLORS } from './colors';
export { default as GlobalStyle } from './GlobalStyle.styles';
export { default as gradients } from './gradients.styles';
export { default as mixins } from './mixins.styles';
export { default as theme } from './theme';

For a bonus: aliases.js, which is a helper which I use to define aliases in webpack, it helps to not repeat yourself, for example when using the same aliases in storybook and for the application itself.

// 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;

来源：https://stackoverflow.com/questions/58249053/how-to-intellisense-alias-module-path-in-vscode

标签

javascript

visual-studio-code

intellisense

vscode-settings