My VS Code setup

So as you probably have guessed, I use Microsofts’ VS Code for my web development needs and this post is to show you how I have setup my copy of VS Code.

Lets start with most important bit, which theme do I use?

Well as you may of seen on my Uses pages, I am quite a fan of Wes Bos’s Cobalt 2 colour scheme, for which there are versions out for a lot of different bits of software.

I don’t just use it how it is out of the box though and thanks to VS Code for making it simple to make tweaks to the UI, that I made a few small tweaks to it in my settings which I think are an improvement to the default settings 😎.

Those custom settings are as follows:

"workbench.colorCustomizations": {
  "[Cobalt2]": {
      "sideBar.background": "#1A3548",
      "sideBar.border": "#000000",
      "sideBarTitle.foreground": "#ffffff",
      "sideBarSectionHeader.foreground": "#ffffff",
      "editorLineNumber.foreground": "#84909a",
      "editorLineNumber.activeForeground": "#ffffff",
      "editor.lineHighlightBackground": "#ffffff20",
      "editor.hoverHighlightBackground": "#ffffff40",
      "peekViewResult.lineForeground": "#ffffff",
      "tab.activeForeground": "#ffffff",
  }
}

I also use the recently released font by JetBrains, JetBrains Mono with the ligatures enabled.

Now lets get on to the extensions that I use and would highly recommend any frontend developer to install.

  • Document This - A very handy way to auto generate JSDoc comments from your functions, this saves a lot of time when writing out good inline usage of what it happening in your JS functions. This also works with TypeScript.
  • ESlint - Kind of self explanitory
  • Live Server - Working on some quick? Jsut prototyping an idea? Don’t want the hassle of setting up and installing lots of dependenices? Then this for you, just right click on the file in the editor and click ‘Open with Live server’ and it’ll load it up in a browser with hot reloading and the rest of what you’d expect.
  • Settings Sync - Do you have multiple computers? Or just want to store your VS Code settings and extensions? Then this is a must.
  • VS Code Styled-Components - If you use styled-components, then this is a must plugin as it gives proper CSS syntax highlighting, syntax errors and intellisense.
  • Web Accessibility - A handy extension that gives you hints on if your HTML could be improved from an accessibility point of view.

I have alot more extensions installed, too many to list here but if you are interested you can check out all my settings in this gist.