[HOLD for payment 2023-11-09] [$1000] Setup sorted import aliases

[roryabraham]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Coming from this slack thread, this issue is just a DX / code beautification thing, and thus should be treated an non-urgent / low priority.

Problem

When writing code for the new Expensify app, our goal is to provide developers with a positive coding experience, enhancing their joy and productivity.
The most commonly used development tool is Visual Studio Code (VSCode). However, VSCode often struggles to suggest imports for custom Expensify components. As a result, developers have to manually type the import path. Since the components they are working on are often nested in various folders, they have to guess the number of directories they need to go up to import the desired component ("Do I need to go up three directories like ../../../ or just two?"). This unnecessary cognitive load distracts developers from their actual tasks. Furthermore, the cluttered import paths are difficult to read and comprehend (see the first picture).

Solution

Take a look at the second picture and let your heart decide which version appears cleaner to you. The proposed solution is called import alias.
We can configure the bundlers to use "shortcuts" to directories when resolving imports. Additionally, we can instruct ESLint to prioritize the use of these shorter import aliases, ensuring automatic detection during development.
Next time you need to use an Expensify component, such as , you can simply import it swiftly using the following syntax:
import Avatar from "@components/Avatar"
(Future note: once we integrate typescript VSCode should be able to resolve all import paths, and thus it will suggest us to import the component from @components/Avatar )

Before	After

Furthermore, let's setup an (auto-fixable by Prettier) sort-imports lint rule, to make it look like this:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b1a5b3c310973924
• Upwork Job ID: 1697273497918955520
• Last Price Increase: 2023-09-01
• Automatic offers:
• situchan | Reviewer | 26446972
• b4s36t4 | Contributor | 26446976

[melvin-bot]

Triggered auto assignment to @stephanieelliott (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[roryabraham]

This is more of a developer-experience optimization, not really a new feature.

[hannojg]

👋