Ruby on Rails with Visual Studio Code
A follow up version of this post in now available on my blog Read and Write: Rails. The original version is kept below for archival.
Here’s my set up for optimising Visual Studio Code for Ruby on Rails development. I’ve been using it for just over a week and I have to say, I’m really enjoying it!
After two or so years with Atom as my daily driver, it’s time to say goodbye. It’s not you, Atom, it’s me. I’ve changed. With that said, let’s stay friends, you enabled me to create many amazing projects and for that, I am grateful.
I originally looked at Visual Studio Code back in the early days, perhaps when I deciding to use Atom full-time. Atom won at the time. But Visual Studio Code has come a long way since then and after a recent discussion with a friend, I made the switch. I work mainly with Ruby on Rails, Sass, the typical front-end stack and ERB for Rails views.
Here’s my current setup.
Theme
Before we get started, I use ‘Solarized Dark’. This is built in.
On a Mac, go to ‘Code’ > ‘Preferences’ > ‘Color Theme’ and choose ‘Solarized Dark’.
For Windows, replace ‘Code’ with ‘File’.
Extensions
Let’s list through the extensions I’m currently using with a brief explanation as to why I have it.
Atom Keymap
This extension makes migrating much easier; I would be lost without knowing the keyboard shortcuts.
CSScomb
I like my CSS refined and use CSScomb to create a custom configuration, which I then reference in my configuration (more on that later!).
Duplicate action
I find duplicating files a lot easier than recreating them for those which are similar, such as uploaders, so this extension is extremely useful.
Highlight matching tag
Sometimes I just need to find the opening tag for something, so this extension helps with that.
Ruby
I don’t think I could have switched from Atom if it wasn’t for this. I use Rubocop for linting and this helps with that, along with code formatting and lots of other great things to make day-to-day development that much easier.
Ruby Rubocop
This is almost like revealing a secret, but rather than fix some linting errors, I automate the process and use this extension to help me do that.
SCSS IntelliSense
It’s the little things that help make development easier and this is something that Atom didn’t quite do for me, so I use this to help suggest syntax while writing SCSS.
Simple Ruby ERB
As I mentioned earlier, I use ERB for writing Rails views so this helps with that, it’s a small thing that makes a difference.
Tasks
I use a command line task to copy the tasks.json file in to every project, until global tasks become a thing. Currently, I use the tasks to install the gems for the extensions above, as I use rbenv. I also have additional tasks to help with Rails, such as console, server and Capistrano for deployment. In addition, I’ve configured tasks for rspec so I can have everything in one place (and use a keyboard shortcut to activate).
Additional tasks for htmlbeautifier and Rubocop gems also make things easier, so it can be maintained across the project.
I’ve included my tasks.json below, simply copy this in to your project root > ‘.vscode’ > ‘tasks.json’. The first task you should run is ‘configure’ to install the gems required for the extensions.
{// See https://go.microsoft.com/fwlink/?LinkId=733558// for the documentation about the tasks.json format"version": "2.0.0","tasks": [{"taskName": "beautify","type": "shell","command": "htmlbeautifier ${relativeFile}","problemMatcher": [],"presentation": {"reveal": "never"}},{"taskName": "rubocop","type": "shell","command": "rubocop --auto-correct ${relativeFile}","problemMatcher": [],"presentation": {"reveal": "never"}},{"taskName": "rspec","type": "shell","command": "bundle exec rspec","problemMatcher": [],"presentation": {"reveal": "always"}},{"taskName": "rspec file","type": "shell","command": "bundle exec rspec ${relativeFile}","problemMatcher": [],"presentation": {"reveal": "always"}},{"taskName": "rails c","type": "shell","command": "bundle exec rails console","problemMatcher": [],"presentation": {"reveal": "always"}},{"taskName": "rails s","type": "shell","command": "bundle exec rails server","problemMatcher": [],"presentation": {"reveal": "always"}},{"taskName": "cap production deploy","type": "shell","command": "cap production deploy","problemMatcher": [],"presentation": {"reveal": "always"}},{"taskName": "configure","type": "shell","command": "gem install ruby-debug-ide:0.6.0 debase:0.2.2.beta10 rcodetools rubocop fastri htmlbeautifier --no-ri --no-rdoc","problemMatcher": [],"presentation": {"reveal": "always"}}]}
Further settings
I’ve also included a copy of my settings.json so you can see how I exclude files within search and quick open that are not relevant to me.
Of course, I’ve disabled minimap, set the tab size to be two spaces, the ruler to be at 80 columns and files to autosave.
This is also where you should replace ‘/path/to/csscomb.json’ to where you have your CSScomb file saved.
{"files.autoSave": "onFocusChange","workbench.colorTheme": "Solarized Dark","atomKeymap.promptV3Features": true,"editor.multiCursorModifier": "ctrlCmd","editor.formatOnPaste": true,"editor.tabSize": 2,"editor.rulers": [80],"csscomb.preset": "/path/to/csscomb.json","editor.minimap.enabled": false,"ruby.lint": {"rubocop": {"lint": true,"rails": true}},"workbench.activityBar.visible": true,"telemetry.enableCrashReporter": false,"files.trimTrailingWhitespace": true,"search.exclude": {"**/.git": true,"**/node_modules": true,"**/bower_components": true,"**/tmp": true,"**/coverage": true,"**/log": true,"**/public/uploads": true},"files.exclude": {"**/.git": true,"**/.svn": true,"**/.hg": true,"**/CVS": true,"**/.DS_Store": true,"**/log": true}}
Closing thoughts
I’ve been using this set up for just about a week and I’m continually tweaking it to be exactly what I want it to be. I hope this helps you in getting started with Visual Code Studio and Ruby on Rails.
Let me know what you think by commenting or tweet me, @PaulWritesCode.
