Last thing you want to see in your project's imports is ugly stuff like this
Because this is a feature I use with some frequency, but not frequently enough that I remember the pattern when I need it, I wrote this article as my own memo.
- Change settings for webpack's config - using eslint-import-resolver-alias
resolve: {
alias: {
'@ui': path.resolve(__dirname, 'src/components/ui'),
'@shared': path.resolve(__dirname, 'src/shared'),
},
modules: [path.join(__dirname, 'src'), 'node_modules'],
extensions: ['.js', '.jsx'],
},
- Change VSCode settings so Intellisense won't break
{
"compilerOptions": {
"allowSyntheticDefaultImports": false,
"baseUrl": ".",
"jsx": "react",
"paths": {
"@ui/*": ["./src/components/ui/*"],
"@shared/*": ["./src/shared/*"]
}
},
"exclude": ["node_modules"]
}
- Replace everything using a regexp. Example:
/'.*/shared/g
or, if there's a simpler case
(\s)from(.*)shared/
(whitespace is important so it won't count in files which have a "from" ending)
- And then pretty it up with linter autofixer.
Top comments (0)