VSCode Settings - Frontend Dev at Gusto by Jordan Cutler

_summary.md

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)

extensions_list.md

This is the list of extensions I'm using.

Must haves

• Eslint - Adds editor support for eslint config in the workspace
• Prettier - Adds editor support for prettier config in the workspace
• Scss IntelliSense - Autocompletion support for SCSS
• Stylelint - Adds editor support for stylelint config in the workspace

Highly recommended

• Gusto Workbench - Autocompletion for Gusto Workbench components (Gusto engineer specific)
• Gitlens - Add a bunch of native git functionality to VSCode including git blame
• Hunrgry Delete - Don't spend time hitting backspace
• Go to spec
• HTML CSS Support
• Jest runner - UI to run jest tests from the code
• SVG - svg syntax support
• Visual Studio IntelliCode - I think this might be a default but its more optimized autocomplete and suggestions
• Typescript error translator

Consider having

• Better Comments
• Bookmarks
• Copy With Imports - This one will attempt to import as you paste a block of code but it's not perfect
• Debugger for Firefox - Haven't used this yet
• Docker - Helps when building dockerfiles
• DotENV - Support for .env files
• ES7 React/Redux/GraphQL snippets - useful for generating a template of a component
• Github pull requests - Allows you to easily enter review mode for a PR and view your PRs / PRs assigned to you (beware of potential cpu load and bad reviews)
• GraphQL
• TODO Highlight - highlights TODO comments

Personal preferences

• One Dark Pro Theme
• Customize UI - This one is needed if you want to use custom CSS to style VSCode
• Monkey patch - needed as well along with Customize UI
• Material Icon Theme
• Nomo Dark Icon Theme - My preference

keybindings.jsonc

// 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"
  },
}

settings.jsonc

{
  // 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;"
  },
}