Product Designer Setup
  • Introduction
  • Preparation
    • Preparing Your Mac
    • Installing macOS
  • Setup
    • Xcode
    • System Preferences
      • Finder
    • Homebrew
      • Cask
    • Terminal Setups
      • Warp Setup
      • Hyper Setup
      • iTerm2 Setup
        • Zsh
    • Terminal Packages
    • Git
      • Git Ignore
    • Code Editor Setups
      • Visual Studio Code
        • Extensions
        • Preferences
      • Sublime Text
        • Preferences
        • Packages
    • Tech Stack
      • Package Managers
  • Apps + Tools
    • Intro
    • Productivity Tools
    • Design Tools
    • Developer Tools
Powered by GitBook
On this page

Was this helpful?

  1. Setup
  2. Code Editor Setups
  3. Visual Studio Code

Preferences

PreviousExtensionsNextSublime Text

Last updated 4 years ago

Was this helpful?

Using Prettifier to auto-format HTML markup and stylesheets every time I save/paste code "editor.formatOnPaste": true, "editor.formatOnSave": true,

I usually want to see more on screen and try to zoom out to make things smaller (feel free to adjust to your preference) "window.zoomLevel": -1

I like my code to breathe (hence the huge line height) "editor.fontSize": 16, "editor.lineHeight": 32,

works great, but if want some fun - is something you might want to consider "editor.fontFamily": "Dank Mono,Source Code Pro, Monaco, 'Courier New', monospace",

I've been using Brogrammer and Material Theme previously in Sublime, but Atom One Dark is really nice for VS Code "workbench.colorTheme": "Atom One Dark",

I like word wrapping "editor.wordWrap": "on",

And hate mini maps (it takes too much space) "editor.minimap.enabled": false,

I've been using Brogrammer and Material Theme in Sublime, but Atom One Dark is really nice for VS Code "workbench.colorTheme": "Atom One Dark",

And adding material icons just makes your editor "pop" (no pun intended - lol) "workbench.iconTheme": "material-icon-theme",

We're using the Guides plugin, so let's disable the native one "editor.renderIndentGuides": false,

For TL;DRs out there, here's a summary of my User Settings

{ "editor.multiCursorModifier": "ctrlCmd", "editor.snippetSuggestions": "top", "editor.formatOnPaste": true, "editor.formatOnSave": true, "editor.renderIndentGuides": false, "editor.wordWrap": "on", "html.format.wrapLineLength": 0, "editor.fontFamily": "Dank Mono,Source Code Pro, Monaco, 'Courier New', monospace", "editor.fontSize": 16, "editor.lineHeight": 32, "workbench.activityBar.visible": false, "editor.minimap.enabled": false, "workbench.iconTheme": "material-icon-theme", "workbench.statusBar.feedback.visible": false, "editor.quickSuggestionsDelay": 5, "window.openFilesInNewWindow": "off", "editor.tabSize": 4, "window.zoomLevel": -1 }

Why Dank Mono? TLDR; It's awesome. Here's an in-depth explanation why:

https://medium.com/@philpl/what-sets-dank-mono-apart-1bbdc1cc3cbd
Source Code Pro
Dank Mono
Dank Mono - love the ligatures too!