TheLazy.Dev
Portfolio GitHub

Blog

vscode |python

VSCode Customization: Supercharge Your IDE

iashin

Vladimir Iashin

Posted on February 7, 2021

VSCode Customization: Supercharge Your IDE

Hi, Dev πŸ‘‹. Here is yet another note on VSCode customization. It contains a list of cool extensions 🧩 and settings πŸŽ› that I found exceptionally useful in my daily coding routine. I composed it for my personal website and decided to repost it here to say "hello world" to Dev.to πŸ€—

It was a Saturday evening. I found myself looking for how other people are using VSCode. I was interested in ways my experience with my favorite IDE could be improved.

Somehow the amount and quality of videos on YouTube, guides, and tutorials online haven't fully covered my regular need for these vitamins and I decided to start with myself! Here I list of my best-loved extensions and settings for VSCode. So, seat back, relax, and enjoy the scene! πŸš€

Extensions 🧩

One of those things I ❀️ about VSCode is how customization becomes a part of any coder's life. The IDE, by itself, doesn't come with lots of pre-installed things making it super-lightweight and crispy. Extensions lie at the very heart of the customization experience. Here I provide my selection of the coolest extensions for VSCode for 2️⃣0️⃣2️⃣1️⃣.

:emojisense: πŸ•πŸ·πŸ€πŸ‚πŸ―πŸ°πŸ²πŸπŸ΄πŸ‘πŸ’πŸ“

Alt Text

Sup Dawg, I heard you like emojis... :emojisense: is one of my favorite extensions as it allows you to add emojis to your code and, even, in the commit message field. Got used to slack experience or just out of words when a friend of yours does git push origin main --force πŸ’”. Well, you are welcome!

Bracket Pair Colorizer 2 (yes, the second)

Alt Text

I guess there is not much to discuss here. It will color the corresponding level of the nested brackets for you. So, now you can go crazy with your favorite for-comprehensions without a SyntaxError πŸ˜‰.

Path Intellisense

Alt Text

Somehow VSCode doesn't come with good support for path autocompletion out-of-the-box. For this reason, you will need an extension to back you up. I tried several different ones. Sadly, I couldn't select my fav as they all are a bit clumsy. So, I am just sticking with the most popular one 🀷.

For it to work, you should turn off the VSCode's default path autocompletion in User Settings.

"typescript.suggest.paths": false,
Enter fullscreen mode Exit fullscreen mode

Remote SSH

Alt Text

This is hands down the most important extension in VSCode for me πŸ™. I gave up Jupyter in favor of VSCode just because it has this extension. Remote SSH allows you to edit, run, debug, type, test, lint, search files your code – everything you can do in VSCode on your local machine can be done on a remote including Docker. It doesn't require any special installation on the remote machine or that tedious folder mounting – it just works πŸ‘!

Note: the extension is developed by Microsoft and this is one of those famous VSCode "killer features" which is actually not open source. Yes, it is free and even has a GitHub repo but there is no source code, only issues

For the best experience increase the time you need to type credentials when connecting before it will reload the window (annoying!).

"remote.SSH.connectTimeout": 1200,
Enter fullscreen mode Exit fullscreen mode

Live Server

Alt Text

Sometimes I need to compose a bit of HTML with CSS. Live Server allows you to see a "Live" Preview of the changes just like in Brackets.

vscode-pdf

Don't ask me why 🀫 but occasionally I have a .pdf somewhere near my code and I would like to open it without downloading. Wait, what? You as well? OK, this extension does exactly this.

CSS Peek

Alt Text

This one is also quite nice πŸ€—. Often you would like to Go to the Definition of the class in a tag that is defined somewhere in your source code. This extension works similar to the VSCode ecosystem.

HTMLHint

Alt Text

Checks your HTML files against some simple rules e.g. that src is not empty and if the quotes are used to surround an attribute value.

Markdown All in One

Alt Text

