Skip to content

Instantly share code, notes, and snippets.

@lehighjcut
Last active Oct 17, 2022
Embed
What would you like to do?
VSCode Settings - Frontend Dev at Gusto by Jordan Cutler

Summary

Highlights from this set of configurations

  • Auto save
  • Auto format on save and fix all quick fix issues
  • Auto import on save
  • Format on save and paste
  • Prepopulate command palette and file search with the last searched thing
  • Limit the number of active tabs and allow them to wrap on smaller screens
  • Auto import on paste (via an extension that works part of the time)
  • Icon theme for your sidebar
  • Move the file explorer / search / etc buttons that hug the left side down to bottom left to avoid taking up so much space
  • When using command palette / search, the window will show up near the center rather than hugged to the top so you don’t need to shift your eyes so much
  • Keyboard shortcut for automatically swapping to the associated spec file (via Go to spec extension)

Wishlist

  • Native support for automatic imports after pasting (currently using Copy with Imports extension)

This is the list of extensions I'm using.

Must haves

Highly recommended

Consider having

Personal preferences

// This bit of config says that when you run a command that would open the sidebar window such as searching in the command
// palette for installed extensions, it will automatically focus your keyboard to the window that it opened.
// I often found myself having to click into that window after searching and it was really annoying
{
// whatever your existing config was
{ // Unbind unconditional default
"key": "cmd+0",
"command": "-workbench.action.focusSideBar"
},
{ // to ←
"key": "cmd+0",
"when": "!sideBarFocus",
"command": "workbench.action.focusSideBar"
},
{ // from →
"key": "cmd+0",
"when": "sideBarFocus",
"command": "workbench.action.focusActiveEditorGroup"
},
}
{
// Set the file editor button, search button, git, to show up at the bottom left rather than in the massive sidebar on the left side. Opens up a lot more space.
"customizeUI.activityBar": "bottom",
// Matching brackets will have the same color
"editor.bracketPairColorization.enabled": true,
// Code actions on save. You can see the available options by starting to type "source" in the JS object
"editor.codeActionsOnSave": {
// Adds missing imports on save
"source.addMissingImports": true,
// Executes all fixes such as missing a semicolon, other eslint complaints, etc.
"source.fixAll": true,
},
// Change editor font
"editor.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",
// fontLigatures are when multiple characters appear into a single character. Personally I prefer to just have the default behavior of the text
"editor.fontLigatures": false,
// Changes how large the font size will be in the editor
"editor.fontSize": 16,
// Formats using our formatter after cmd + s (saving)
"editor.formatOnSave": true,
// Formats using our formatter after pasting code
"editor.formatOnPaste": true,
// When you edit an HTML tag the corresponding tag will get updated - only works in HTML files atm. As an intermediate "hack" you can use cmd + D twice while on a HTML tag or JSX/TSX element
"editor.linkedEditing": true,
// Disabled the right hand window showing where you are within the file. Personally I find it distracting but its personal preference.
"editor.minimap.enabled": false,
// Brightens a little bit the active level of indentation so you can see which level of indent you are on
"editor.guides.highlightActiveIndentation": true,
// Change default tab size to 2 since its a generally accepted standard. It seems like the VSCode default is 4 for some reason
"editor.tabSize": 2,
// Personal preference. Emmet is a set of keyboard shortcuts to auto generate various templates. I don't use it but others may. This just cleans up autocomplete a bit if you don't use it.
"emmet.excludeLanguages": ["typescript", "typescriptreact", "javascript"],
// Don't ask for confirmation when moving a file
"explorer.confirmDragAndDrop": false,
// Will constantly save your changes as you type (default delay is 1000ms). Note: This doesn't run formatters or auto imports, you need to manually do cmd + s for that.
"files.autoSave": "afterDelay",
// Trim trailing whitespace on save
"files.trimTrailingWhitespace": true,
// Gitlens settings: all personal preference. I honestly don't even remember setting these.
"gitlens.blame.avatars": false,
"gitlens.blame.compact": false,
"gitlens.blame.format": "${author|10} ${date}",
"gitlens.blame.heatmap.enabled": false,
"gitlens.blame.highlight.locations": ["gutter", "line", "overview"],
"gitlens.codeLens.enabled": false,
// I remember setting this one. This disables the view of seeing the author within the code. I didn't want to constantly see the blame annotations as I'm typing.
// I see the blame annotation at the bottom right of my screen to the left of the current line / column info
"gitlens.currentLine.enabled": false,
"gitlens.defaultDateFormat": "DD/MM/YYYY",
"gitlens.defaultDateShortFormat": "DD/MM/YYYY",
"gitlens.hovers.currentLine.over": "line",
"gitlens.hovers.enabled": false,
"html.autoClosingTags": true,
// Tell VSCode to use the prettier standard & config when running formatting.
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// these are needed so that when auto importing via autocomplete suggest or "quick fix", the correct absolute path import is provided as the path
"javascript.preferences.importModuleSpecifier": "non-relative",
"javascript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.preferences.importModuleSpecifier": "non-relative",
"typescript.suggest.autoImports": true,
"typescript.updateImportsOnFileMove.enabled": "always",
// Helps the Jest Runner extension. Jest Runner provides a tiny little UI with a "run" and "debug" button above jest tests so you can run that test with one click.
"jestrunner.jestCommand": "yarn test",
// Safe to ignore
"security.workspace.trust.untrustedFiles": "open",
// Changes the font size of the
"terminal.integrated.fontSize": 14,
// The zoom level changes how large everything appears within the window. Default is 0 so I increased it slightly to make it easier on my eyes to read the top file bar, the sidebar, etc.
"window.zoomLevel": 0.75,
// These are some custom colors that I ported over from my settings in Jetbrains IDE that I like, but all personal preference.
"workbench.colorCustomizations": {
"editor.background": "#202c33",
// "sideBar.foreground": "#fff",
// "sideBar.background": "#393d3e",
// "sideBarSectionHeader.border": "#393d3e",
"tab.activeBackground": "#424d42",
"tab.hoverBackground": "#212324"
// "tab.inactiveBackground": "#393d3e",
// "titleBar.activeBackground": "#393d3e"
},
// Preferred color theme
"workbench.colorTheme": "One Dark Pro",
// Your last searched thing in the command palette will pop up and highlighted so that you don't need to type the same thing again if you close it
"workbench.commandPalette.preserveInput": true,
// I disabled all the "preview" stuff because I didn't really like the interface of previewing a block of code and I'd rather navigate to the file directly
"workbench.editor.enablePreview": false,
"workbench.editor.enablePreviewFromQuickOpen": false,
"workbench.editor.enablePreviewFromCodeNavigation": false,
// These 2 values ensure that we don't have more than 8 files open in the top editor at a time. I ran into an issue of having a ton of overflow before so this forces me to "not have too many tabs"
"workbench.editor.limit.enabled": true,
"workbench.editor.limit.value": 8,
// Not sure what this does
"workbench.editor.untitled.hint": "hidden",
// If there isnt enough room for the files display at the top, it will wrap the tabs rather than overflowing on one line
"workbench.editor.wrapTabs": true,
// This enables horizontal scrolling in the file explorer on the left side. Useful for highly nested files.
"workbench.list.horizontalScrolling": true,
// Sets an icon theme to the vs-nomo-dark. I prefer vs-nomo-dark purely because it supports better differentation between js(x) and ts(x) than material does. If you prefer material icon theme, go with that.
"workbench.iconTheme": "vs-nomo-dark",
// Your last searched thing in the file search will pop up and highlighted so that you don't need to type the same thing again if you close it
"workbench.quickOpen.preserveInput": true,
// Some material icon theme customizations.
"material-icon-theme.folders.theme": "classic",
"material-icon-theme.folders.color": "#90a4ae",
"material-icon-theme.activeIconPack": "react",
"workbench.preferredDarkColorTheme": "One Dark Pro",
// You can add CSS to VSCode to make certain custom styles
"customizeUI.stylesheet": {
// https://stackoverflow.com/a/70026531
// This style which I added ensures that the command palette widget / file search will show up a part way down your screen so you don't need to look up so high to see it
".quick-input-widget": "top: 30% !important;border-radius:10px!important;"
// ".quick-input-widget .quick-input-header": "padding:0px!important;margin-bottom:10px;",
// ".quick-input-widget .monaco-inputbox": "padding:10px !important;border-radius:5px!important;",
// ".quick-input-widget .monaco-list-rows": "top: 0 !important;max-height:670px;min-height:300px;",
// ".quick-input-widget .monaco-list-row": "position:static!important;border-bottom: 1px solid #333942;padding:5px!important;height:auto!important;",
// ".quick-input-widget .quick-input-list-entry": "position:relative;padding:0 5px 0px 15px;",
// ".quick-input-widget .quick-input-list-entry .codicon[class*=codicon-]": "font-size:12px;",
// ".quick-input-widget .quick-input-list-entry .monaco-action-bar": "position:absolute;left:0;",
// ".quick-input-widget .quick-input-list-entry .quick-input-list-label": "max-width: 80%;",
// ".quick-input-widget .quick-input-list .quick-input-list-entry.quick-input-list-separator-border": "border-top-width:0px!important;"
},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment