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
- Auto Close Tag
- Auto Rename Tag
- Bookmarks
- Bracket Pair Colorizer
- change-case
- Code Runner
- Dash
- Docker
- Duplicate action
- Font Awesome Auto-complete & Preview
- Git Extension Pack
- Git History
- GitHub Pull Requests
- gitignore
- GitLens
- Markdown All in One
- Mustache
- Open in GitHub, Bitbucket, Gitlab, VisualStudio.com !
- Peacock
- Prettier
- Prettier-Standard
- Project Manager
- Quick and Simple Text Selection
- Sass Lint
- Settings Sync
- SVG Viewer
- YAML
Ruby & Rails
- endwise*
- ERB Formatter/Beautify
- Gem Lens
- Rails Fast Nav*
- Rails Flip-Flop*
- Rails Routes
- rails-latest-migration*
- Rails
- Ruby Haml
- Ruby Solargraph*
- Ruby*
- Simple Ruby ERB
- VSCode Ruby*
- vscode-gemfile
- YARD Documenter
* 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 } }
Keybindings
[ { "key": "shift+alt+e", "command": "erb.toggleTags", "when": "editorTextFocus" }, { "key": "alt+f", "command": "extension.railsFlipFlop" } ]
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" } }
Hopefully you can take something from my setup to add to yours!
Happy coding!
Top comments (4)
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
Thanks, I found a lot of useful plugins that I didn't use before.
Glad to hear!! Thanks for reading 😊
Some comments may only be visible to logged-in visitors. Sign in to view all comments.