Reading Time β 27 minutes
You can find my VS Code profile under gist.github.com.
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++
andC#
(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)
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:
- β‘ 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).
- π₯° 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.
- π Highly extendable due to its marketplace of plugins.
- π¦ Easily portable as a web app due to the fact of being based on a JavaScript framework: Electron.
- π 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.
- π 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:
- Dracula Pro theme
- Material Icon Theme set of icons
- Personally customized terminal: my-terminal with Starship prompt
- Two main fonts
- Consolas (primary editor font)
- Jetbrains Mono of weight 350 (terminal’s powerline font with a support for special characters like Git branches)
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. π
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:
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:
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 paletteCTRL/CMD
+B
β hide/unhide sidebarCTRL
+SHIFT
+`
β open/focus on terminalCTRL
+`
β open/close terminal
CTRL/CMD
+SHIFT
+F
β find in filesCTRL/CMD
+P
β go to fileCTRL/CMD
+,
β open settingsCTRL/CMD
+K
,M
β change language modeCTRL/CMD
+SHIFT
+-
or+
β reset zoomCTRL/CMD
+SHIFT
+0
β toggle between light/dark theme"code ."
Β β typed in a terminal opens up a VS Code instance
- Split mode π
CTRL/CMD
+\
β split modeCTRL/CMD
+1
β switch to editor group 1ALT/OPT
,V
+L
+S
β fold the split view
- Code π¨βπ»
CTRL/OPT
+SPACE/ESC
β IntelliSenseCTRL/CMD
+LMB
β go to code definitionCTRL/CMD
+/
β comment line of codeSHIFT
+ALT/OPT
+F
β format codeCTRL/CMD
+SHIFT/OPT
+[
or]
Β β fold/unfold regionCTRL/CMD
+K
,CTRL/CMD
+0
β fold all regionsCTRL/CMD
+K
,CTRL/CMD
+J
β unfold all regions
ALT/OPT
+Z
β text wrapF5
β initialize the debuggerF8
β jump between errorsF9
β set up a breakpoint on the current line. Then hitF5
to initialize the debuggerCTRL/CMD
+F5
β run file in terminal
- Manipulating βοΈ
CTRL/CMD
+D
β select the word your cursor is atCTRL
+F2
(orCMD
+SHIFT
+L
) β select all instances of the wordSHIFT
+ESC
β exit multi-cursor mode
- Navigating π€Έ
ALT/OPT
+β/β
β move line up/downCTRL/CMD
+ALT/OPT
+β/β
β place a new cursor up/down the lineALT/OPT
+LMB
β place an extra cursor anywhere
CTRL/CMD
+L
β select the current lineCTRL/CMD
+SHIFT
+L
β select all occurrences of current selectionALT/OPT
+SHIFT
+I
β put the cursor at the end of all selected lines (e.g. withCTRL/CMD
+A
). Afterwards, useHOME
andEND
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:
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):
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:
- Remote – Containers (tutorial) β to run Visual Studio Code in aΒ Docker container
- Remote – SSH (tutorial) to access a remote computer or virtual machine securely over a network connection
- Remote – WSL (tutorial) to get a Linux-powered development experience in the Windows Subsystem for Linux (WSL)
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:
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.
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:
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 π€
- Blackbox β code as fast as you think
- GitHub Copilot (tutorial) β AI pair programmer
- GitHub Copilot Labs β experimental features for GitHub Copilot
- Kite β AI autocompletion & documentation
- Tabnine Autocomplete AI β AI code completion tool
- 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 π‘
- D3.js Snippets β d3.js development toolkit
- JavaScript (ES6) code snippets β code snippets for JavaScript in ES6 syntax
- Jest β interactive testing for JavaScript, TypeScript and more
- 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 π
- Markdown All in One β keyboard shortcuts, table of contents, auto preview and more
- markdownlint β Markdown linting and style checking for Visual Studio Code
- Markdown Shortcuts β generate Markdown syntax with shortcuts
- Python π
- AREPL for python β print code output in real time
- autoDocstring – Python Docstring Generator β generate python docstrings automatically
- Pylance β performant, feature-rich language server for Python in VS Code
- Python β IntelliSense (Pylance), Linting, Debugging (multi-threaded, remote), Jupyter Notebooks, code formatting, refactoring, unit tests, and more
- Python Indent β correct python indentantion
- Python Path β Python import utils
- Python Preview β provide preview for Python execution
- Python Snippets 3 β new auto suggestion for Python updated in 2022
- Readability π
- :emojisense: β add suggestions and autocompletions to emojis
Bracket Pair Colorizer 2 β don’t be lost in the forest of { }β since version 1.60 it’s built-in (10,000x faster) feature- indent-rainbow β make indentation easier to read
- Prettier – Code formatter β enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary
- Rainbow CSV β highlight CSV and TSV files in different colors, Run SQL-like queries
- Todo Tree β show TODO, FIXME, etc. comment tags in a tree view
- swapdiff β quickly swaps out documents open in diff mode
- Remote π
- Remote Development β extension pack including the following 3 extensions:
- Remote – Containers (tutorial) β work with a separate toolchain or container-based application inside (or mounted into) a container
- Remote – SSH (tutorial) β connect to any location by opening folders on a remote machine/VM using SSH
- Remote – WSL (tutorial) β get a Linux-powered development experience in the Windows Subsystem for Linux
- Remote Development β extension pack including the following 3 extensions:
- SQL π
- SQLTools – Database tools (YouTube tutorial) β database management done right. Connection explorer, query runner, intellisense, bookmarks, query history
- SQL Server (mssql) β develop Microsoft SQL Server, Azure SQL Database and SQL Data Warehouse everywhere
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):
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.
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…).
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:
- Awesome VS Code repository
- DEV.to user posts on #vscode
- vscode subreddit
- the official VS Code
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! ππ¨βπ»π
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!
Hi Fernando, you can get this information simply by installing the GitLens extension: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens