Hallo, Gleb Kotovsky is here!
Setting up a development environment can significantly enhance your productivity and overall enjoyment. After about four years as a developer and experimenting with various IDEs, I finally settled (for now XD) on VS Code as my go-to tool. Although I dabbled with Vim for a few years—thanks to the inspiration from several devaslife videos—I always found myself returning to VS Code, the platform where my development journey began.
My exposure to Vim has deeply influenced my workflow, particularly in how I navigate and edit code. In a future post, I plan to explore my Neovim tmux setup in detail, sharing why I love this configuration and how it complements my work.
However, In this post, I’ll share my VS Code setup, including my preferred extensions, shortcuts, and themes. If you'd like to try it out for yourself, I’ve attached a Gist link at the end of this post and Prerequisites section, or you can follow along with the settings step-by-step. So, let's begin!
Final Results
1) General look
2) Folder sidebar + Icons
4) Minimalistic theme + font family
uses the latest vue extension that really works well
- plugin that autocompletes filenames
- Auto rename paired HTML/XML tag
- Indented Sass syntax Highlighting, Autocomplete & Formatter
- Code formatter using prettier
Additional settings
- Sort ES6 imports automatically.
- Automatically searches for TypeScript definitions in workspace files and provides all known symbols as completion items to allow code completion.
- Finds files and text within files, but faster than VS Code normally does.
Better Errors
- Improve highlighting of errors, warnings and other language diagnostics.
Productivity Tools
- Highlight TODOs, FIXMEs, and any keywords, annotations
- Vim emulation for Visual Studio Code.
- Language support for MDX.
- Support for dotenv file syntax
- Intelligent Tailwind CSS tooling for VS Code.
- Language support for Astro
Theming
- Beatiful Icons theme
Prerequisites
Before changing the configuration in VSCode I highly recommend saving the existing one. If you don't want to follow step-by-step, then you can import the configuration from my
SOCIAL SHARE CARD GENERATOR