/ EVERGREEN, TECH

Visual Studio Code - Setup

Let’s take a look at a couple of outstanding VSCode extensions.

Last updated: August 2019

tl;dr

code --install-extension quinusocio.vsc-material-theme
code --install-extension PKief.material-icon-theme
code --install-extension CoenraadS.bracket-pair-colorizer-2

code --install-extension visualstudioexptteam.vscodeintellicode
code --install-extension kisstkondoros.vscode-codemetrics

code --install-extension streetsidesoftware.code-spell-checker
code --install-extension pnp.polacode
code --install-extension wayou.vscode-todo-highlight
code --install-extension formulahendry.code-runner
code --install-extension mhutchie.git-graph

code --install-extension joelday.docthis
code --install-extension herrmannplatz.npm-dependency-links
code --install-extension dbaeumer.vscode-eslint
code --install-extension pflannery.vscode-versionlens

code --install-extension orta.vscode-jest
code --install-extension markis.code-coverage

Look and Feel

  • Material Theme is beautiful in its simplicity.
  • Material Icons - the great thing about this icon set is that it not only adds icons for different file types but also for folders with specific names.
  • Bracket Pair Colorizer 2 - it applies Rainbow colors to your brackets - making it much easier to see which brackets belong together.

Programming Font

I use the programming font FiraCode with ligatures enabled. The font is very well suited for JS/TS development, you may need to use another font for another language.

# Ubuntu
sudo apt install fonts-firacode

# Windows
choco install firacode

VSCode Settings

{
    "editor.fontLigatures": true,
    "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
}

General

  • Code Metrics - a warning sign that your code is getting very complex and that you probably should refactor it
  • VisualStudio IntelliCode - Ai-assisted Code Complete, when it works, it gives you much better autocomplete suggestions.
  • Code Spell Checker - Spellchecker with the option to add more languages
  • Polacode - Beautiful Screenshots of your code
  • TODO Highlight - Adds Highlights to // TODO: and // FIXME: etc.
  • Code Runner - Run code snippet or code file for multiple languages
  • Git Graph - Well displays a git graph

Web Development

Testing

  • Jest - Executes Jest Tests in the background and indicates inline which tests failed
  • Code Coverage - Underlines the code not covered by your tests