One of my favorite ⭐ extensions which I use daily. It supercharges your Markdown editing experience with many useful tools like a short-cut to check TODO checkboxes, adding a link by enclosing the selected text with proper brackets, italicize, or bold the text, automatically append new items to a list with proper indentation and show you a live preview (WYSIWYG-style).

Python and Pylance

I wasn't sure if I need to mention the Python extension because you know about it already if you ever programmed in Python in VSCode. So, I would only share the proper settings for it. With Python, I love to use Pylance which is the best language server for Python. It supports auto-import, type checking (like in mypy), and it is fast πŸƒπŸ’¨.

Note: Pylance is the Python language server for VSCode developed by Microsoft. Along with Remote SSH and Docker extensions, Pylance is also free but has closed source code πŸ™. If you don't like that it is closed, you may try another one – luckily in VSCode it is just one line of code.

To activate Pylance you'll need to install the Pylance extension and specify it in settings:

"python.languageServer": "Pylance",
Enter fullscreen mode Exit fullscreen mode

If it is "true", once you start a new terminal, it will automatically activate (source) the same virtual environment (conda) as your VSCode interpreter. I found it to be useful on clusters where sourcing the virtual environment takes some time:

"python.terminal.activateEnvironment": false,
Enter fullscreen mode Exit fullscreen mode

This one is rather minor, when restarting the Jupyter Notebook kernel, you won't be asked to confirm it:

"python.dataScience.askForKernelRestart": false,
Enter fullscreen mode Exit fullscreen mode

By default, autopep8 breaks your code with code after 80 symbols. If your ruler(s) are configured to be different than 80 symbols (e.g. 110) the autopep8 behavior becomes a bit annoying. To prevent it from wrapping long lines, use this setting:

"python.formatting.autopep8Args": [
    "--max-line-length=110",
],
Enter fullscreen mode Exit fullscreen mode

I am using flake8 linter because Pylint has some issues with PyTorch, numpy, and cv2. It also will throw you a warning if your code is longer than 80 symbols. We will change this and use some more ignore rules. Please, see the description of the ignored codes here:

"python.linting.flake8Enabled": true,
"python.linting.flake8Args": [
    "--max-line-length=110",
    "--ignore=W293,E302,E266,W391,E402,E226,W291,E116,E502",
],
Enter fullscreen mode Exit fullscreen mode

I like my Jupyter Notebooks to look white if I ever open them. Ignoring the VSCode theme does the trick for me:

"python.dataScience.ignoreVscodeTheme": true,
Enter fullscreen mode Exit fullscreen mode

The default Python interpreter for the workspace if it is not yet selected:

"python.pythonPath": "/usr/bin/python3",
Enter fullscreen mode Exit fullscreen mode

The Python extension has an annoying welcome page that should be turned off:

"python.showStartPage": false,
Enter fullscreen mode Exit fullscreen mode

Python Docstring Generator

Alt Text

Creates a docstring template for your Python 🐍 function accounting for arguments and return types. Now you don't have any excuse to skip writing a docstring for your bad boys πŸ’ͺ.

