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 :) )
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.
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. ua-cam.com/video/k4agzYpvb4c/v-deo.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.
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
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
@@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
🙈🙈🙈🙈
Duuuuuuude, this changes my day to day. No exaggeration.
This extension is also a great example for beginners to get started with creating a vscode extension!
I find inlay hints even better
I was googling this today, trying to find the extension you were using, Thank you!
You are an absolute treasure, Matt. Thanks!
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 love videos like this because I learn why everyone with vscode commits random comments everywhere
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!
Got this random recommendation; Totally worth it. Thanks for the great tip!
Thanks! amazing extension so as your videos are!
Finally, the mystery is revealed!
Thank you, Matt, for sharing all those tips.
Don't stop
terimakasih banyak matt!
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!
Actual high pitched sound I made at 0:26: Whaat???
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
Thank you Matt. This helps alot.
Jetbrains needs to add this feature to Webstorm.
Heck yeah. Giving this a go today.
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)
Thank you so much for sharing with us :)
The extension has 5k downloads now
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.
Anything like that for jetbrains ecosystem (webstorm)?
Ok that is cool and all but I use Rust and its extension prints out the types everywhere by default. Really helpful.
Title is so accurate
2 minutes of pure gold
I've always just used the hover tooltip to figure this out
About to install it!!!
You know you can enable in-line type annotations for ts? If you've dabbled in rust it looks exactly like rust analyzer
i do use console ninja for debugging but it's lack this type feature
Nice room Matt
volar extension has the same thing without comments, rather smart solution that works on functions etc
That's just great. Thanks!
thank Matt :D
Thanks for nice extension, but what about typescript error extension that you use?
Is it Pretty Typescript Errors || Total TypeScript?
So just inline hints that ships with code by default? Just enable them and dont bloat up the IDE
How does everyone manage prettier formatting with this extension?
what the differenct between info in tooltip and this extention?
None, it's just so you can see it visually while debugging
Now it's 5k downloads.
can't find it on the marketplace used in vscodium
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!
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.
I was expecting that *'Orta'* to pop out and the n he said the name of the 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.
If you know of a Vim equivalent I would love to know!
Is there similar tool for nvim?
wait, the only advantage it has over hovering over it, is for teaching purposes?
*laughs in rust-analyzer*
well inlay hints in zed and webstorm are more better
the fact you need a plugin with weird syntax to know what a functiob returns ...
Easier to just use cmd k cmd i to simulate a hover (on Mac)
Wallaby can't do that?
it doesn't work even with inlay hints turned on
Raise an issue!
That would have been handy for me, developing complex types is otherwise a lot of mousing over things
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.
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
doesn't work for me
What a detailed bug report
no offense senpai
you need sponsership from Keeps
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
5k now
To the mooooon
laughs in statically typed language
Dude doesn't even know something called type inference and says that proudly
heard of typescript?
I feel like this is the same as //? in quokka, which has 2.1M downloads
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. ua-cam.com/video/k4agzYpvb4c/v-deo.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.
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
or you can just use strongly-typed language...
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 - 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
I wish JetBrains Webstorm had this :(
Higher hair please.
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!