DEV Community

Cover image for Ruby on Rails Development with VS Code
Andrew Mason
Andrew Mason

Posted on • Edited on • Originally published at andrewm.codes

Ruby on Rails Development with VS Code

I tried several editors when I first got into programming, but VS Code quickly stuck. For the past three years, I have been continually updating my VS Code settings, extensions, keybindings, and snippets to help me be as productive as my diehard VIM friends.

Here is a quick article showing my setup for working with Rails that I use when I work on CodeFund and my Rails side projects.

Extensions

These are the ones I think are the most important. For a full list, check out this gist.

Theme

Icons

General

Ruby & Rails

* must have!

Settings

These are my global settings. For a lot of projects, I will override these settings with a workspace settings file which works great.

{
    // TELEMETRY
    // Enable usage data and errors to be sent to a Microsoft online service.
    "telemetry.enableTelemetry": false,

    // WINDOW
    // Adjust the zoom level of the window.
    "window.zoomLevel": 0,

    // BREADCRUMBS
    // Enable/disable navigation breadcrumbs.
    "breadcrumbs.enabled": true,

    // EXPLORER
    // Controls whether the explorer should ask for confirmation to move files and folders via drag and drop.
    "explorer.confirmDragAndDrop": false,
    // Controls whether a top border is drawn on modified (dirty) editor tabs or not.
    "workbench.editor.highlightModifiedTabs": true,
    // Controls the location of the sidebar. It can either show on the left or right of the workbench.
    "workbench.sideBar.location": "right",
    // Controls which editor is shown at startup, if none are restored from the previous session.
    "workbench.startupEditor": "newUntitledFile",
    // Specifies the icon theme used in the workbench or 'null' to not show any file icons.
    "workbench.iconTheme": "vscode-great-icons",
    // Specifies the color theme used in the workbench.
    "workbench.colorTheme": "One Dark Pro",
    // Overrides colors from the currently selected color theme.
    "workbench.colorCustomizations": {
      "editor.background": "#1a1c20",
      "editorIndentGuide.activeBackground": "#b83957",
      "tab.activeBorderTop": "#64676E"
    },

    // EDITOR
    // Controls whether the editor should run in a mode where it is optimized for screen readers.
    "editor.accessibilitySupport": "off",
    // Controls the font family.
    "editor.fontFamily": "Fira Code",
    // Enables/Disables font ligatures.
    "editor.fontLigatures": true,
    // Controls the font size in pixels.
    "editor.fontSize": 14,
    // Controls the line height. Use 0 to compute the line height from the font size.
    "editor.lineHeight": 20,
    // Controls the letter spacing in pixels.
    "editor.letterSpacing": 0.2,
    // Controls the font weight.
    "editor.fontWeight": "400",
    // The number of spaces a tab is equal to.
    "editor.tabSize": 2,
    // Controls how the editor should render whitespace characters.
    "editor.renderWhitespace": "all",
    // Controls the cursor style.
    "editor.cursorStyle": "line",
    // Controls the width of the cursor when #editor.cursorStyle# is set to line.
    "editor.cursorWidth": 5,
    // Control the cursor animation style.
    "editor.cursorBlinking": "solid",
    // Render vertical rulers after a certain number of monospace characters. Use multiple values for multiple rulers.
    "editor.rulers": [
      120
    ],
    // Controls whether the minimap is shown.
    "editor.minimap.enabled": false,
    // Format a file on save.
    "editor.formatOnSave": false,
    // Timeout in milliseconds after which the formatting that is run on file save is cancelled.
    "editor.formatOnSaveTimeout": 1500,
    // Controls whether the editor should automatically format the pasted content.
    "editor.formatOnPaste": true,
    // Controls whether the editor should automatically format the line after typing.
    "editor.formatOnType": false,
    // Controls whether the editor should automatically adjust the indentation when users type, paste or move lines.
    "editor.autoIndent": "keep",

    // TERMINAL
    // Customizes which terminal application to run on macOS.
    "terminal.external.osxExec": "Archipelago.app",
    // The path of the shell that the terminal uses on macOS
    "terminal.integrated.shell.osx": "/bin/zsh",
    // Controls the font size in pixels of the terminal.
    "terminal.integrated.fontSize": 14,

    // FILES
    // When enabled, will trim trailing whitespace when saving a file.
    "files.trimTrailingWhitespace": true,
    // When enabled, insert a final new line at the end of the file when saving it.
    "files.insertFinalNewline": true,
    // When enabled, will trim all new lines after the final new line at the end of the file when saving it.
    "files.trimFinalNewlines": true,
    // Controls auto save of dirty files.
    "files.autoSave": "onFocusChange",
    // Configure file associations to languages (e.g. "*.extension": "html"). These have precedence over the default associations of the languages installed.
    "files.associations": {
      "*.erb": "erb",
      "Gemfile": "ruby"
    },

    // EMMET
    // Enable Emmet abbreviations in languages that are not supported by default.
    "emmet.includeLanguages": {
      "html": "html",
      "html.erb": "html",
      "html.inky": "html",
      "erb": "html"
    },

    // LANG: Javascript
    // Enable/disable automatic updating of import paths when you rename or move a file in VS Code.
    "javascript.updateImportsOnFileMove.enabled": "always",
    "npm.packageManager": "yarn",

    // PLUGIN: Ruby
    // Use built-in language server
    "ruby.useLanguageServer": true,
    // Time (ms) to wait after keypress before running enabled linters.
    "ruby.lintDebounceTime": 1500,
    //run non-lint commands with bundle exec
    "ruby.useBundler": true,
    // Set individual ruby linters to use
    "ruby.lint": {
      // enable standard via bundler
      "standard": {
        // Prefix the `standard` command with `bundle exec`
        "useBundler": true
      }
    },
    // Which system to use for formatting. Use `false` to disable or if another extension provides this feature.
    "ruby.format": "standard",

    // GIT
    // When enabled, commits will automatically be fetched from the default remote of the current Git repository.
    "git.autofetch": true,
    // Commit all changes when there are no staged changes.
    "git.enableSmartCommit": true,
    // Enables commit signing with GPG.
    "git.enableCommitSigning": true,
    // Ignores the warning when there are too many changes in a repository.
    "git.ignoreLimitWarning": true,

    // PLUGIN: Gitlens
    // Specifies where to show the Repositories view
    "gitlens.views.repositories.location": "gitlens",
    // Specifies where to show the File History view
    "gitlens.views.fileHistory.location": "gitlens",
    // Specifies where to show the Line History view
    "gitlens.views.lineHistory.location": "gitlens",
    // Specifies where to show the Compare view
    "gitlens.views.compare.location": "gitlens",
    // Specifies where to show the Search Commits view
    "gitlens.views.search.location": "gitlens",
    // Specifies whether to provide an authors code lens, showing number of authors of the file or code block and the most prominent author (if there is more than one)
    "gitlens.codeLens.authors.enabled": false,
    // Specifies whether to provide a recent change code lens, showing the author and date of the most recent commit for the file or code block
    "gitlens.codeLens.recentChange.enabled": false,
    // Specifies whether to provide any Git code lens, by default.
    "gitlens.codeLens.enabled": false,

    // PLUGIN: Settings Sync
    // Controls whether opened editors should show in tabs or not.
    "sync.gist": "YOUR_TOKEN",

    // PLUGIN: Font Awesome Auto-complete
    "fontAwesomeAutocomplete.patterns": [
      "**/*.html",
      "**/*.html.erb"
    ],

    // PLUGIN: Peacock
    // Colors for Peacock extension
    "peacock.favoriteColors": [
      {
        "name": "Angular Red",
        "value": "#b52e31"
      },
      {
        "name": "Auth0 Orange",
        "value": "#eb5424"
      },
      {
        "name": "Azure Blue",
        "value": "#007fff"
      },
      {
        "name": "C# Purple",
        "value": "#68217A"
      },
      {
        "name": "Gatsby Purple",
        "value": "#639"
      },
      {
        "name": "Go Cyan",
        "value": "#5dc9e2"
      },
      {
        "name": "Java Blue-Gray",
        "value": "#557c9b"
      },
      {
        "name": "JavaScript Yellow",
        "value": "#f9e64f"
      },
      {
        "name": "Mandalorian Blue",
        "value": "#1857a4"
      },
      {
        "name": "Node Green",
        "value": "#215732"
      },
      {
        "name": "React Blue",
        "value": "#00b3e6"
      },
      {
        "name": "Something Different",
        "value": "#832561"
      },
      {
        "name": "Vue Green",
        "value": "#42b883"
      }
    ],

    // Language specific formatting settings
    "[jsonc]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
      "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[markdown]": {
      "editor.defaultFormatter": "yzhang.markdown-all-in-one"
    },
    "[yaml]": {
      "editor.defaultFormatter": "redhat.vscode-yaml"
    },
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
      "editor.defaultFormatter": "numso.prettier-standard-vscode"
    },
    "[ruby]": {
      "editor.formatOnSave": true
    },
    "[scss]": {
      "editor.formatOnSave": true
    }
  }
