My VS Code setup

I got a new work laptop recently and part of the setup process was installing and configuring VS Code to match my preferences. This usually takes a bit of time because I cannot always remember all the settings and extensions that I tweak or install. I’m aware that VS Code supports syncing of settings, extensions, etc. across devices but it’s not always possible to login with my GitHub/Microsoft account. So here are the settings and extensions that I usually change/add to a brand new VS Code installation.

Settings

{
  "editor.fontLigatures": true,
  "extensions.autoUpdate": false,
  "git.autofetch": true,
  "git.confirmSync": false,
  "editor.fontFamily": "'JetBrains Mono'",
  "webhint.enableTelemetry": "disabled",
  "editor.wordWrap": "wordWrapColumn",
  "workbench.editor.untitled.labelFormat": "name",
  "diffEditor.ignoreTrimWhitespace": false,
  "githubIssues.queries": [
    {
      "label": "My Issues",
      "query": "default"
    },
    {
      "label": "All Issues",
      "query": "state:open repo:${owner}/${repository} sort:created-desc"
    }
  ],
  "editor.rulers": [120],
  "editor.wordWrapColumn": 120,
  "screencastMode.onlyKeyboardShortcuts": true,
  "gitlens.hovers.currentLine.over": "line",
  "editor.fontSize": 14,
  "editor.lineHeight": 21,
  "terminal.integrated.fontFamily": "monospace",
  "editor.tabSize": 2,
  "workbench.colorTheme": "Dracula",
  "workbench.startupEditor": "none",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.bracketPairColorization.enabled": true,
  "typescript.inlayHints.parameterNames.enabled": "all",
  "javascript.inlayHints.parameterNames.enabled": "all",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Extensions

• Angular Language Service
• CSS Flexbox Cheatsheet
• CSS Initial Value
• CSS Stacking Contexts
• Dracula Official
• es6-string-html
• ESLint
• File Utils
• Git Cheatsheet
• GitHub Pull Requests and Issues
• GitLens — Git supercharged
• Image preview
• Nx Console
• Prettier - Code formatter
• Project Manager
• RxJS Cheatsheet
• RxJS Debugging for Visual Studio Code
• Shades of Purple
• Test Focus Highlighter
• TSLint
• webhint

Git

git config --global user.name "My Name"
git config --global user.email "[e-mail]"

Fonts

• JetBrains Mono
• Fira Code (alternative)

---

Cover photo by Mohammad Rahmani on Unsplash

Comments

[Ben Halpern]

You should cross-post this to community.vscodetips.com/ !