Last active
January 6, 2020 12:15
-
-
Save prantor19/d46bec0a8aaa85abde97ad52a61a2ad0 to your computer and use it in GitHub Desktop.
Absolute path ReactJs using vscode
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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" | |
| } | |
| } | |
| ] | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment