My VS Code Playground

Reading Time β‰ˆ 27 minutes

Last updated on: 11/01/2024
β€’ [11/01/2024] Share my VS Code profile as a GitHub Gist
β€’ [28/11/2023] Update hotkeys
β€’ [07/10/2023] Add plugins (Sort JSON, YAML Sort)
β€’ [27/04/2023] Update hotkeys
β€’ [11/02/2023] Add plugin (GitHub Copilot Labs)
β€’ [19/01/2023] Add plugin (Compare Folders)
β€’ [30/11/2022] Update hotkeys
β€’ [21/11/2022] Add plugin (LTex)
β€’ [09/11/2022] Add plugin (ShellCheck)
β€’ [06/11/2022] Add plugin (Blackbox)
β€’ [03/11/2022] Add plugin (:emojisense:)
β€’ [28/10/2022] Add plugins (Code Runners, Python Path, Python Snippets 3)
β€’ [27/10/2022] Add plugins (Helm Intellisense, swapdiff, YAML)
β€’ [29/08/2022] Add macOS keyboard shortcuts
β€’ [10/07/2022] Add plugin (VSCode Neovim)
β€’ [15/06/2022] Add plugins (DVC) and remove (neuron)
β€’ [03/05/2022] Add link to the “my-terminal” repository
β€’ [10/03/2022] Add plugins (autoDocstring, REST Client, Todo Tree)
β€’ [14/11/2021] Initial release

You can find my VS Code profile under gist.github.com.

VS Code - Blog post background

Compendium of impressions from an odyssey with my most preferred day-to-day code editor, not only for Python/MLOps.

Bumpy wandering

Back in 2018 while publishing this blog, I was slowly immersing in the use of Visual Studio Code as my #1 programming instrument. As I marked in this site’s FAQ section at that time: β€œnowadays, I switched over to VS Code, which gets pretty decent reviews, especially from the Pythonic community”. All I can say is that this choice made my development experience much more convenient, and in this write-up I would like to share how.

Before the (hopefully) final environment transition, I spent likewise some time with different integrated development environments (IDEs) and code editors throughout my education and career:

  • Pascal (Free Pascal IDE)
  • C++ and C# (Code::Blocks, Microsoft Visual Studio)
  • Java (IntelliJ IDEA)
  • MATLAB (GNU Octave, MATLAB)
  • R (RStudio)
  • Python (yhat/rodeo, IDLE, Atom, Sublime Text, Jupyter Notebooks, Spyder, PyCharm)
  • General text editors (Notepad++, Sublime Text)
Bumpy road of IDEs
Bumpy road from FPC to VS Code

Driving through this rough path, most of the editors parked by the road, some continue its ride (Sublime Text, VS Code) and one is peeking through the bushes to be explored with curiosity (Vim).

Since I frequently shared my VS Code setup with friends and co-workers, I believe that you may want to stick with me on this journey. Down there, you should find a set of my ultimate settings, extensions, keyboard shortcuts, different tips & tricks, which I altogether intend on keeping up to date!

VS Code

Over the years, the line between IDE and non-IDE has definitely blurred due to the extensibility of different programs. In the past, the border was clearly visible, where on one side we could either choose a more powerful text-editor defined as β€œsource code editor” to ease some quick code adjustments, and on the other side we could reach for a memory hungry IDE with all the possible components like unit testing and database integration.

Nowadays, with a much greater and more advanced assortment of tools, it is much easier even for the less tech-savvy users to deal with the more complicated daily challenges.

In this post, I’m touching on a highly extensible and portable solution, which can amazingly well fit our deepest desires. The main subject of this essay: VS Code is not as long on the market, but it’s already the most popular IDE according to the Stack Overflow survey from 2021: a choice of 71% of respondents, followed by its older brother (Visual Studio) with a score of 33%.

So, why all the noise around VS Code? Well, it’s:

  1. ⚑ One of the fastest code editors I’ve used so far. Definitely much more lightweight than PyCharm, while still providing all the functionalities I needed so far. Still, it’s not quick enough to replace my preferred text editor: Sublime Text (which in fact can also be used for some small Python coding).
  2. πŸ₯° Free and open-source. There is just a small licensing caveat mentioned in the VSCodium project. Being honest, things sometimes seem too good to be true, and I hope that Microsoft will not disrupt that.
  3. πŸ›  Highly extendable due to its marketplace of plugins.
  4. πŸ“¦ Easily portable as a web app due to the fact of being based on a JavaScript framework: Electron.
  5. πŸ”„ Way too frequently updated, making it hard to keep up with the changes! Usually, about once per month, the users of VS Code will be greeted with a new tab inside the editor, presenting the latest updates. I always try spending at least some time skimming through the changelog page, as it’s written in an attractive way, surrounded with GIFs.
  6. πŸ’– Having a wonderful community! Recently, VS Code became pretty active on YouTube, sharing release parties, different tips about its extensions or even YouTube shorts (brief clips, usually up to 60 seconds).

Having gathered this bag full of candies, let’s progress with setting it up to its finest!

My user Interface

Before eventually settling down with my current theme, I transitioned through a great part of VS Code’s Marketplace.

For a long time, I applied the default Dark+ theme, where I was only distracted by the bottom blue status bar, so I modified it to a grey one using the script below in JSON settings:

"workbench.colorCustomizations": {
    "[Default Dark+]": {
        "statusBar.background": "#303030",
        "statusBar.noFolderBackground": "#222225",
        "statusBar.debuggingBackground": "#511f1f"
    }
}

Afterwards, I emigrated to a set of more violet rhythms: Amethyst theme, but it wasn’t as easy on my eyes, so I switched to the fashionable Dracula monster. In fact, I liked Dracula so much that I browsed its official website to apply the same theme to my other programs (ConEmu, Ditto, Chrome, and more), even ending up with creating and publishing my own palette for Directory Opus.

When I was already feeling like I’m swimming in the clouds, I added icing on the cake by purchasing the Dracula Pro set of themes. Upon ordering, I additionally received a book about the habits of highly productive developers, which I recently summarized on Goodreads.

Focusing back on my current most favourite VS Code UI, it is composed of:

My VS Code UI
Look of my VS Code instance with Dracula PRO theme and my-terminal (open in new tab)

Certainly, each of us will have his preferred set of colours and panels (conveniently previewed through vscodethemes.com), so I’m curious to see what is your style (don’t hesitate to leave a comment down there)!

There is still more to come, so please do not go anywhere, as all the different visible and non-visible extensions/settings are defined further in this write-up.

Git in VS Code

In the past, I’ve used Git from the CLI, and later through the numerous GUI applications like GitHub Desktop or GitKraken. At last, I settled myself with the simple Source Control panel integrated into VS Code, which can be swiftly accessed through the combination of characters: CTRL + SHIFT + G.

There is not much to say, as after applying some file changes to a folder with an initialized Git repository, VS Code will automatically detect which files were added (A), modified (M), deleted (D) or still reside there as untracked (U). Staging any file is as simple as clicking on the explicit (+) icon next to it, such that later we can continue with typing a message and committing the staged changes. πŸš€

Source Control menu in VS Code
Source Control menu in VS Code with 4 detected changes

On the former screenshot, there is also a non-standard clock and graph icon, which respectively define the Git History and Git Graph extensions that I’m finding quite useful for surfing through the file history. Moreover, I’m ingesting the famous GitLens extension that simply supercharges all the Git operations in VS Code through a separate sidebar menu.

With all that graphical ease of development, I’m not abandoning the in-built terminal, as from time to time it is necessary to rebase my branch of changes by running a couple of handy commands. Now, let’s discuss another built-in feature that is waiting for all the data scientists to investigate.

Jupyter Notebooks for Data Science

Are you still installing Anaconda to interactively use Python (IPython) through the Jupyter Notebook web application? With VS Code, there is no more need to do so, as Anaconda could be replaced by its non-commercial bootstrap version: miniconda, and the data friendly Jupyter Notebooks in VS Code may be operated directly inside another tab. You might only need to pip install ipykernel to start running the calculation cells inside the .ipynb file:

VS Code Jupyter Notebook
Jupyter Notebook inside of VS Code

