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

3) Better find files / like a telescope.vim

4) Minimalistic theme + font family

Ingredients

Vue extension box

This extensions pack uses the latest vue extension that really works well

Vue Official - Official Language Support for Vue
Path Intellisense - plugin that autocompletes filenames
Auto Close Tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
Auto Rename Tag - Auto rename paired HTML/XML tag
ESLint - Integrates ESLint JavaScript into VS Code.
Sass - Indented Sass syntax Highlighting, Autocomplete & Formatter
SCSS Formatter - A Visual Studio Code Extension to format SCSS
Prettier - Code formatter - Code formatter using prettier

Additional settings

Apc Customize UI++ - Advanced VSCode user interface customizations. Very experimental.

sort-imports - Sort ES6 imports automatically.

Auto import- Automatically finds, parses and provides code actions and code completion for all available imports

TypeScript Importer - Automatically searches for TypeScript definitions in workspace files and provides all known symbols as completion items to allow code completion.

Colorize - A vscode extension to help visualize css colors in files.

Find It Faster - Finds files and text within files, but faster than VS Code normally does.

Better Errors

Pretty TypeScript Errors - Make TypeScript errors prettier and more human-readable in VSCode.

Error Lens - Improve highlighting of errors, warnings and other language diagnostics.

Productivity Tools

Codeium: AI - AI Coding Autocomplete and Chat

TODO Highlight - Highlight TODOs, FIXMEs, and any keywords, annotations

Smart Clicks - Smart selection with double clicks.

VSCodeVim - Vim emulation for Visual Studio Code.

WakaTime - Metrics, insights, and time tracking automatically generated from your programming activity.

Markdown

MDX- Language support for MDX.

MDX Preview - MDX Preview.

LSP and syntax support

DotENV - Support for dotenv file syntax
vscode-styled-components - Syntax highlighting for styled-components.

Tailwind CSS IntelliSense - Intelligent Tailwind CSS tooling for VS Code.

PostCSS Language Support - Syntax highlighting for modern and experimental CSS in VSCode.

Astro - Language support for Astro

Theming

oh lucy - A re-upload of a soft but clear syntax theme.

Bearded Icons - 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 gist

Settings Config

Below is the JSON configuration for my development environment. To apply this, press:

Mac: CMD + SHIFT + P
Windows/Linux: CTRL + SHIFT + P

In the command palette, type Preferences: Open Settings (JSON) and paste the following JSON objects at the end of your existing configuration.

General Git Configuration

{
    "git.confirmSync": false // Disable confirmation for Git sync
}

Editor Configuration

{
    "editor.fontFamily": "Fira Code", // Font family for the editor
    "editor.fontLigatures": true, // Enable font ligatures
    "editor.fontSize": 16, // Font size
    "editor.smoothScrolling": true, // Enable smooth scrolling
    "editor.tokenColorCustomizations": {
        "keywords": "#25a6b2", // Color for keywords
        "comments": "#5f595e" // Color for comments
    },
    "editor.renderWhitespace": "none", // Whitespace rendering options
    "editor.renderControlCharacters": false, // Control character rendering
    "editor.wordWrap": "on", // Enable word wrapping
    "diffEditor.wordWrap": "off", // Disable word wrapping in diff editors
    "editor.lineNumbers": "on", // Show line numbers
    "editor.minimap.enabled": false, // Disable the minimap
    "editor.hideCursorInOverviewRuler": true, // Hide cursor in overview ruler
    "editor.overviewRulerBorder": false, // Disable overview ruler border
    "editor.scrollbar.horizontal": "hidden", // Hide horizontal scrollbar
    "editor.scrollbar.vertical": "hidden", // Hide vertical scrollbar
    "editor.lineHighlightBackground": "#93a1382d", // Line highlight background color
    "editor.lineHighlightBorder": "#9fced11f", // Line highlight border color
    "editor.cursorBlinking": "phase", // Cursor blinking style
    "editor.cursorSmoothCaretAnimation": "on", // Enable smooth caret animation
    "editor.bracketPairColorization.enabled": false, // Disable bracket pair colorization
    "editor.guides.indentation": false, // Disable indentation guides
    "editor.guides.bracketPairs": false, // Disable bracket pair guides
    "editor.renderLineHighlight": "none", // Line highlight rendering mode
    "editor.showFoldingControls": "never" // Folding controls visibility
}

Eslint

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit" // Apply ESLint fixes on save
    }
}

Error Lens Configuration

