Could we get @/ import alias?

[fredericrous]

Could we please get vue style import set @/ as an alias to src/ on top of the current alias system

Context

The way alias are today is it takes every folder under the src folder and aliases it directly.
For example, if I have a file helloWorldService.tsx under folder services. I could import it with import helloWorldService from 'services/helloWorldService'. Documentation is here https://create-react-app.dev/docs/importing-a-component/

The idea

Could we get alias prefixed with @/ ? so instead of importing services/someService I would import @/services/someService

• it seems the industry is going with the @/ for modules located in sources, most of the blog articles I find online suggest this notation
• with my module prefixed by "@/", I know it's located in the sources, I don't have to ask myself if, to continue with my example, services is the name of a package or a folder
• it is the system used by vuejs

[fredericrous]

reason for this demand is that I would badly want to use https://github.com/lydell/eslint-plugin-simple-import-sort and have my imports look nice and organized. In a glance I would be able to see if an import comes from a lib or from a folder

[mahdibx]

I use craco to add aliases in the webpack config.
Hope it helps

[fredericrous]

Thank you, it helps make my point. People in the industry are using stuff like cracro for nothing else than changing the alias standard from services/someService to @/services/someService. I think we shouldn't have to complexify the configuration of an app using CRA for the only purpose of having aliases prefixed with @/. I would like to see that feature in CRA, and I dream of a gradual introduction of @/services/someService and deprecation of services/someService

[KostiantynO]

Hi, @fredericrous, nice article about absolute imports!

To help fulfill you initial goal of 'differentiate' between lib and source, you may use the 'eslint-plugin-import', which help to sort imports - lib first, source later.

You may use this eslint config to sort imports:
.eslintrc
{ rules: { "sort-imports": [ "error", { "ignoreCase": true, "ignoreDeclarationSort": true } ], "import/order": [ "error", { "newlines-between": "always", "warnOnUnassignedImports": true, "groups": [ "builtin", "external", "internal", ["parent", "sibling", "index"], "type", "unknown" ], "alphabetize": { "order": "asc", "caseInsensitive": true } } ], } }

I use it, because I like path without @/ symbol, because it is easier for me to read simple folder name, without some symbols.

[fredericrous]

I think now with Vite being the norm, this thread is obsolete coz custom config got easier. Also I can confirm your tips. I’m using eslint-plugin-simple-import-sort which is based on eslint-plugin-import and it indeed sorts imports correctly. Regarding having a prefix before the folder name. It is easier for me to understand that I’m not looking at a npm dependency. It’s a clean code habit

…

On Sun 30 Jul 2023 at 16:24, Kostiantyn Ochenash ***@***.***> wrote: Hi, @fredericrous <https://github.com/fredericrous>, nice article about absolute imports! To help fulfill you initial goal of 'differentiate' between lib and source, you may use the 'eslint-plugin-import', which help to sort imports - lib first, source later. You may use this eslint config to sort imports: .eslintrc { rules: { "sort-imports": [ "error", { "ignoreCase": true, "ignoreDeclarationSort": true } ], "import/order": [ "error", { "newlines-between": "always", "warnOnUnassignedImports": true, "groups": [ "builtin", "external", "internal", ["parent", "sibling", "index"], "type", "unknown" ], "alphabetize": { "order": "asc", "caseInsensitive": true } } ], } } I use it, because I like path without @/ symbol, because it is easier for me to read simple folder name, without some symbols. — Reply to this email directly, view it on GitHub <#12666 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFLOE3XY4WY4SCBJO5KKETXSZVDFANCNFSM56SP6LVA> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>