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"] } } }
Advertisement
Answer
Seems I had to restart VSCode.
Javascript (javascript
,javascriptreact
file types in VSCode)
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 * 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';
Will allow import (with IntelliSense):
import { COLORS, mixins, GlobalStyle } from '@styles';
For a bonus: aliases.js
, which is a helper which I use to define aliases in webpack
config files, 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; // 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
files)
At tsconfig.json
use the compilerOptions.paths
option, notice that the paths are relative to baseUrl
:
{ "compilerOptions": { "baseUrl": "./", "paths": { "@components/*": ["components/*"], "@config": ["config"], "@constants": ["constants"], "@hooks": ["hooks"], "@styles": ["styles"], "$types/*": ["types/*"], "@utils": ["utils"] } }
This allows aliases (with IntelliSense), for example:
// 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';