{
    "errorLens.removeLinebreaks": false, // Do not remove line breaks
    "errorLens.gutterIconsEnabled": true, // Enable gutter icons for errors
    "errorLens.statusBarColorsEnabled": true, // Enable status bar colors for errors
    "errorLens.messageBackgroundMode": "message", // Background mode for messages
    "errorLens.editorHoverPartsEnabled": {
        "messageEnabled": false,
        "sourceCodeEnabled": false,
        "buttonsEnabled": false
    }, // Hover behavior for error lens
    "errorLens.borderRadius": "0.4em", // Border radius for error message
    "errorLens.fontStyleItalic": true, // Italicize error messages
    "errorLens.fontWeight": "800", // Font weight for error messages
    "errorLens.respectUpstreamEnabled": {
        "statusBar": true
    }, // Upstream settings for error lens
    "errorLens.statusBarIconsEnabled": true // Status bar icons for error lens
}

Workbench Configuration and theme-specific settings

{
    "workbench.colorCustomizations": {
        "editorBracketMatch.border": "#a2d418", // Bracket match border color
        "editorError.foreground": "#00000000", // Error foreground color
        "editorWarning.foreground": "#00000000", // Warning foreground color
        "editorInfo.foreground": "#00000000", // Info foreground color
        "[lucy]": { // Theme-specific customizations
            "focusBorder": "#10cf8f80",
            "editor.wordHighlightBorder": "#2fdc770d",
            "editor.wordHighlightStrongBorder": "#2fc8dc33",
            "list.activeSelectionBackground": "#10cf8f90",
            "list.activeSelectionForeground": "#10cf8fbd",
            "list.hoverBackground": "#10cf8f80",
            "list.focusAndSelectionOutline": "#10cf8f80",
            "statusBarItem.remoteBackground": "#10cf8f80"
        }
    },
    "workbench.startupEditor": "none", // No startup editor
    "workbench.editor.highlightModifiedTabs": true, // Highlight modified tabs
    "workbench.editor.showTabs": "none", // Do not show tabs
    "workbench.editor.editorActionsLocation": "hidden", // Hide editor actions
    "workbench.colorTheme": "lucy", // Color theme
    "workbench.iconTheme": "bearded-icons",
    "workbench.layoutControl.enabled": false,
    "breadcrumbs.filePath": "last", // File path breadcrumb setting
    "workbench.activityBar.location": "hidden",
    "workbench.statusBar.visible": false
}

Window Configuration

{
    "window.customTitleBarVisibility": "windowed", // Title bar visibility
    "window.systemColorTheme": "dark", // Default editor tab height
    "window.zoomLevel": -1, // Zoom level
    "window.commandCenter": false, // Command center visibility
    "window.menuBarVisibility": "toggle", // Menu bar visibility toggle
    "window.title": " " // Custom window title
}

Explorer Settings

{
    "explorer.confirmDelete": false, // Disable delete confirmation
    "explorer.confirmDragAndDrop": false // Disable drag and drop confirmation
}

TypeScript and JavaScript Configuration

{
    "typescript.suggest.autoImports": false, // Disable auto imports in TypeScript
    "javascript.suggest.autoImports": false, // Disable auto imports in JavaScript
    "typescript.updateImportsOnFileMove.enabled": "never", // Disable imports update on file move
    "javascript.updateImportsOnFileMove.enabled": "never", // Hide status bar
}

Codeium

{
    "codeium.enableCodeLens": false, // Disable CodeLens support
    "codeium.enableConfig": { // Configuration for Codeium
        "*": true,
        "markdown": true
    },
    "find-it-faster.general.searchWorkspaceFolders": true,
    "find-it-faster.findFiles.showPreview": true,
    "find-it-faster.general.openFileInPreviewEditor": true,
    "find-it-faster.general.killTerminalAfterUse": true,
    "find-it-faster.general.showMaximizedTerminal": true,
}

Apc UI

{
    "apc.activityBar": { // Activity bar configuration
        "position": "bottom",
        "size": 30,
        "itemMargin": 12
    },
    "apc.electron": { // Electron settings for APC
        "titleBarStyle": "hiddenInset",
        "trafficLightPosition": {
            "x": 7,
            "y": 5
        }
    },
    "apc.header": { // Header configuration
        "height": 25,
        "fontSize": 13
    },
    "apc.listRow": { // List row configuration
        "height": 19,
        "fontSize": 13
    },
}

Find It Faster - Telescope.vim like feel

{
    "find-it-faster.general.searchWorkspaceFolders": true,
    "find-it-faster.findFiles.showPreview": true,
    "find-it-faster.general.openFileInPreviewEditor": true,
    "find-it-faster.general.killTerminalAfterUse": true,
    "find-it-faster.general.showMaximizedTerminal": true,
}

Keybindings Config

Open the command search using the shortcut ctrl + shift + p and type 'keyboard shortcuts', then select 'Preferences: Open Keyboard Shortcuts (JSON)'

Unbindings

