My Visual Studio Code Setup

Last updated: May 2021

I am working currently on following projects:

  • Web projects with TypeScript and ReactJS
  • Maya Scripts with Python and PyMel
  • Markdown Notes

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

Theme

Current Theme: Night Owl

Past Themes:

Programming Font

Current Font: Jet Brain Mono

Additionally you need to add following configuration to your settings.json:

    "editor.fontFamily": "'JetBrains Mono', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
    "editor.fontSize": 13,
    "editor.lineHeight": 22,
    "editor.fontLigatures": true,

Past Fonts:

Here you can find more fonts specialized for coding: Overview of Programming Fonts

Other

  • Material Icons – This icon set has an additional feature where folders with a specific name like src also get dedicated icons.
  • Bracket Pair Colorizer 2 – this adds colors to brackets making it easier to see which brackets belong together.
  • Better Comments – Styles comments to make different types of comments more visually distinct

General

Web Development

  • Code Metrics – Calculates and displays the complexity of your JavaScript/TypeScript code. This should encourage you to keep your code as simple as possible.
  • EsLint
  • Thunder Client – An alternative to Postman, allows you to simulate REST Requests

Testing

  • Jest – Executes Jest Tests in the background and indicates inline which tests failed

Additional Settings

Organize imports on save

VSCode can automatically organize your imports (sorting, removing unused)

"editor.codeActionsOnSave": {
		"source.organizeImports": true
}

Past Extensions

  • TODO Highlight – Adds Highlights to // TODO: and // FIXME: etc.
  • npm Dependency Links – Adds Ctrl-Click to quickly open the package on npmjs.com page
  • Polacode – Beautiful Screenshots of your code
  • Version Lens – Adds information to package.json if newer versions of packages are available.