My favourite VSCode extension has 3k downloads

[@mattpocockuk]

Lol up to 26k downloads now. Will need to change this title at some point.

[@Drunkenvalley]

Can just rename it to "had" lol.

[@rafageist]

57.4K now!

[@hyperprotagonist]

Matt, you can’t just say “I want to pull it out and have it visible”, “make sure you’re pulling out”, and “look at a small piece” in one sentence 😂

[@mattpocockuk]

Best first comment ever

[@igorskyflyer]

🙈🙈🙈🙈

[@hugodsa89]

Duuuuuuude, this changes my day to day. No exaggeration.

[@dk5146]

This extension is also a great example for beginners to get started with creating a vscode extension!

[@rinzler_d_vicky]

I was googling this today, trying to find the extension you were using, Thank you!

[@adhamsalama4336]

I find inlay hints even better

[@Joxel]

Got this random recommendation; Totally worth it. Thanks for the great tip!

[@faizanahmed9304]

Thanks! amazing extension so as your videos are!

[@JaquaSchao]

I'm member number 50,490 on 31/05/24 use this extension. Good content, good video. Thanks

[@noahkrause6607]

You are an absolute treasure, Matt. Thanks!

[@YOUdudex]

Thank for the video, Matt Pocock is so cool 🤩

[@simpingsyndrome]

terimakasih banyak matt!

[@Zzznmop]

I love videos like this because I learn why everyone with vscode commits random comments everywhere

[@helleye311]

Thank you! I was literally searching for this today!

[@steveneeson5698]

Finally, the mystery is revealed! Thank you, Matt, for sharing all those tips. Don't stop

[@zilahi8]

odd. i was just looking for something the other day, didn't really find anything useful, then saw this video on my recommended list. :) thanks a lot!

[@ThangPhan-t2o]

Thank you so much for sharing with us :)

[@pupfriend]

Heck yeah. Giving this a go today.

[@thetarnav]

Worth mentioning that this requires "Inlay Hints" setting to be enabled in vscode...

[@mattpocockuk]

True!

[@parkame1]

pin worthy comment

[@mattpocockuk]

@@parkame1 It's in the docs of the extension itself so I'm not too worried!

[@ElliotDeNolf]

I'd say inlay hints are worth enabling anyway

[@claireworld_]

About to install it!!!

[@thohangst]

See, kids, the caret points to the thing you want to know type info about! You gotta add spaces to get under the thing! Pretty neat-o.

[@eulucascampelo]

Thank you Matt. This helps alot.

[@yorailevi6747]

Title is so accurate

[@davbrito]

This can be achieved through inlay hints also

[@GordonChil]

Jetbrains needs to add this feature to Webstorm.

[@Duasdamanhaonline]

2 minutes of pure gold

[@adam29334]

Nice room Matt

thank Matt :D

[@Motivize_]

That's just great. Thanks!

[@wayslow]

Anything like that for jetbrains ecosystem (webstorm)?

[@mokhtariabdelmadjid2977]

i do use console ninja for debugging but it's lack this type feature

[@sziluchannel]

Ok that is cool and all but I use Rust and its extension prints out the types everywhere by default. Really helpful.

[@loading_wait]

You know you can enable in-line type annotations for ts? If you've dabbled in rust it looks exactly like rust analyzer

[@u1f98a]

I've always just used the hover tooltip to figure this out

[@brhh]

volar extension has the same thing without comments, rather smart solution that works on functions etc

[@joostschuur]

Actual high pitched sound I made at 0:26: Whaat???

[@snatvb]

what the differenct between info in tooltip and this extention?

[@NatoBoram]

None, it's just so you can see it visually while debugging

[@Randych]

*laughs in rust-analyzer*

[@reze_dev]

The extension has 5k downloads now

[@nikensss]

let's check the extension marketplace in a few days to see how many times it's been downloaded after your video

[@5omebody]

currently at 5887 (5 days later)

[@hszt4414]

Is there similar tool for nvim?

[@sachasmart7139]

How does everyone manage prettier formatting with this extension?

[@tezza48]

This plugin really needs a better name! Just spent 15 minutes trying to find the name of it again to install on my personal PC!

[@dopetag]

Hi, Matt! Offtopic question: Which extension do you use in your Total Typescript Beginner's TypeScript course in part 14 to suggest the types in the object having object type with certain properties? The behaviour can be seen in the solution video at 1:00 Thanks in advance for your help. I just can not figure out, if it's the native functionality of VSCode or some kind of extension.

[@KANESAMP]

Do you mean hovering over and seeing the type? That's regular VSCode behavior afaik

[@Saturate0806]

So just inline hints that ships with code by default? Just enable them and dont bloat up the IDE

[@vahidss]

So instead of just hovering, you make a new line, start a comment, tab to where you want it to be and insert ^?

[@mattpocockuk]

Yep, useful for when you want to show it changing in real time, or highlight exactly which type you want the user to focus on.

[@Mitsunee_]

can't find it on the marketplace used in vscodium

[@Luxcium]

I was expecting that *'Orta'* to pop out and the n he said the name of the extension...

[@andreyokhrimenko2271]

Thanks for nice extension, but what about typescript error extension that you use? Is it Pretty Typescript Errors || Total TypeScript?

[@suprelink]

If you know of a Vim equivalent I would love to know!

[@LambdaCreates]

Now it's 5k downloads.

[@Blacksoul444]

wait, the only advantage it has over hovering over it, is for teaching purposes?

[@ogreeni]

Neat, though on mac if you press space twice it automatically enters a period, which could be annoying when using this extension (I saw you struggling with this throughout the video too :) )

[@mattpocockuk]

True in TS Playground, not in VSCode

