Introduction & VS Code Icons
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 vscode-icons. You just enable this, it gives you a whole bunch 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.
GitHub Copilot: AI Autocomplete and Its Risks
The next one you've probably seen before, which is like the autocomplete that you occasionally see where I'll be going through here and you might see like a whole bunch of autocomplete just happening 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. It is from GitHub, so it's consequently owned by Microsoft. 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, TikToks and and like YouTube shorts, where I just copy and paste LeetCode 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 have some questionable history to it. 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 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 an 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, 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. So you probably don't want to be on the receiving end of that. So I'd be very careful using it for that.
GitHub Copilot Context-Aware Suggestions in Rails
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 gonna come out here, I'm gonna undo this real quick, hit save. So you come into your controller and now you're like, okay, I added the has_one_attached :image. I now need to add it to my post params. 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 takes into account the entirety of your project, which can be very useful 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, alright, 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, add 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, you know, it's one that I get asked about a lot.
Exploring GitHub Copilot Labs
The next one I don't really get asked about the specific functionality it provides, but I keep getting asked about the icon down here. And this is the GitHub Copilot Labs extension. So that should be somewhere in here. 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 ChatGPT 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?" or you know, something like that. So if I highlight the create action here, I'll highlight this, I'll click 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 the method is, for example.
Next one is the language translation. You can grab this snippet right here, ask it to translate this into some other language. Maybe we can go to, let's just go with Python. We'll click ask Copilot. It'll hopefully translate this to something that looks similar in Python. And sometimes it's it's not right. Sometimes it works, sometimes it's a swing and a 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, alright, can you, I don't know, add this or chunk this or whatever, make this into a separate method. 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 destroy are private. We have another private down here. It's not great. So I would definitely tread lightly using the 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.
Tabnine: A Free AI Coding Assistant
The next one is Tabnine. 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 and Copilot running at the same time and I just sort of see what happens sometimes. Although, you know, it really depends on on the mood that I'm in.
Achieving Proper Ruby Syntax Highlighting
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. 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, you know, 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 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 the reason for that is—so I guess not how it normally is, how it normally is for me—is you need 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 / Beautify. 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, 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, and this one requires you to locally install the gem for the HTML beautifier. So this is something where you're gonna have to like actually come in here with Ctrl+Shift+tilde and then do a gem install and then install your HTML beautifier to make sure that this works. 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.
