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: 🐕🐷🐀🐂🐯🐰🐲🐍🐴🐑🐒🐓
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)
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
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,
Remote SSH
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,
Live Server
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
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
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
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",
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,
This one is rather minor, when restarting the Jupyter Notebook kernel, you won't be asked to confirm it:
"python.dataScience.askForKernelRestart": false,
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",
],
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",
],
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,
The default Python interpreter for the workspace if it is not yet selected:
"python.pythonPath": "/usr/bin/python3",
The Python extension has an annoying welcome page that should be turned off:
"python.showStartPage": false,
Python Docstring Generator
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": "'''",
Quick and Simple Text Selection
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
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"],
Rainbow CSV
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
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
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,
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": [""]
}],
I found that leader on "," works the best for me:
"vim.leader": ",",
To set up emulation of easymotion-vim and surround.vim, add these:
"vim.easymotion": true,
"vim.surround": true,
Sourcing the .vimrc if you have any:
"vim.vimrc.enable": true,
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",
},
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,
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,
The absence of autocompletion in strings and comments is one of my least favorite default settings in VSCode:
"editor.quickSuggestions": {
"strings": true,
"comments": true,
},
I like my snippets to appear above other auto-completion suggestions. It facilitates faster coding:
"editor.snippetSuggestions": "top",
Show the path to the opened file in the window name:
"window.title": "${activeEditorLong}",
Display the whitespaces and other control characters (remember the "hidden text" in MS Word?):
"editor.renderWhitespace": "all",
"editor.renderControlCharacters": true,
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,
I kept it on for a long time, persuading myself that it is useful (not really):
"editor.minimap.enabled": false,
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",
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",
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",
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",
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",
"If you don't know history you are doomed to repeat it" 😁:
"terminal.integrated.scrollback": 10000,
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",
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,
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,
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,
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,
},
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,
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,
Making the diff editor more verbose as well:
"diffEditor.ignoreTrimWhitespace": false,
Changing the debug console font size to match the terminal and editor's:
"debug.console.fontSize": 14,
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. 🤗
Top comments (2)
nice list.. thank you
good list.