[@ogreeni]

@@mattpocockuk Right, my bad. Take that back.

[@stow1x]

Wallaby can't do that?

[@oliverclive-griffin3454]

Easier to just use cmd k cmd i to simulate a hover (on Mac)

[@nizamchaudhary4460]

well inlay hints in zed and webstorm are more better

[@karis7539]

it doesn't work even with inlay hints turned on

[@mattpocockuk]

Raise an issue!

[@dlamotte21]

5k now

[@mattpocockuk]

To the mooooon

[@nathanfranck5822]

That would have been handy for me, developing complex types is otherwise a lot of mousing over things

[@duality4y]

the fact you need a plugin with weird syntax to know what a functiob returns ...

[@AlexanderBorodavka]

doesn't work for me

[@mattpocockuk]

What a detailed bug report

[@larrycoleman8149]

Webstorm can show all inferred types inline

[@NatoBoram]

Pretty distracting and it fucks up the line length. It's there for a reason. This extension avoids these problems by only showing up when you want it to and by not being disturbing.

[@piaIy]

​@@NatoBoram Inlay hints in VS Code have an option to show/hide them when holding a key combination.

[@vpetryniak]

What's the point of it? There are already built in inlay hints which are much more useful and no need for additional extension

[@NatoBoram]

Inlay hints fuck up the line length

[@MichiganTypeScript]

fun fact: I forked this plugin and modified it so that I could use it to take create all the typing animations at the beginning of the TypeScript type challenges. e.g. kzbin.info/www/bejne/oWXEmK2PpduVasU

[@sageknives]

Is this forked plugin available somewhere?

[@MichiganTypeScript]

@@sageknives unfortunately, no. I'm not even sure _I have it_ anymore. The challenges are over in two days but there have been more since the project started so I'll have to probably just do it over again if I do more challenges. It was just a quick and super hacky thing I threw together.

[@pranjalshukla8096]

no offense senpai you need sponsership from Keeps

[@naxey]

I feel like this is the same as //? in quokka, which has 2.1M downloads

[@ShaAniMi1]

laughs in statically typed language

[@youarethecssformyhtml]

Dude doesn't even know something called type inference and says that proudly

[@GallowsofGhent]

My brother in TypeScript, why not use inlay hints and never have to type these comments again?

[@5omebody]

inlay hints get very, very, _very_ long. especially when you have computed types

[@whoopsimsorry2546]

heard of typescript?

[@MynecraftCZ]

or you can just use strongly-typed language...

[@JanBebendorf]

Or you just use an actual IDE like WebStorm and have type hints built-in as the most essential features. Having to write a console.log and this crappy comment is probably the worst implementation anyone can think of and that's why it has almost no downloads... The VSCode extension system probably allows you to add popover hints on hover aswell which would be a much better option.

[@5omebody]

nope, vscode comes prepackaged with typescript, _and_ type inlay hints builtin (just disabled), for both javascript and typescript

[@JanBebendorf]

@@5omebody well then this plugin is stupid in the first place lol

[@5omebody]

@@JanBebendorf it's really not, it's designed to mirror existing twoslash in the playground and in documentation generators (both for demonstration purposes). it's not all that useful, sure, but it's not meant to be. it's just meant to be there for whatever audience there is that wants it. who knows, maybe they write their MCVEs in vscode as part of testing, or dogfooding, or whatever

[@darksidedani]

Or - just use an IDE

[@5omebody]

yeah, an IDE like... ... vscode

[@darksidedani]

@@5omebody vscode is not an IDE.... It's a Text Editor IntelliJ IDEA is an IDE

[@5omebody]

@@darksidedani but what exactly is vscode missing?

[@darksidedani]

@@5omebody Refactoring, speed, data-base integration, proper version control etc. Google might give you more info on the difference between VSCode and JetBrain's IDE's

[@5omebody]

​@@darksidedani tl;dr: you have not mentioned a single difference. apart from maybe builtin db support, but i'm not aware of jetbrains IDEs having db support built in - and even if they do, i highly doubt the majority of users actually _use_ said db support. - refactoring: built into vscode - speed: vscode is way more lightweight than both VS and jetbrains IDEs - version control: vscode has that built in too... who'da thunk - database integration: not supported out of the box of course. i can see why, you either support a few, making a few users happy but leaving the rest unaffected... or just let the databases themselves write their own extensions

[@WalterWoshid]

I wish JetBrains Webstorm had this :(

[@hoots187]

Ehy bro its wayyy too early/late to be posting these kinds of videos my guy btw two slash also has support for documentation frameworks like docusaurus so you can have it working in code examples, etc

[@mattpocockuk]

Yeah shiki-twoslash is extremely cool

[@rogmz3512]

Don't really see a need for this

[@ikechukwucharles2314]

The f**k????? Just wow.

[@Luke1000]

Higher hair please.

[@Diego-Garcia]

--- VSCode also lets you enable inlay hints... "javascript.inlayHints.parameterNames.enabled": "literals", "javascript.inlayHints.functionLikeReturnTypes.enabled": true, "javascript.inlayHints.parameterTypes.enabled": true, "typescript.inlayHints.parameterNames.enabled": "literals", "typescript.inlayHints.functionLikeReturnTypes.enabled": true, "typescript.inlayHints.parameterTypes.enabled": true, --- For Python (only with Pylance plugin): "python.analysis.inlayHints.variableTypes": true, "python.analysis.inlayHints.functionReturnTypes": true, --- And, for you that want type checking in JS files: "js/ts.implicitProjectConfig.checkJs": true, --- And for Python files (only with Pylance plugin): "python.analysis.typeCheckingMode": "basic",

[@simpingsyndrome]

terimakasih banyak matt!