I like to use single quotes (''') instead of double ones (""") across all Python code. Hence, the setting:

"autoDocstring.quoteStyle": "'''",
Enter fullscreen mode Exit fullscreen mode

Quick and Simple Text Selection

Alt Text

When I am writing my code, I often work with file paths. A common use-case is when you are inside of the 'quotes' and would like to copy the content inside of them a paste somewhere else and just remove the whole thing. I needed it that often so I even learned those awkward shortcuts (chords). It is one of those awesome things you would like to have but don't want to learn Vim πŸ˜ƒ.

Resource Monitor

Alt Text

Sometimes I share a GPU machine with others and the disk space should be watched over as datasets or saved logs can be very hungry for your Gigabytes. Othertimes, I just want to quickly get the sense of the CPU and RAM state without running htop πŸ¦₯. For all of these, I am using Resource Monitor πŸ“ˆ which shows those in your status bar.

By default, it shows only CPU and RAM. Add these lines to also track your disks:

"resmon.show.disk": true,
"resmon.disk.format": "PercentUsed",
"resmon.disk.drives": ["/dev/sda4", "/dev/sda3", "/dev/sdb1", "/dev/nvme0n1p1"],
Enter fullscreen mode Exit fullscreen mode

Rainbow CSV

Alt Text

Ever tried to open and edit a wide CSV? "Ok, I am fixing the seventh column in this row. Then, I need to find the seventh column in the next row: one, two, three... (counting commas)" – Yikes πŸ˜’! Rainbow CSV 🌈 will help you with this. It will color the content of each column and tell show the header of that column making it easier to navigate and edit.

PyTorch Snippets

Alt Text

I am a huge fan of VSCode snippets. They are efficient and easy to get used to. These are for PyTorch but you can find snippets for many other frameworks and tools πŸš€.

Vim Emulator

Alt Text

This extension tries to emulate the vim behavior in VSCode. Initially, I thought it will just nail the vim-like approach to editing but it actually also works in some VSCode windows e.g. Explorer tab (nice! πŸ”₯).

By default, Vim yanks info into "registers" and when you copy-paste from the web it is not on your clipboard:

"vim.useSystemClipboard": true,
Enter fullscreen mode Exit fullscreen mode

This allows you to exit the "insert" mode with "jj". Sashulya says it is a "must" when using vim:

"vim.insertModeKeyBindings": [{
"before": ["j", "j"],
"after": [""]
}],
Enter fullscreen mode Exit fullscreen mode

I found that leader on "," works the best for me:

"vim.leader": ",",
Enter fullscreen mode Exit fullscreen mode

To set up emulation of easymotion-vim and surround.vim, add these:

"vim.easymotion": true,
"vim.surround": true,
Enter fullscreen mode Exit fullscreen mode

Sourcing the .vimrc if you have any:

"vim.vimrc.enable": true,
Enter fullscreen mode Exit fullscreen mode

General Settings βš™οΈ

Besides Extensions 🧩, I really ❀️ the VSCode's approach to User Settings. Nearly everything can be customized. Here I provide a set of useful settings that will supercharge your VSCode πŸ’ͺ.

Monokai Theme πŸ‘

Prior to VSCode, I was using Sublime Text 3 just for note-taking or opening text files. I think that Sublime's theme (Monokai) is the best theme for VSCode or any IDE, actually. It is not very dark and not very bleak, it is rather colorful and just pleasant to look at. The function calls, classes, and their methods will be highlighted for you. Monokai is good but you will have to change some small things to make it a bit more contrast in some places. Also, the coolest thing is the terminal border color. It is useful when you have several terminals on top of one another:

"workbench.colorTheme": "Monokai",
"workbench.colorCustomizations": {
    "diffEditor.removedTextBackground": "#bb3d3d55",
    "diffEditor.insertedTextBackground": "#4bb36255",
    "editor.selectionBackground": "#135564",
    "editor.selectionHighlightBackground": "#135564",
    "terminal.border": "#ffffff",
},
Enter fullscreen mode Exit fullscreen mode

Editor πŸ‘¨β€πŸ’»

Most of your interaction with IDE is happening in Editor where you do your rocket science πŸš€. Similar to selecting a mattress for your bed πŸ›οΈ, you should be meticulous to the highest degree improving your Editor because even small productivity improvements would benefit you in the long-term.

When I type I want to see the autocompletion options ASAPπŸ’¨!

"editor.quickSuggestionsDelay": 0,
Enter fullscreen mode Exit fullscreen mode

When I am copying some code, I would like it to be formatted on-paste according to the code formatter I am using (e.g. autopep8):

"editor.formatOnPaste": true,
Enter fullscreen mode Exit fullscreen mode

The absence of autocompletion in strings and comments is one of my least favorite default settings in VSCode:

"editor.quickSuggestions": {
    "strings": true,
    "comments": true,
},
Enter fullscreen mode Exit fullscreen mode

I like my snippets to appear above other auto-completion suggestions. It facilitates faster coding:

"editor.snippetSuggestions": "top",
Enter fullscreen mode Exit fullscreen mode

Show the path to the opened file in the window name:

"window.title": "${activeEditorLong}",
Enter fullscreen mode Exit fullscreen mode

Display the whitespaces and other control characters (remember the "hidden text" in MS Word?):

"editor.renderWhitespace": "all",
"editor.renderControlCharacters": true,
Enter fullscreen mode Exit fullscreen mode

I am not very fond of the default PEP8 80-symbol line limit. Why? Here is Linus' note (TL;DR: no one has 80-symbol long terminals anymore, and even if you do, don't let us suffer). Ok ok, he is about Linux kernel but anyway! Why 110? Because this is a "safe" length for displaying the code at GitHub as it will not create a horizontal scroll (the worse scrolling experience – not only on GitHub but in the editor as well). I also keep the editor's font to be 14 points:

