use module aliases vs relative paths

[DukeManh]

When the project grows deeper, more ../ are required in the relative import paths to import modules so this configs TS path aliases, that map to certain absolute paths.

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

Steps to test the PR

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[gitpod-io]

[RC-Lee]

Search tests will fail while I'm updating ES

[humphd]

Nice improvement

[Kevan-Y]

(nit): I personally prefer using like @/components/* instead of @components/*. So it doesn't get confused if we have a external package like @components

[cindyledev]

I agree with @Kevan-Y here. I also use the @/components/* for module aliases

[DukeManh]

We'd need to fix #3690 first to pass eslint.

[humphd]

@DukeManh do you want this in before tonight (end of Hacktoberfest)? If so, what does it need?

[DukeManh]

@humphd, I needed to add 'plugin:@typescript-eslint/recommended' for eslint to pass but then found out there is more work to do in #3690 if I make that change.

[ghost]

This looks good!

The only nit-picky thing that might be considered, that some projects prefer the scoped package inports to be between the "traditional" library imports and the relative imports for readability reasons.