Enter fullscreen mode Exit fullscreen mode

Keybindings

[
  {
    "key": "shift+alt+e",
    "command": "erb.toggleTags",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+f",
    "command": "extension.railsFlipFlop"
  }
]
Enter fullscreen mode Exit fullscreen mode

Snippets

Checkout hopsoft/model_probe if you are curious about the first snippet!

{
  "model comments": {
    "prefix": "rmc",
    "body": [
      "  # extends ...................................................................",
      "",
      "  # includes ..................................................................",
      "",
      "  # relationships .............................................................",
      "",
      "  # validations ...............................................................",
      "",
      "  # callbacks .................................................................",
      "",
      "  # scopes ....................................................................",
      "",
      "  # additional config (i.e. accepts_nested_attribute_for etc...) ..............",
      "",
      "  # class methods .............................................................",
      "",
      "  # public instance methods ...................................................",
      "",
      "  # protected instance methods ................................................",
      "",
      "  # private instance methods ..................................................",
      ""
    ],
    "description": "model comments"
  },
  "Add pry binding": {
    "prefix": "bp",
    "body": [
      "binding.pry"
    ],
    "description": "Add pry binding"
  },
  "Add erb pry binding": {
    "prefix": "ebp",
    "body": [
      "<% binding.pry %>"
    ],
    "description": "Add erb pry binding"
  }
}
Enter fullscreen mode Exit fullscreen mode

Hopefully you can take something from my setup to add to yours!

Happy coding!

Top comments (4)

Collapse
 
vvo profile image
Vincent Voyer

Thanks for all the good extensions, I also enjoy very much Gem Lens: marketplace.visualstudio.com/items.... Easy way to know if I can upgrade a gem

Collapse
 
sergiolupus profile image
Serj Petrenko

Thanks, I found a lot of useful plugins that I didn't use before.

Collapse
 
andrewmcodes profile image
Andrew Mason

Glad to hear!! Thanks for reading 😊

Some comments may only be visible to logged-in visitors. Sign in to view all comments.