Introduction
I keep getting asked about the VS Code Extensions that I use for Ruby on Rails, so I thought I'd compile a small list to use as a link to respond with lol.
Checkout my course(s) at: learn.deanin.com
Extensions
1. VS Code Icons
2. GitHub CoPilot & GitHub CoPilot Labs
3. TabNine AI Autocomplete
4. Ruby & VS Code Ruby (Syntax Highlighting)
5. Erb Formatter, Prettier
Join this channel to help support these videos:
www.youtube.com/channel/UCRQv-3VvPT9mArF5RfrlpKQ/join
Follow me on social media:
linktr.ee/deanin
If you liked this video, please consider subscribing: t.co/RZ4EwP0F2a
#Deanin #Software #Programming
Video
Hello, everyone today, I thought we'd take a look at some of the extensions that I use in some of these rails tutorials.
This will also be applicable if you watch some of the other videos that I do where I have this autocomplete.
That seems to follow me through my projects, but there's other stuff that I do want to take a look at so to actually take a look at it.
I just have a basic rails.
App here created from scratch.
I ran a rails, G scaffold for some posts, that's pretty much it so a couple extensions I want to take a look at first one being I get a lot of questions recently.
I never really got questions about this, but these folder icons and the file icons.
That indicates what each type of file is that one is actually just the vs code.
Icons I forget what it's specifically called there.
It is the vs code dash icons.
You just enable this.
It gives you a whole bunch of uh of icons that apply to your entire project directory works.
For you know a bunch of different languages and stuff.
You can see all the support here, so that's the first one.
That's pretty easy to get out of the way the next one you've probably seen before, which is like a uh, the autocomplete that you occasionally see where I'll be going through here and uh.
You might see like a whole bunch of autocomplete just happening in in blocks of code.
That's usually coming from a combination, but the main one that does a lot of the heavy lifting is GitHub copilot, you've probably heard of it before it's a 10 a month, extension uh.
It is from GitHub, so it's consequently owned by Microsoft uh.
But it's incredibly powerful I mean there's so much stuff.
You can do with copilot I've done like the unemployment speed runs before on.
You know: tick, tocks and and like YouTube shorts uh, where I just copy and paste Elite code questions into it and I mean it has like a 95 percent pass rate most of the time.
So it's incredibly good at what it does.
The only thing is it does it have some questionable history to it, uh.
First of all, we're not entirely sure if it was actually only trained on on public GitHub repositories, you know, could have been trained on private ones too.
Microsoft does own the whole.
The whole thing, the other part of it is the licensing issues.
So I personally wouldn't use this for any professional work where your autocomplete is is large enough to be identifiable as a unique piece of code.
Just because it's been known to grab copyrighted Snippets of code like this right here, maybe I copyright.
This and I say no.
One else can use this and then it'll like paste it in or generate it, and then it'll put a open source license on top of it, because it knows that the pattern that it's looking for is something with an open source license.
So why not just put an open source license in front of any code you generate because then all of it looks how you would expect it to if it was safe to share.
So that's uh, you know, probably not great I, don't think it does that as much anymore or at all, but it is something to be cognizant of because it only takes one oopsie before you get a lawsuit uh.
So you probably don't want to be on the receiving end of that.
So I'd be very careful using it.
For that that said, it is really nice because, let's say you, add your active storage stuff to a post model, you're trying to add active storage to your your directory.
And then you come into like your controller here, I'm just going to come out here: I'm gonna, I'm, gonna undo this real quick hit save so you come into your controller and now you're like okay, I added the the has one attached image.
I now need to add it to my post, param, so I come in here, I hit a comma I, do a body and then I hit a comma, and you can already see it suggesting that image be added, so it it takes into account the entirety of your project, which can be very useful if you um, if you're in, like a larger code base with a whole bunch of stuff going on it'll, be able to piece together, sort of the entirety of the project and say all right: you're, probably going to be doing stuff with the posts from the post controller and the post model, so you're, probably trying to add like active storage or something, and then you can come over to you know some other area at a div.
We'll do this add a div and then in here you can do something like your form labels, but instead of this we'll do for the images and then we'll change this to a file field.
It's not it's not going to be perfect in like an empty project, but over time, as the project gets more and more involved.
It'll have more and more of your patterns that it can match to and then it'll sort of figure out what you're trying to do and a lot of times you'll see that in videos where it seems like I'm, almost doing no typing after the first five or six minutes and I'm just hitting tab, because a lot of it's just being completed for me.
So, let's just uh, you know it's one that I get asked about a lot.
The next one, I, don't really get asked about.
The specific functionality provides, but I keep getting asked about the icon down here, and this is the GitHub copilot Labs extension, so that should be uh somewhere in here.
Uh I think it's this one.
So the GitHub copilot Labs was a companion for GitHub copilot.
This one allows you to do a bunch of stuff.
That's sort of sprung about right as chat GPT was happening.
So if we come down here, I'll just go through I'm, not gonna, like you know, go through it very heavily, but I'll just show you sort of what the functionality is.
You can highlight a piece of code and then you can ask it a question: what does it do and can you explain it uh or you know something like that.
So if I highlight the create action here, I'll highlight this: I'll click uh explain this code, it'll take a minute, it'll generate something, and usually you can read the first bit and then it starts getting caught in like a loop, but here it seems to have just stopped appropriately.
So you know it tries to explain sort of what different pieces do and what The Logical flow of of the the method is, for example.
Next one is the language translation you can grab this.
The snippet right here ask it to translate this into some other language.
Maybe we can go to let's just oh, let's just go with python, we'll click ask ask: copilot it'll, hopefully translate this to something that looks similar in in Python and sometimes it's it's not right.
Sometimes we're works.
Sometimes it's a swing and miss.
So you do need to be very careful, don't just copy and paste this in, because there's a good chance.
It won't compile or work, but sometimes it does get there.
I think this is still.
You know again largely a work in progress of an extension and then down here.
You got some brushes where you can just highlight a piece of code, and you can say all right.
Can you I, don't know? Add this or chunk this or whatever make this into a separate method.
Uh.
The issue with this is it doesn't have the full context of the project when you do it so like here it puts the private right after the create, which means now the update and Destroyer private.
We have another private down here.
It's not it's, not great, so I would definitely tread lightly using the uh, the lens extension, because it's not often capable of doing sort of what you needed to yet it might get better in the future.
Of course, the next one is tab.
Nine.
This is another AI autocomplete.
This one is a free version.
It does have a paid version.
I just use the free.
You can see sort of down here how it works.
You just type a comment.
Sometimes it predicts what you need and I just kind of have this one in copilot running at the same time and I just sort of see what happens sometimes uh, although you know it really depends on on the mood that I'm in um, so the next one is Ruby syntax.
Now this one's a little weird I've had people ask about this in the past.
I actually have this disabled right now, uh, but you're not really going to see a difference.
So the first thing to note is anytime: you use a ruby or rails extension they're, all like pretty outdated, so just be aware of that.
You might have to try a few to find one that works, but if we enable this, nothing really changes and if we disable it it'll ask us to reload now the reason why I have this one installed, specifically if I come over to the extensions again and I come into the Ruby one is because the Ruby extension is actually used by another one.
So this one's supposed to give you like uh, you know some some support for some Ruby stuff, but the main thing that it does, if I clear out of here and scroll down to the bottom, it gives us access to the vs code, Ruby extension and now, if I disable this one, you should be able to see this right away.
You'll see that my syntax highlighting starts becoming significantly worse.
So this is the one one of the ones that I use to highlight stuff like the underscored variable names.
It also has stuff for, like a has one attached or the attr accessors, and readers and stuff like that, it really depends on on what um, on what you're doing in your in your project, you'll start to notice over time that some of the stuff isn't exactly highlighted how it normally is and that the reason for that is so I guess not how it normally is how it normally is for me, is you need the the vs code, Ruby extension, if you install this right away, you'll see that all of your syntax highlighting kicks in and now you have your keywords.
Hopefully highlighted correctly okay, so that is the syntax highlighter.
The last one I get asked about.
Is the I think the Erb formatter come in here? It should be I, think.
Is it this one yeah Erb formatter slash beautify uh.
This is the one that does the formatting for me.
So if I come in here and I, you know do an another div.
It's got like tabs over uh.
It's you know, got spaces everywhere, something like this and then I.
Just you know, hit the space hit, control s and save it, and everything gets formatted.
Neatly that's coming from a combination of things.
The first one is the Erb formatter uh, and this one requires you to locally install the gem for the HTML beautifier.
So this is something we're gonna have to like actually come in here, uh with Ctrl shift tilde and then do a gem install and then install your HTML beautifier to make sure that this works uh.
You know, otherwise, you you might not get the functionality that you're.
Looking for with all these extensions I would read through the details just to make sure they work.
Otherwise they might not work how you expect them to yeah those are sort of the five that I get asked about the most just because, of course, as you can see, they're going to be things that are like pretty visually obvious as you're doing these videos, so I thought I'd just make one video so from now on.
I can just point to this one so yeah.
Hopefully you found this interesting I hope you found this helpful and hopefully I will see you in the next video.
