danny.

Jul 11, 2022

My VS Code Setup

Snippet, VS Code

A copy of my vscode settings and favourite extensions.

There have been a few times now, either setting up a new laptop or helping out a friend, where I've needed a copy of my vscode settings. But when I dig into my settings it's hard to tell which ones are important, and I typically end up missing some.

I thought I'd do my future self a favour and create a reference copy of settings, along with some of the extensions I like.

settings.json

{
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,

  "editor.formatOnSave": true,
  "files.trimTrailingWhitespace": true,
  "diffEditor.ignoreTrimWhitespace": false,

  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,

  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": true,

  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "git.confirmSync": false,

  "editor.hover.enabled": false,
  "editor.acceptSuggestionOnCommitCharacter": false,
  "terminal.integrated.tabs.enabled": false,

  "files.associations": {
    "*.mdx": "markdown",
    "*.snap": "javascript"
  },
  "[markdown]": {
    "editor.wordWrap": "off"
  },
  "extensions.ignoreRecommendations": true,

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "projectManager.git.baseFolders": ["~/Documents"],

  "workbench.panel.defaultLocation": "right",
  "workbench.editor.untitled.hint": "hidden"
}

Extensions

ExtensionDescription
prettier iconPrettierThe preferred code formatter for the majority of web languages.
Code Spell Checker iconCode Spell CheckerSurprisingly helpful spellchecker. It's aware of variable casing which is neat.
Git Lens iconGitLensAdds extra source control features. I use this because enjoy having the commit log built into vscode.
Project Manager iconProject ManagerAn absolute essential. Adds a pane of git projects allowing you to quickly switch between them.
Auto Rename Tag iconAuto Rename TagRenames the closing tag when you change the opening tag in html and JSX.
Error Lens iconError LensShows errors and warnings inline with the code, on the line that caused it.

~

Danny wray 2023