Apart from keeping our favourite theme, VS Code automatically displays cell execution time, presents a variable pane, allows us to open plots in individual tabs and even generates a table of contents from the markdown entries.

The best part about Jupyter is that recently it is getting a lot of attention in the VS Code releases, making it even more attractive. Nevertheless, for those who are not the biggest fans of .ipynb files, there is also a possibility to run Jupyter-like code cells within Python code (.py) using a # %%Β comment:

VS Code Interactive Python
Running cells within the Python code

This neat trick is quite handy especially for debugging, but I find myself even more often setting conditional breakpoints within the functions, and inspecting the output using The Python Debugger (pdb), which is a part of Python’s standard library.

Okie dokie, how about learning now how to speed our interaction with this wonderful piece of software?

Keyboard shortcuts

As every IDE, VS Code is full of keyboard shortcuts; therefore, the following list is containing the ones I found to be the most practical (on Windows/macOS). If you fancy memorizing all the hotkeys in your long-term memory (using spaced repetition), then I invite you to check my Anki deck of cards: Visual Studio Code shortcuts.

  • Interface 🎨
    • CTRL/CMD + SHIFT + P ← command palette
    • CTRL/CMD + B ← hide/unhide sidebar
    • CTRL + SHIFT + ` ← open/focus on terminal
      • CTRL + ` ← open/close terminal
    • CTRL/CMD + SHIFT + F ← find in files
    • CTRL/CMD + P ← go to file
    • CTRL/CMD + , ← open settings
    • CTRL/CMD + K, M ← change language mode
    • CTRL/CMD + SHIFT + - or + ← reset zoom
    • CTRL/CMD + SHIFT + 0 ← toggle between light/dark theme
    • "code ." ← typed in a terminal opens up a VS Code instance
  • Split mode πŸ‘€
    • CTRL/CMD + \ ← split mode
    • CTRL/CMD + 1 ← switch to editor group 1
    • ALT/OPT, V + L + S ← fold the split view
  • Code πŸ‘¨β€πŸ’»
    • CTRL/OPT + SPACE/ESC ← IntelliSense
    • CTRL/CMD + LMB ← go to code definition
    • CTRL/CMD + / ← comment line of code
    • SHIFT + ALT/OPT + F ← format code
    • CTRL/CMD + SHIFT/OPT + [ or ] ← fold/unfold region
      • CTRL/CMD + K, CTRL/CMD + 0 ← fold all regions
      • CTRL/CMD + K, CTRL/CMD + J ← unfold all regions
    • ALT/OPT + Z ← text wrap
    • F5 ← initialize the debugger
    • F8 ← jump between errors
    • F9 ← set up a breakpoint on the current line. Then hit F5 to initialize the debugger
    • CTRL/CMD + F5 ← run file in terminal
  • Manipulating ✍️
    • CTRL/CMD + D ← select the word your cursor is at
    • CTRL + F2 (or CMD + SHIFT + L) ← select all instances of the word
    • SHIFT + ESC← exit multi-cursor mode
  • Navigating 🀸
    • ALT/OPT + ↑/↓ ← move line up/down
    • CTRL/CMD + ALT/OPT + ↑/↓ ← place a new cursor up/down the line
      • ALT/OPT + LMB ← place an extra cursor anywhere
    • CTRL/CMD + L ← select the current line
    • CTRL/CMD + SHIFT + L ← select all occurrences of current selection
    • ALT/OPT + SHIFT + I ← put the cursor at the end of all selected lines (e.g. with CTRL/CMD+ A). Afterwards, use HOME and END to move from start to end

For a full list of shortcuts, have a look at the official PDF files: Windows, macOS, and Linux.

Python code formatting

While working with Python code, sometimes a blind following of the official PEP 8 style guide can go wrong. Nevertheless, to reduce the confusion among devs, it’s worth keeping the code organized and consistent across each working station such that the code reviews are also faster due to smaller diffs. Now, how can it be achieved?