[
    {
        "key": "ctrl+m",
        "command": "-editor.action.toggleTabFocusMode"
    },
    {
        "key": "ctrl+k ctrl+m",
        "command": "-workbench.action.toggleMaximizeEditorGroup",
        "when": "maximizedEditorGroup || multipleEditorGroups"
    },
    {
        "key": "ctrl+m",
        "command": "-extension.vim_ctrl+m",
        "when": "editorTextFocus && vim.active && vim.use<C-m> && !inDebugRepl || vim.active && vim.use<C-m> && !inDebugRepl && vim.mode == 'CommandlineInProgress' || vim.active && vim.use<C-m> && !inDebugRepl && vim.mode == 'SearchInProgressMode'"
    }
]

ESLint

{
    "key": "alt+s",
    "command": "eslint.executeAutofix"
}

Split Editor

[
    {
        "key": "ctrl+t \\",
        "command": "workbench.action.splitEditor"
    },
    {
        "key": "ctrl+t -",
        "command": "workbench.action.splitEditorDown"
    }
]

General Vim-inspirated Navigation

[
    {
        "key": "ctrl+t h",
        "command": "workbench.action.navigateLeft"
    },
    {
        "key": "ctrl+t l",
        "command": "workbench.action.navigateRight"
    },
    {
        "key": "ctrl+t k",
        "command": "workbench.action.navigateUp"
    },
    {
        "key": "ctrl+t j",
        "command": "workbench.action.navigateDown"
    }
]

Navigate Between Opened Files

[
    {
        "key": "ctrl+t m",
        "command": "workbench.action.nextEditor"
    },
    {
        "key": "ctrl+t n",
        "command": "workbench.action.previousEditor"
    }
]

Quick Actions and Show Implementations

[
    {
        "key": "ctrl+k ctrl+m",
        "command": "editor.action.showHover",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+k ctrl+i",
        "command": "-editor.action.showHover",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+k ctrl+,",
        "command": "-editor.createFoldingRangeFromSelection",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+k ctrl+.",
        "command": "-editor.removeManualFoldingRanges",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+k ctrl+.",
        "command": "editor.action.quickFix",
        "when": "editorHasCodeActionsProvider && textInputFocus && !editorReadonly"
    }
]

UI Toggles

[
    {
        "key": "ctrl+t b",
        "command": "workbench.action.toggleSidebarVisibility"
    },
    {
        "key": "ctrl+t shift+b",
        "command": "workbench.action.toggleActivityBarVisibility"
    },
    {
        "key": "ctrl+t ctrl+b",
        "command": "workbench.action.toggleStatusbarVisibility"
    },
    {
        "key": "ctrl+t shift+c",
        "command": "workbench.action.hideEditorTabs"
    }
]

Navigation Between Views

[
    {
        "key": "ctrl+t 1",
        "command": "workbench.view.explorer",
        "when": "viewContainer.workbench.view.explorer.enabled"
    },
    {
        "key": "ctrl+t 2",
        "command": "workbench.view.search"
    },
    {
        "key": "ctrl+t 3",
        "command": "workbench.view.extensions",
        "when": "viewContainer.workbench.view.extensions.enabled"
    },
    {
        "key": "ctrl+t 4",
        "command": "workbench.view.scm",
        "when": "workbench.scm.active"
    },
    {
        "key": "ctrl+t space",
        "command": "workbench.action.focusFirstEditorGroup"
    }
]

Working with Files in Explorer

[
    {
        "key": "ctrl+t n",
        "command": "explorer.newFile",
        "when": "filesExplorerFocus && !inputFocus"
    },
    {
        "key": "ctrl+t m",
        "command": "explorer.newFolder",
        "when": "filesExplorerFocus && !inputFocus"
    },
    {
        "key": "ctrl+t r",
        "command": "renameFile",
        "when": "filesExplorerFocus && !inputFocus"
    }
]

Find It Faster Settings

[
    {
        "key": "ctrl+shift+j",
        "command": "-find-it-faster.findFiles"
    },
    {
        "key": "ctrl+shift+u",
        "command": "-find-it-faster.findWithinFiles"
    },
    {
        "key": "ctrl+t f",
        "command": "find-it-faster.findFiles"
    },
    {
        "key": "ctrl+t shift+f",
        "command": "find-it-faster.findWithinFiles"
    }
]

Conclusion

That’s pretty much it! I strive to keep my settings minimal and install only the extensions and configurations that genuinely improve my workflow. I hope this post has been helpful to you. If you’d like to see a video review of this setup in the future, please let me know in the comments.

Peace!

Inspiration links

My Neovim setup for React, TypeScript, Tailwind CSS, etc

VSCode Setup for development
Gist to VSCode profile from the blog post

My minimal VS Code setup for Vue, Typescript, Tailwind CSS, etc