DEV Community

Cover image for My minimal VS Code setup for Vue, Typescript, Tailwind CSS, etc
Gleb Kotovsky
Gleb Kotovsky

Posted on

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

#vscode #webdev #tutorial #productivity

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

Image description

Image description

2) Folder sidebar + Icons

Image description

3) Better find files / like a telescope.vim

Image description

4) Minimalistic theme + font family

Image description

Ingredients

Vue extension box

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

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

Eslint 

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

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

Explorer Settings 

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

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
}
Enter fullscreen mode Exit fullscreen mode

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,
}
Enter fullscreen mode Exit fullscreen mode

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
    },
}
Enter fullscreen mode Exit fullscreen mode

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,
}
Enter fullscreen mode Exit fullscreen mode

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'"
    }
]
Enter fullscreen mode Exit fullscreen mode

ESLint 

{
    "key": "alt+s",
    "command": "eslint.executeAutofix"
}
Enter fullscreen mode Exit fullscreen mode

Split Editor 

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

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"
    }
]
Enter fullscreen mode Exit fullscreen mode

Navigate Between Opened Files 

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

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"
    }
]
Enter fullscreen mode Exit fullscreen mode

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"
    }
]
Enter fullscreen mode Exit fullscreen mode

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"
    }
]
Enter fullscreen mode Exit fullscreen mode

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"
    }
]
Enter fullscreen mode Exit fullscreen mode

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"
    }
]
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
philip_zhang_854092d88473 profile image
Philip •

Thank you so much for sharing! I’d like to recommend EchoAPI for CSS integration. I appreciate how EchoAPI enhances the development process by facilitating seamless communication between APIs and CSS frameworks.

Read next

madza profile image

12 Useful Developer Tools You Will Wish You Knew Sooner 🧑‍💻🧙

Madza -

keploy profile image

SSL Certificate Problem: Unable to Get Local Issuer Certificate – Causes and Solutions

keploy -

thevediwho profile image

Custom Transitions in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi -

echoglobal profile image

Non-Obvious Steps to Select the Right Software Development Partner

EchoGlobal -