For instance, the development team can agree to manage all the dependencies using Poetry (keep a pyproject.toml file within a repo) or a requirements.txt file, but more importantly use the same linter and code formatter. Generally, the Pythonic community applies:

  • Flake8 as a linter to apply to PEP8 style guide and signal bugs even before running the code. Alternatively, one may use a more strict Pylint
  • Black code formatter to keep consistent code across projects (e.g., only use double-quotes in strings and keep the code length to 88 characters in a line)
  • isort to sort imports alphabetically, and automatically separated into sections (standard library, third party, local)

Upon accessing the settings of VS Code, we can find out that the Python extension nicely groups the configuration options of Flake8 and Black, which can be promptly opened with CTRL + ,. On the following example, we are extending the code length in each line to 99 characters by adding a simple -l 99 argument:

Black settings in VS Code
Black settings in VS Code

All in all, not everyone may keep the same setup on their machine, so we can enforce specific rules with the use of pre-commit hooks. Thanks to the .pre-commit-config.yaml file in the repo, one could set up hooks for Flake8, Black and isort with specific parameters, in order to make sure that our code is always equally formatted on every git commit.

Anyway, since Python is not the main subject of this post, I recommend having a read of: Python Best Practices for a New Project in 2021 for more tips, which I also summarized in this Twitter thread. In the future, I may write a more detailed view on Python from my perspective.

Remote development

Let’s imagine that you own a Windows machine, and you’re joining a new team that highly integrates their projects with a Linux OS (e.g., extensively relies on Bash scripts). Does it mean that you should straight away abandon Windows and install Ubuntu or some other distribution? Not at all, as there are a couple of extraordinary workarounds!

With VS Code Remote Development option, you can develop everything remotely, reusing only your local VS Code setup (theme and extensions):

VS Code Remote Development
VS Code Remote Development

This approach uses tools or runtimes from the remotely existing development environment, which can be accessed from multiple machines or locations. Besides, it separates our local machine configuration to avoid any unintended development consequences.

Like many other VS Code options, this one is also designed as optional and can be seamlessly installed with a Remote Development extension pack, consisting of these 3 extensions:

After installing all these plugins, we should see a new status bar item in the lower-left corner, as well as the Remote Explorer side menu, presenting an individual view for all the remote targets:

VS Code Remote Explorer
Remote Explorer with 3 available options

With that, in the following example, I will open a new VS Code instance through WSL so that I can easily compile my Bash scripts. If you don’t have yet a WSL on your system, then have a look at this simple official WSL installation guide.

Using merely 2 clicks: New WSL Window using Distro... > Ubuntu, I have connected to the WSL Target (in my case, Ubuntu). All it means is that VS Code started inside of WSL, giving me a much better experience in creating Linux applications straight on my Windows machine.

VS Code WSL Target
Status bar indicating VS Code running through WSL

And in its essence, the same process works for SSH connections or Docker containers! I hope that for you, it also seemed like a much simpler process than installing an isolated VS Code instance inside a virtualization software like VirtualBox. Nonetheless, let’s look into a scenario where for whichever reason we prefer not installing anything locally.

VSCode.dev

No matter what device we are using, recently it’s even easier to develop straight in our browser!

By using the code-server project, we can set up a local VS Code server and keep a consistent development environment on localhost. However, this option may not be easily installable through specific systems like Windows; therefore, you may get a quick glimpse over code-server right now in the browser through a Katacoda scenario. On the other side, the creators suggest using their enterprise developer workspace platform: Coder.

But wait a minute, since a couple of weeks, vscode.dev had its announcement. It still has a couple of limitations over the desktop app, but the main functionality is already there, and after giving it a try I can recommend it with confidence!

As VS Code and GitHub are both owned by Microsoft, the integration between the two is already in place backed by high-performance VMs and identified as GitHub Codespaces. Obviously, it’s not a free feature, which is available only to organization-based subscriptions. As a 2nd option, we have Gitpod, which claims to be more optimized, and on top of that, is available for other code platforms like GitLab.

Luckily, there is also a free web-based GitHub editor, which is ideal for browsing repository files and committing multiple changes, yet it’s not possible to compile files. This editor can be accessed by simply pressing . or changing .com URL part to .dev on any repository/pull request site. It is generally a customized version of vscode.dev, deeply integrated into GitHub.