"editor.rulers": [
    110
],
"editor.wordWrap": "on",
"editor.fontSize": 14,
Enter fullscreen mode Exit fullscreen mode

I kept it on for a long time, persuading myself that it is useful (not really):

"editor.minimap.enabled": false,
Enter fullscreen mode Exit fullscreen mode

This one is a bit hard to explain. The setting controls the hover position selected when the autocompletion list appears. If it is not "first" it will pre-select the recently used one rather than the top suggestion:

"editor.suggestSelection": "first",
Enter fullscreen mode Exit fullscreen mode

Imagine you are using some auto-formatter (e.g. autopep8) on save and you would like to make a minor change in the cloned code. You make your changes, save the file, and see lots of changed lines that your auto-formatter made. This setting will only apply the formatter on the modified git area – handy, right?

"editor.formatOnSaveMode": "modifications",
Enter fullscreen mode Exit fullscreen mode

This one is useful when you are using Vim. It will display the current line number and relative line number to the current one:

"editor.lineNumbers": "relative",
Enter fullscreen mode Exit fullscreen mode

Terminal 🟩

The second most used thing in VSCode for me is Terminal and, therefore, it requires special attention as well.

Never found the block-style cursor β–‹ to be attractive and was always replacing it with a "beam" |. The font size in the terminal is up to you but I am using 14 pt – the same as in Editor:

"terminal.integrated.fontSize": 14,
"terminal.integrated.cursorStyle": "line",
Enter fullscreen mode Exit fullscreen mode

I am using zsh (with ohmyzsh) everywhere, so I need to tell VSCode that I am using it, otherwise it will initialize bash shell 🐚:

"terminal.integrated.shell.linux": "/bin/zsh",
"terminal.integrated.shell.osx": "/bin/zsh",
Enter fullscreen mode Exit fullscreen mode

"If you don't know history you are doomed to repeat it" 😁:

"terminal.integrated.scrollback": 10000,
Enter fullscreen mode Exit fullscreen mode

Layout πŸŽ› ️

These are the settings are more high-level and will affect the VSCode window layout.

Firstly, you might want to keep the sidebar (it's where your files/extensions/git are by default) on the right side πŸ‘‰. Secondly, the workbench panel (it's where your terminal/output/debug by default are) should be on the left πŸ‘ˆ:

"workbench.sideBar.location": "right",
"workbench.panel.defaultLocation": "left",
Enter fullscreen mode Exit fullscreen mode

The third (optional) thing is to save some horizontal real estate by hiding the activity bar (it is that narrow-tall leftmost column which you click to open Explorer/Version Control/Extensions/Docker). Once it's hidden, use Command Pallete to open them (Cmd/Ctrl+Shift+p) or assign some shortcuts:

"workbench.activityBar.visible": false,
Enter fullscreen mode Exit fullscreen mode

Finally, VSCode highlights and, if hidden, reveals the Explorer when you switch the file you edit. This is a bit annoying, especially if the folder with that file contains lots of other files:

