Comments (13)
Hello,
I gave it a try tonight and it worked !
I mapped my src
directory to ~
so I can access all my top folders like this :
import DB from '~/lib/database'
import { User } from '~/domain/user'
1. Teach VS Code's Intellisense where to look at
So you can jump to the definition and have autocompletion. ✨
To do that, create a jsconfig.json
file at the root of your project :
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"~/*": [
"src/*"
]
}
},
"exclude": [
"node_modules"
]
}
2. Teach VS Code to autocomplete your paths
Install the extension Path Intellisense
This extension allows the autocompletion of the custom paths.
Configure the extension in your project's settings under .vscode/settings.json
:
{
"path-intellisense.mappings": {
"~": "${workspaceRoot}/src"
}
}
3. Teach Babel how to resolve your custom paths
The last step is to install and configure babel-plugin-module-resolver so the code compile!
Here is my .babelrc
:
{
"plugins": [
[
"module-resolver",
{
"alias": {
"~": "./src"
}
}
]
]
}
4. Profit
from babel-plugin-module-resolver.
@damonbauer The Path Intellisense extension helps with path names but not with the majority of Intellisense, e.g. with
import {someFunction} from 'utils/MyUtilFn';
the extension helps me to complete utils/MyUtilFn
, but not to complete someFunction
, does not support Cmd-click to jump to its definition (neither on filename nor on function) and not enable me to use rename symbol like on relative imports.
from babel-plugin-module-resolver.
@datenreisender @tleunen you can use the Path Intellisense extenion with the "path-intellisense.mappings"
option to get what you need.
from babel-plugin-module-resolver.
I'm not a user of VSCode, but I will try to find the information and add it in the readme, unless someone finds it first.
from babel-plugin-module-resolver.
@tleunen how to use autocompletion in IntelliJ/WebStorm?
from babel-plugin-module-resolver.
@tangkunyin IntelliJ is described in the README and not in the scope of this issue.
from babel-plugin-module-resolver.
@damonbauer @datenreisender - I'm trying again to find a good solution with vscode. I did try the plugin Path Intellisense, but it seems it only supports for alias?
How would you setup a root directory without having to alias all the sub files/directories?
from babel-plugin-module-resolver.
@jgoux Thanks, it work for me.
from babel-plugin-module-resolver.
Thanks @jgoux!
from babel-plugin-module-resolver.
Thanks, @jgoux, for describing the correct solution. I incorporated that into PR #246, so others will also find it more easily.
from babel-plugin-module-resolver.
Thanks @jgoux !
from babel-plugin-module-resolver.
@jgoux THANK YOU VERY MUCH BROTHER! YOU SAVED ME! 😍
from babel-plugin-module-resolver.
how to resolve js files with extensions like .native.js, .web.js , .android.js and .ios.js in path intellisense
from babel-plugin-module-resolver.
Related Issues (20)
- it seems not to be working from subdirectories
- Is it possible to toggle an alias on the fly?
- Unable to resolve module when using camel case filename HOT 1
- How to isolate node_modules? HOT 1
- It doesn't resolve paths to files HOT 3
- Unable to resolve sub module HOT 2
- How to config it with the @craco/craco HOT 2
- Import output is double quotes
- Aliases being transformed in an unpredictable way
- when switching to ESM modules, this package no longer works HOT 1
- Dynamic import with partial string, not working
- Better documentation
- ESM package + TypeScript support
- Alias incorrectly transformed in node_modules (react native / graphql / apollo) HOT 1
- How to use aliases with `path.resolve()`?
- Bug: Same named file resolve in different order than specified in extensions
- Vulnerability json5 HOT 2
- Eslint error when import without index
- how to handle JEST error: Cannot find module HOT 1
- Alias with array of paths HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from babel-plugin-module-resolver.