Well, surely there are more web IDEs, and it is hard to keep track of them. This is why I’m in favour of this browser extension: zvizvi/GitHub-Web-IDE that adds this simple Open In Web IDEΒ button on any repository page:

GitHub Web IDE
GitHub Web IDE extension will remember different online IDEs for us

Alright, let’s get back to the desktop app and see how it could be optimized even further to deliver the best possible experience.

My list of extensions πŸ› 

The categorized extension list beneath is provided with an intention to be constantly updated, such as my list of plugins in the last Anki post. It rather serves as a collection of recommended extensions, since I am not using all of them at the same time:

  • Code completion πŸ€–
  • Data Science πŸ“Š
    • Anaconda Extension Pack ← set of extensions that enhance the experience of Anaconda customers using VS Code
    • DVC ← machine learning experiment management with tracking, plots, and data versioning
  • Debugging πŸ”¨
    • Code Runner ← easily run code snippets/files for multiple languages
    • Debug visualiser ← extension for visualizing data structures while debugging. Like the VS Code’s watch view, but with rich visualizations of the watched value
    • Error Lens ← improve highlighting of errors, warnings, and other language diagnostics
    • Live Preview ← real browser preview inside your editor that you can debug
    • Live Server ← launch a development local Server with live reload feature for static & dynamic pages
    • REST Client ← REST Client for Visual Studio Code
    • Slowbug ← debug (run) your code in slow motion to catch bugs
  • Extra/Other ⭐
    • Compare Folders ← compare folders by contents
    • Live Share ← live-edit (pair programming) a file collectively in your IDE
    • Log File Highlighter ← specify custom words to be highlighted in the log files
    • Open Folder Context Menus for VS Code ← add two new context menus to the Explorer
    • Partial Diff ← compare (diff) text selections within a file, across files, or to the clipboard
    • Project Manager ← easily switch between projects
    • REST Client ← replacement for Postman
    • Settings Sync ← synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist ← now built into VS Code (Code/File > Preferences > Turn on Settings Sync…)
    • Sort JSON ← simple JSON object and array sort
    • vscode-base64 ← base64 encode/decode the current selections
    • YAML Sort ← sort, format and validate yaml files
  • Git πŸ™
    • Git Graph ← view a Git Graph of your repository, and perform Git actions from the graph
    • Git History ← view git log, file history, compare branches or commits
    • GitLens ← git blame annotations and code lens
  • JavaScript πŸ›‘
  • Language support / Linter πŸ‘…
    • AutoHotkey Plus ← AutoHotkey language support for VS Code
    • Better Jinja ← syntax highlighting for jinja(2) including HTML, Markdown, YAML, Ruby and LaTeX templates
    • Docker (tutorial) ← create, manage, and debug containerized applications
    • DotENV ← support for dotenv file syntax
    • Helm Intellisense ← Intellisense in helm-templates from the values.yaml
    • Java in Visual Studio Code ← installer to download all the Java components for you
    • Kubernetes (tutorial) ← develop, deploy and debug Kubernetes applications
    • LTex ← LanguageTool grammar/spell checking
    • ShellCheck ← integrates ShellCheck into VS Code, a linter for Shell scripts
    • VimL (Vim Language, Vim Script) ← Vim Script language support for VSCode
    • VSCode Neovim ← Vim-mode for VS Code using embedded Neovim (here are my Neovim settings)
    • YAML ← YAML Language Support by Red Hat, with built-in Kubernetes syntax support
  • Markdown πŸ“œ
  • Python 🐍
  • Readability πŸ‘“
  • Remote 🏝
  • SQL πŸ—„

Whew, that was quite a few. After listing all these little improvements, let’s focus on its particular set.

Code (AI) autocompletion

According to willrobotstakemyjob.com, computer programmers have a 41% risk of being automated by robots 😰. Yet, before being worried about becoming jobless, let’s use the fruits of AI for autocompleting our code.

