Import Aliases in 4 minutes!

Подписаться 45 тыс.

Просмотров 9 тыс.

50% 1

In this video, we’ll look at an easy win for all devs in JS/TS projects-import aliases!
🔗 Key Links 🔗
- Astro Import Aliases: docs.astro.build/en/guides/al...
- Vite Import Aliases: www.divotion.com/blog/how-to-...
---------------------------------------
🔗 Additional Links 🔗
- Join early access for my Astro course! learnastro.dev
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispen...

Хобби

Опубликовано:

8 янв 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 33

@lukecartwright613 5 месяцев назад

Another super video! You can also add to your Vs code settings these lines: "typescript.updateImportsOnFileMove.enabled": "always" To get vs code to automatically update the file path. (Obviously replacing with JavaScript if your project isn't using ts)

@CodinginPublic 5 месяцев назад

Oh, cool! I know some of my extensions do that, but didn't know there was a VSCode setting. I'll add it! Thanks!

@sonny5497 3 месяца назад

thanks this was exactly what i was looking for in astro as i was using path aliase in nextjs

@CodinginPublic 3 месяца назад

Aliases are the best!

@TheAlphaGames 5 месяцев назад

The best way to also explain it is that import aliases changes your RELATIVE import declarations to ABSOLUTE imports so that way its always starting from the same point, which is why it works!

@chrishanthacosta4093 3 месяца назад

Good work, I love your way of teaching!

@CodinginPublic 3 месяца назад

Glad to hear that!

@jjaimealeman 5 месяцев назад

ooo, you gotta add this to your new Astro course 💥 🚀 😎 👍

@CodinginPublic 5 месяцев назад

Done ☺️

@leonardoroic8978 5 месяцев назад

Another useful video from Chris, no surprises here. :)

@CodinginPublic 5 месяцев назад

Thanks, my friend 🙏

@CodinginPublic 5 месяцев назад

And thanks to Dante for calling out my error in my previous video 🤦‍♂! I literally have like 20 projects right now on my computer using js imports and just had a brain fart last night when recording quickly since I've been using it in TS.

@patrickdavidreiner 2 месяца назад

Fantastic, thank you 🙏🏼

@CodinginPublic 2 месяца назад

Glad you enjoyed it!

@zorua7017 5 месяцев назад

You might want to look into using barrel files, that would simplify your import statements. Currently: import Heading from "@ui/Heading.astro": import Section from "@ui/Section.astro"; Using barrel files: import { Heading, Section } from "@ui/index"

@CodinginPublic 5 месяцев назад

Yes! Great addition!

@pietro_dev_07 5 месяцев назад

you can put only: import { Header, Section } from "@ui" you can omit index!

@buddy.abc123 5 месяцев назад

Thanks man

@CodinginPublic 5 месяцев назад

You’re welcome!

@aryomuhammad8254 4 месяца назад

good one!

@CodinginPublic 4 месяца назад

Thank you! Cheers!

@spacecoder0526 5 месяцев назад

Could you make astro tutorial about how to render multiple array images in mdx and astro file with react component like passing images array to the component to render or something?

@subhashgn1775 5 месяцев назад

I have tried, this doesnt work with create-react-app. The reason may typescript has removed this support. Can you please confirm on this.

@aogunnaike 5 месяцев назад

Wow 😂 finally seeing your face for the first time this year 😂 you look beautiful 😍😅

@CodinginPublic 5 месяцев назад

lol um thanks? 💁‍♂️ 💅

@szymon7932 5 месяцев назад

nice! What is the theme u are using?

@CodinginPublic 5 месяцев назад

I think community material theme?

@kelsey_roy 5 месяцев назад

What about unit tests?

@CodinginPublic 4 месяца назад

The aliases should still work? Are you having problems with them?

@kushalmondal618 5 месяцев назад

Next js supports it out-of-box feature.....And Nust js don't need to import anything....how crazy is that🌰🌰🌰BTW your Vscode file icon themes seem cool in Astro Stack......🎉

@CodinginPublic 5 месяцев назад

Yep, Next asks you if it can just set it up out of the box. I would love for the Astro CLI to do this personally (or enable it with a flag?)

@mohamedyamani8502 5 месяцев назад

Aliases are cool, but they don't solve the issue you're talking about of moving a file, they're just another way to represent the same path, no?

@CodinginPublic 5 месяцев назад

Because it’s always starting at the root path, it will be consistent. References to that file will need to be updated (which many IDEs will update automatically, but the big advantage is that when referencing other files, you don’t have to traverse and figure out what level everything us at. Components are always @components, for instance.