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.
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 :) )
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. th-cam.com/video/k4agzYpvb4c/w-d-xo.html
@@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.
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.
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
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.
@@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
@@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
@@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
--- 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",
Lol up to 26k downloads now. Will need to change this title at some point.
Can just rename it to "had" lol.
57.4K now!
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 😂
Best first comment ever
🙈🙈🙈🙈
This extension is also a great example for beginners to get started with creating a vscode extension!
Duuuuuuude, this changes my day to day. No exaggeration.
I find inlay hints even better
terimakasih banyak matt!
Worth mentioning that this requires "Inlay Hints" setting to be enabled in vscode...
True!
pin worthy comment
@@parkame1 It's in the docs of the extension itself so I'm not too worried!
I'd say inlay hints are worth enabling anyway
I was googling this today, trying to find the extension you were using, Thank you!
Got this random recommendation; Totally worth it. Thanks for the great tip!
You are an absolute treasure, Matt. Thanks!
I love videos like this because I learn why everyone with vscode commits random comments everywhere
Thanks! amazing extension so as your videos are!
I'm member number 50,490 on 31/05/24 use this extension. Good content, good video. Thanks
Thank you! I was literally searching for this today!
Thank for the video, Matt Pocock is so cool 🤩
This can be achieved through inlay hints also
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!
Jetbrains needs to add this feature to Webstorm.
let's check the extension marketplace in a few days to see how many times it's been downloaded after your video
currently at 5887 (5 days later)
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.
Ok that is cool and all but I use Rust and its extension prints out the types everywhere by default. Really helpful.
Heck yeah. Giving this a go today.
Thank you so much for sharing with us :)
volar extension has the same thing without comments, rather smart solution that works on functions etc
You know you can enable in-line type annotations for ts? If you've dabbled in rust it looks exactly like rust analyzer
Thank you Matt. This helps alot.
2 minutes of pure gold
Finally, the mystery is revealed!
Thank you, Matt, for sharing all those tips.
Don't stop
About to install it!!!
Anything like that for jetbrains ecosystem (webstorm)?
Title is so accurate
I've always just used the hover tooltip to figure this out
Nice room Matt
Actual high pitched sound I made at 0:26: Whaat???
That's just great. Thanks!
thank Matt :D
The extension has 5k downloads now
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.
Do you mean hovering over and seeing the type? That's regular VSCode behavior afaik
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!
i do use console ninja for debugging but it's lack this type feature
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 :) )
True in TS Playground, not in VSCode
@@mattpocockuk Right, my bad. Take that back.
Thanks for nice extension, but what about typescript error extension that you use?
Is it Pretty Typescript Errors || Total TypeScript?
*laughs in rust-analyzer*
So just inline hints that ships with code by default? Just enable them and dont bloat up the IDE
That would have been handy for me, developing complex types is otherwise a lot of mousing over things
can't find it on the marketplace used in vscodium
I was expecting that *'Orta'* to pop out and the n he said the name of the extension...
the fact you need a plugin with weird syntax to know what a functiob returns ...
what the differenct between info in tooltip and this extention?
None, it's just so you can see it visually while debugging
How does everyone manage prettier formatting with this extension?
So instead of just hovering, you make a new line, start a comment, tab to where you want it to be and insert ^?
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.
wait, the only advantage it has over hovering over it, is for teaching purposes?
Now it's 5k downloads.
If you know of a Vim equivalent I would love to know!
Is there similar tool for nvim?
Easier to just use cmd k cmd i to simulate a hover (on Mac)
no offense senpai
you need sponsership from Keeps
5k now
To the mooooon
Wallaby can't do that?
it doesn't work even with inlay hints turned on
Raise an issue!
heard of typescript?
laughs in statically typed language
Dude doesn't even know something called type inference and says that proudly
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. th-cam.com/video/k4agzYpvb4c/w-d-xo.html
Is this forked plugin available somewhere?
@@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.
I feel like this is the same as //? in quokka, which has 2.1M downloads
My brother in TypeScript, why not use inlay hints and never have to type these comments again?
inlay hints get very, very, _very_ long. especially when you have computed types
Webstorm can show all inferred types inline
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.
@@NatoBoram Inlay hints in VS Code have an option to show/hide them when holding a key combination.
doesn't work for me
What a detailed bug report
or you can just use strongly-typed language...
What's the point of it? There are already built in inlay hints which are much more useful and no need for additional extension
Inlay hints fuck up the line length
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
Yeah shiki-twoslash is extremely cool
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.
nope, vscode comes prepackaged with typescript, _and_ type inlay hints builtin (just disabled), for both javascript and typescript
@@5omebody well then this plugin is stupid in the first place lol
@@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
Higher hair please.
I wish JetBrains Webstorm had this :(
Or - just use an IDE
yeah, an IDE like...
... vscode
@@5omebody vscode is not an IDE....
It's a Text Editor
IntelliJ IDEA is an IDE
@@darksidedani but what exactly is vscode missing?
@@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
@@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
Don't really see a need for this
The f**k????? Just wow.
--- 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",
terimakasih banyak matt!