# Best VS Code Extensions for Ruby on Rails Developers for 2025 #226 - URL: https://superails.com/posts/best-vs-code-extensions-for-ruby-on-rails-developers-for-2025-226 - Published: 2025-01-27 - Duration: 06:02 - Access: free Copy my VS Code settings here: https://blog.corsego.com/vscode-cursor-extensions-rails The extensions I use in every app: "esbenp.prettier-vscode", - lint CSS and JS "bradlc.vscode-tailwindcss", - Tailwind CSS lookup "heybourn.headwind", - order Tailwind styles "eamodio.gitlens", - Git change lookup "Shopify.ruby-lsp", - Ruby parser "elia.erb-formatter", - erb identation "marcoroth.stimulus-lsp", stimulus autocomplete and "rubocop.vscode-rubocop", - ruby linter In settings.json I define the rules for each of the extensions. ## Transcript Over the last year, ribbon Rails has done a lot to improve the developer experience outta the box. Now, whenever you create a new Ribbon Rails application, you've got a GitHub CI that works, uh, straight away. You have, uh, uh, a doca file. You've got, uh, UpToDate, gi No, you even have, uh, a robocop that is installed, uh, with some developed configuration in any Euro rail application. But I think something that is still missing from new rail applications is, uh, a list of recommended extensions for this code for ser for similar, uh, IDs. So, uh, you can add this, uh, separate folder vs code into your application, and it'll give a list of recommended plugins. And here I have the recommended plugins for my application. So whenever somebody new opens my application, it's going to prompt them to add these plugins to work in their, uh, development environment. And there's also a separate file settings J where you can define different settings for each of these plugins. Let's go through all the plugins. First of all, I have pretty V code. It helps me style the CSS and GS files. For example, I'm going to go to mention controller. I'm going to save this file. I just clicked on the, uh, command S and you see it formatted the file. And this way, uh, I format all the files and, uh, they are going to all form to the same, uh, style. And again, if you don't like, uh, for example, you want to have, uh, uh, two, uh, instead of one, uh, brace, you can, uh, set this in the, uh, settings, Jason for, uh, pre V code. Then there is this code, VIN CSS. For example, I'm going to open a static file, static index. Um, and whenever I type something in vin, for example, I want to add pattern of 12 pixels, I type P, and uh, I see that pattern of 12 pixels is P three. Okay, so it kind of prompts me what the CSS is behind the, the relevant abstractions, like background roles 400. I see all the details of this class. So this is the, the SCO VIN CSS. Then there is the plugin, uh, named headwind, and it gives an opinionated ordering of the VIN clause. So whenever I'm going to save this file, it's going to reorder the VIN classes in, uh, an opinionated way. But I think it's good to have, uh, one defined order of VIN classes all round than just having them scattered the, uh, the rev in your, uh, class definition. Uh, next there is GI lens. This one is really nice. Uh, uh, so you see whenever I hover on the line of code, I see then it was edited last time, and I can jump to this commit. I go to this other comet, I see when it was edited. So, uh, it makes, uh, finding what was changed and then by whom, uh, much easier. Then there's rub p the, uh, tool to work with Ruby. There's, uh, yeah, formatter. This one actually requires an, uh, gem, the gem EB formatter to be installed and, uh, how it works. So this is an EIB file. I'm going to change the formatting. I'm going to save the file and you see everything is, uh, formatted nicely. So know where, where space end. Uh, then, uh, if you're using the V code, then you can also recommend GitHub compiled and GitHub compile chat. But for other code, it is, I would not recommend them. Uh, like for Al it doesn't make sense. Uh, then there is stimulus SB one mark growth that, uh, helps you with the right and stimulus controllers. For example, I'm going to try to define, uh, data controller, uh, A, B, C. And, uh, in theory, it should tell me that this is not a valid, uh, controller. Now, uh, stimulus, oh yeah, I don't have this one installed, uh, uh, yet. So let me install stimulus. SP. Okay. And you see now it gives me an error. Uh, a B, C is not valid. Stimulus controller. Uh, then there's, uh, Robocop, uh, via code robocop. And, uh, let me go to like user B. I'm going to, uh, define something like full equals ball. And I, uh, see the errors that style string, literal rolls, prefer double quoted. I'm going to save, and you see it was formatted out of the box. Then I'm going to add like some, uh, trail and white spaces here. I see that there is a problem, but I click save and you see it is, uh, saved and formatted, so I don't have to, uh, run separate. Everything is, uh, formatted on save. Now to enable format on save, I, uh, go to VS code settings. You click format on save here, and, uh, again, in settings, do js. I, uh, save format on save through for each of these, uh, formats. Also, sometimes you would want to save something without Formin. For example, like, I'm going to format this, but I don't want the Formin to be in my diff I'm going to click Ctrl Z to not have, uh, all this formin. And I'm going to, uh, open the, uh, kind of terminal and I will save without Formin. So the file is saved, but, uh, no Formin was, uh, applied. This is also sometimes handy when you want to, uh, commit just one change without, uh, having the diff of all the, uh, sty.