So far, my experience in the usage of AI code assistants is quite limited; however, I have stumbled upon two popular solutions: Kite and Tabnine, and I am planning to give a try to the third/latest one: GitHub Copilot. Out of these three options, the first two are quite similar in providing more sophisticated suggestions than the original IntelliSense built into VS Code. For example, here is how Tabnine suggests completing our code as we type (nonetheless, I highly recommend visiting the linked product webpages for some interactive demos):

Tabnine suggestions
The first 2 suggestions in the list come from Tabnine (free) extension

On the other side of the ring, we have a plugin developed by GitHub and OpenAI, announced this June 2021. As we may assume from the collaboration with OpenAI, the completions of GitHub Copilot are much more extended, bringing programmers even closer to the extinction πŸ¦•. While I am scribing these words, Copilot is still under a technical preview phase, although, one can already give it a try, ideally by following the Getting Started page on GitHub docs.

Not to prolong this monologue, considering my limited experience and usage of these tools, let’s compare them with this simple table (data gathered on 14/11/2021):
Kite Tabnine GitHub Copilot
πŸ’Έ Pricing Free (Pro version is discontinued) Free (Pro version costs $12 per month per user) Free (commercial version is planned after the technical preview)
πŸ’» Supported languages Over 16 languages
(full list)
over 30 languages, libraries & frameworks
(full list)
Technical preview does especially well for Python, JavaScript, TypeScript, Ruby, Java, and Go, but it should work with anything
🀝 Integrations Over 16 IDEs
(full list)
Currently 21 IDEs (full list) Currently Visual Studio Code, Neovim, and JetBrains IDEs like PyCharm and IntelliJ IDEA
⭐ GitHub stars 508
(for vscode-plugin)
8.8k 6k
(for copilot-docs)
πŸ’Ύ VS Code extension installs 3059k
(extension page)
2824k
(extension page)
577k
(extension page)
πŸ… VS Code extension rating 3.3/5 out of 119 ratings 4.3/5 out of 336 ratings 4.3/5 out of 266 ratings

Summarizing its content, and watching different YouTube videos comparing the 3 options, my ultimate recommendation is the following:

  • choose Tabnine for a stable, promising and simple code completion
  • experiment with GitHub Copilot for the most automated experience

Okay, enough of wasting time with adjusting our environment. Let’s get our hands dirty!

Hands-on VS Code tutorials

If you still did not give it a try, please go ahead and download VS Code. Being a more advanced user, you can also consider the entirely MIT-licensed VSCodium version, since the official VS Code product available for download is not completely under the FLOSS licence, which I was informed about in my recent Reddit post. Afterwards, you might want to install Python through such version managers as miniconda or pyenv, and later continue dependency management with Poetry.

Once you are ready, I could optionally recommend getting slightly more familiarized with VS Code through a set of quick videos in their docs: Getting started with Visual Studio Code.

At last, the official docs will hold our hand to familiarize us with different set of languages (C++, Java, JavaScript, Python…) and domains (Containers/Docker, Data Science…).

VS Code docs
Menu of VS Code docs

As I already went through most of the Python, Containers and Data Science content, I can greatly advise these sections, since they not only introduce some theory and practice, but present you with some neat VS Code tricks around these technologies.

Awesome afterword

In the end, let me leave you with some awesome redirections:

With that, don’t forget to check the hands-on tutorials referenced in the section above. Once you are a bit more advanced into programming, and would like to contribute to the global community, why not fancy of writing your own extension? If so, there is no time to lose but to follow your first VS Code extension guide.

No matter what will you code, have a happy VSCoding time! πŸŽ‰πŸ‘¨β€πŸ’»πŸŽŠ

New posts by e-mail
Did you like this post? Get the upcoming content first (+ free e-book)!
No spam, no worries.

Best way to like my articles

Thanks to people like you, there are still independent authors like me on the Internet.
Feel free to buy me some Yerba Mate to boost my creativity for another article! πŸ™‚

Donate via PayPal

2 Comments

  1. Hi, could you please tell me how do you set VSCode to see which person or user inserted code lines into the files? Is it an extension or a particular config to enable? Thanks!

2 Trackbacks / Pingbacks

  1. Add an awesome table of contents (TOC) to your blog posts - Educatque
  2. issue-186 - iTry | Open Source Community

Leave a Reply