[Babel] Module resolver

tl;dr

A blogpost that demonstrate how to use babel-plugin-module-resolver ? How babel-plugin-module-resolver help developers write better file path ?

Outline

  1. Problems
  2. Install and configure babel-plugin-module-resolver
  3. Configure jsconfig.json/tsconfig.json(TypeScript Project)
  4. Configure .flowconfig (for flow-type project)
  5. File path IntelliSense extension in VS Code

#1 Problems

In my React Native project, I used to import the component as below,

import SomeComponent from "../../../SomeComponent" 

Using the ../ – dot notation or relative file path to access the component that I put in another folder. If having a large amount of folder or deeply nested folder structure.

It make the code hard to read and most of the time, I can’t recalled where is that component belong to.

So, babel-plugin-module-resolver come to rescue. With babel-plugin-module-resolver , I can write better file path for my React Native project as below:

import SomeComponent from "@shared/SomeComponent";

or

import HomeScreen from "@screens/HomeScreen";

This is the magic power from babel-plugin-module-resolver.

#2 Installation and configuration

Using npm,

npm install --save-dev babel-plugin-module-resolver

or using yarn,

yarn add --dev babel-plugin-module-resolver

Add below configuration to babel config file – .babelrc or babel.config.js

...
plugins: [
  [
     'module-resolver',
     {
       root: ['./],
       alias: {
         '@screens': './src/screens',
         '@shared': './src/shared'
       }
     }
  ]
]

Now, we can import the Homeor Body component by using below syntax

import Home from "@screens/Home";

or 

import Body from "@shared/Body";

#3 Configure jsconfig/tsconfig

Next, configure the jsconfig.json or tsconfig.json file. If not exist, you can create one. This is to enable the IntelliSense for the editor (At least for VS Code)

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@screens/*": ["./src/screens/*"],
      "@shared/*": ["./src/shared/*"]
    }
  }
}

This way we can tell the editor which directory the editor should look into. So that we can have the editor to look for the definition for us.

** tsconfig.json if your project is TypeScript based.

#4 Configure .flowconfig

Using flow-type in your JavaScript ? Chances are you will get warning, such as Cannot resolve module .

Add following configuration into your .flowconfig

module.name_mapper='^@screens/\(.*\)$' -> '<PROJECT_ROOT>/src/screens/\1'
module.name_mapper='^@shared/\(.*\)$' -> '<PROJECT_ROOT>/src/shared/\1'

module.name_mapper=pattern -> mapped directory

Pattern – Regex or specific path pattern.
Mapped directory – The directory flow-type will look for whenever met the pattern we specified

#5 File path intellisense extension (VS Code)

Before configure the babel module resolver, I’m using an extension – Path Intellisense which can help me autocomplete the filename. It’s an useful extension that greatly improve my productivity.

Take away

  1. Using babel-plugin-module-resolver to resolve messy file path
  2. Configure jsconfig.json or tsconfig.json for intelliSense (autocomplete feature)
  3. Configure .flowconfig for flow-type to resolve module correctly

Thanks for reading and have a nice day. 😁

Feel free to let me know, if this article is useful.

Plugins in VS Code

Plugins in VS Code

The plugins that I use in VS Code:

  • Speed up development
  • Reduce run-time error (linting)
  • Auto-formatting

Editorconfig 😍

Using space or tabs ? Indentation should 2 instead of 4 ? LF, CR or CRLF ? standard charset ? 

Different developers have their prefer coding styles. Different editor will saving the file in slightly different format according to your platform (Windows, Mac or Linux)

Therefore, editorconfig is here to solve the problem. To maintain consistent coding styles for different file type across multiple platform or developers. 

Prettier

To format JSX code in React and React Native. Eslint to linting React and React Native. This is a popular plugin among web developer to format HTML code.

Flow-language-support 😍

Flow – a JavaScript type checker released by Facebook. Due to the nature of JavaScript – non-strict type language, it make developer life harder when coming to debug JavaScript. 

With the help of Flow , one can greatly reduce the time when debugging JavaScript. Depend on plugin implementation, Flow do help give warning for undefined, null or undeclared variables in JavaScript. 

One of the downside of Flow is very resources consuming (CPU / RAM). So, one might need to consider it only if you have enough resources to run it.

** Latest React Native is migrating from PropTypes to Flow.

React Native Tools

Code hinting for React Native and debugging React Native app integrate with the native debugging function come with VS Code – allow you to set breakpoint or other debugging action. 

Flutter and Dart Code

I don’t need to repeat the introduction here, I bet that all flutter developers know about these plugins, as it is included in Flutter documentation and very helpful to flutter development. 

Docker

To start, stop, debug, configure, syntax highlight, linting your dockerfile or docker-compose. 

Path Intellisense 😍

Module not found ? No such file or directory error ? No problem, this plugin come to rescue you.

No more hassle in looking for the path to specific file. This plugin provided suggestion/autocomplete to file and directory. Plugin author provide some configuration for this plugin too. Feel free to utilize it to maximize your productivity.

Regex Previewer

There is a lot of free tools/website provide help for regex. What if there is a plugin in your editor ? Now, you can validate your regex directly without exist editor. 

REST Client

A plugin for you to test your RESTful API. A great plugin to test RESTful API without leaving editor. 

Cobalt2-theme 😍

Last but not least, this is a theme plugin. I like the cobalt blue color when I  start using Ubuntu. Other than this, there is other theme plugins as well, such as Atom One Dark theme. 

Conclusion

There are tons of the plugins in VS Code marketplace. Feel free to utilize them to solve your problem. So, you can have a sweet dream instead of nightmare at night. 😜

Thanks for reading. Feel free sharing your recommended plugins to me.