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.