"explorer.autoReveal": false,
Enter fullscreen mode Exit fullscreen mode

Working with files πŸ—„οΈ

VSCode has a lot of nice options that are disabled by default and will automate your workflow with files️.

To start the ball rolling, tell your VSCode to do the boring things for you automatically on-save, namely, to trim extra whitespaces, final empty newlines, and insert just one newline at the end:

"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
Enter fullscreen mode Exit fullscreen mode

Next, I like my Explorer to be as verbose as possible in terms of the folders it shows. At the same time, I don't want to search through the .git folder:

"files.exclude": {
    "**/.DS_Store": false,
    "**/.git": false,
    "**/.hg": false,
    "**/.svn": false,
    "**/CVS": false,
},

"search.exclude": {
    "**/.git": true,
},
Enter fullscreen mode Exit fullscreen mode

Miscellaneous 🎚️

The rest of the settings that do not fall into any of the previous sections.

If you don't want to send anonymized data and analytics to Microsoft, you can disable the telemetry:

"telemetry.enableCrashReporter": false,
"telemetry.enableTelemetry": false,
Enter fullscreen mode Exit fullscreen mode

When configuring git, you might want to tell VSCode to ignore the legacy warning when you are using an old version of git. Also, I am not very happy with a close VSCode ❎ GitHub integration and I'd rather type my login and pass every time:

"github.gitAuthentication": false,
"git.ignoreLegacyWarning": true,
Enter fullscreen mode Exit fullscreen mode

Making the diff editor more verbose as well:

"diffEditor.ignoreTrimWhitespace": false,
Enter fullscreen mode Exit fullscreen mode

Changing the debug console font size to match the terminal and editor's:

"debug.console.fontSize": 14,
Enter fullscreen mode Exit fullscreen mode

Final thoughts πŸ‘‹

My message in this note boils down to the following: "Master your IDE early πŸ’ͺ". If your everyday work πŸ‘·β€β™€οΈ or study πŸŽ“ routine involves a lot of coding, mastering your favorite IDE will significantly increase your development speed in the long-term. There are several good IDEs out there (Jupyter Notebook is not included in this 😼): PyCharm (for Python mostly), Vim (a bit awkward navigation at first but cool), Emacs (the navigation is also a bit strange but ok if you got used to it). I ❀️ VSCode and I hope you at least like it as well. These settings and extensions made me enjoy coding a lot more than before. There is still one part uncovered which is Keyboard Shortcuts. If you would like me to share them in similar manner, let me know by sending me an email or creating an issue on GitHub.

This guide was composed during the Christmas holidays πŸŽ„ in 2020 and it reflects the settings I used in 2020 😷. I am planning to update this post if more cool stuff will come up.

I will leave you here with a couple of nice things to check out if you like this kind of content:

Friendly SWE Guide Manifesto by Alex Lapin

Python Essentials – a pack of useful Python extensions for VSCode

If you found it interesting, I would be happy to know about it. So, feel free to drop me a message on LinkedIn or Twitter. I also have an active GitHub profile where I keep track of my and personal projects. πŸ€—

πŸ’– πŸ’ͺ πŸ™… 🚩
iashin
Vladimir Iashin

Posted on February 7, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

The beginning Of My New Journey
beginners The beginning Of My New Journey

November 22, 2024

Setting up an integrated terminal in visual studio code to be able to use Python interpreter in a virtual environment.
undefined Setting up an integrated terminal in visual studio code to be able to use Python interpreter in a virtual environment.

November 19, 2024

VSCode language mode association for subfolders and special characters folders
vscode VSCode language mode association for subfolders and special characters folders

October 31, 2024

VSCode extensions are not removed from file system even after uninstalling, I created a solution !
vscode VSCode extensions are not removed from file system even after uninstalling, I created a solution !

September 25, 2024

Contributing to Other Open Source Projects - Week 2
undefined Contributing to Other Open Source Projects - Week 2

October 15, 2024