My VSCode Setup

In my previous post we reviewed setting up a terminal. Today we look at the most important tool in a developer's tool belt, the code editor/IDE.

Visual Studio Code (VSCode) is currently one of the most popular code editors. I myself use VSCode daily for multiple tasks, including taking notes, writing markdown for posts, writing other documentation and off course writing code.

Table of Contents

  1. Install VSCode
  2. Customize VSCode
  3. Install Extensions

1. Install VSCode

Download and install VSCode from the official website here.

2. Customize VSCode

Once you have installed VSCode we are going to change some of the settings. This can be done via the Graphical User Interface (GUI) or you can edit the settings JSON files. There are two types of settings files, one for the USER and one for the WORKSPACE. The USER settings are the default settings which will be used for new workspaces you create. You can customize each workspace, which will override the USER settings, should you have workspace specific requirements.

On MacOS, press F1 to open the Command Palette, type "Preferences: Open User Settings" and press enter in order to edit settings via the GUI.

-OR-

Press F1 to open the Command Palette, type "Preferences: Open Settings (JSON)" to edit the local settings file, which contains all the same settings, just represented in JSON.

Steps for GUI:

  • Change Font and Font Size

    • First we going to change the font type and font size. We are going to set this to the same as our terminal setup in my previous post. Search for "Font" in the top search bar, then set the Editor: Font family to "Fira Code". Also change the Editor: Font size to "15".
  • Disable Minimap

    • Search for "Minimap" and disable the Minimap. I personally don't like the minimap as it uses valuable screen real estate. If you need a minimap to navigate long code bases in single files you need to consider breaking up the code into smaller pieces for improved readability and maintainability (where possible of course).
  • Change Integrated Terminal

    • Search for "Terminal" and change the to iTerm.app. We configured our default terminal as iTerm in the previous post.
    • Change the integrated terminal shell to "Zsh" ("/bin/zsh"), change the font family to "Fira Code" and the font size to "15".
  • Change Auto Save

    • Find "Auto Save" and change to "After delay". I find the default of 1000ms to be sufficient.
  • Python Specific Settings

    • Select a default Python interpreter

      • In the command palette, type "Python: Select Interpreter", press Enter. Choose the relevant interpreter or browse/enter path. (Note: I use a combination of pyenv and venv to manage my Python versions and virtual environments. I use pyenv to install and manage different Python versions only and then venv to create and manage the virtual environments themselves. I will go into more detail about this in a future post)
    • Change the linter to flake8

      • In the command palette, type "Python: Select Linter", press Enter. Choose flake8. (Note: flake8 needs to be installed as a Python package and I recommend using pipx to install as a global isolated package which can be used for multiple Python projects and you do not need to re-install across multiple Python environments)
    • Change the formatter to black.

      • In the command palette, type "Preferences: Open User Settings", press Enter. Search for "python formatting". Now change Python > Formatting: Provider to "black" and update Python > Formatting: Black Path to the relevant path for your black installation. (Note: black needs to be installed as Python package and I recommend using pipx to install as a global isolated package which can be used for multiple Python projects and you do not need to re-install across multiple Python environments.)

Refer to the below steps for the editing the JSON file method. In the JSON file method I included additional settings which is not covered in the GUI method. These are file watchers, searches and explorers. These are just some common directories in my development workflow, which I do not want VSCode to crawl, index or include in the file explorer. Excluding these keeps your workspace neat and clean and can increase editor performance.

Steps for JSON:

  • You can copy my settings.json here and modify it to meet your needs.

  • You can also copy my keybindings.json here and modify it to meet your needs.

That's all that needs changing with regards to the VSCode specific settings. In the next section we will cover installing extensions.

3. Install Extensions

This is arguably VSCode's best feature, the ability to install extensions and customize your code editing experience to suite your needs. There are thousands of extensions out there, therefore it can be hard to manage them and to ensure you not bloating your code editor with unnecessary or overlapping extensions. The below list is my current trusted and curated list of extensions I use daily.

Python Extensions

  • Python

    • Linting, Debugging (multi-threaded, remote), Intellisense, Jupyter Notebooks, code formatting, refactoring, unit tests, snippets, and more.
    • Marketplace Link
  • Python Docstring Generator

    • Automatically generates detailed docstrings for python functions.
    • Marketplace Link

Productivity Extensions

  • Vim

  • GitLens — Git supercharged

    • Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
    • Marketplace Link
  • Project Manager

  • Bookmarks

  • Live Server

    • Launch a development local Server with live reload feature for static & dynamic pages.
    • Marketplace Link
  • Path Intellisense

  • Remote - SSH

    • Open any folder on a remote machine using SSH and take advantage of VS Code's full feature set.
    • Marketplace Link
  • Todo Tree

  • WakaTime

    • Metrics, insights, and time tracking automatically generated from your programming activity.
    • Marketplace Link

Theme and icons

  • Atom One Dark Theme

  • Material Theme Icons

    • Material Theme Icons, the most epic icons theme for Visual Studio Code and Material Theme.
    • Marketplace Link

There are still so many changes you can make and extensions you can install for your VSCode editor we just scratched the surface on this post.