My VSCode Setup

📝 Introduction

Visual Studio Code is a powerful and versatile code editor that supports a wide range of programming languages and extensions. Whether you’re a beginner or an experienced developer, customizing your VSCode setup can significantly improve your workflow and productivity.

In this post, I’ll share my favorite extensions, themes, and settings that help me write code faster, debug more efficiently, and stay focused while working on projects.

Here’s an improved categorization of the extensions and themes:

🔗 Extensions

🌐 Web Development

• Astro: VSCode support for the Astro framework.
• Tailwind CSS IntelliSense: Tailwind CSS suggestions and auto-complete.
• Live Server: Launch a local server with auto-reload.

🖋️ Writing & Documentation

• markdownlint: Enforce consistent Markdown styles.
• MDX: Support for MDX (Markdown + JSX).

🛠️ Productivity & Utilities

• Better Comments: Color-code comments for clarity.
• Output Colorizer: Highlight VSCode output.
• Discord Presence: Share VSCode activity on Discord.

💻 Remote Development

• Remote - SSH: Edit code on remote servers.

📦 Version Control & Collaboration

• GitHub Copilot: AI code suggestions.
• GitHub Actions: Support for GitHub workflows.
• Conventional Commits: Standardized commit messages.

🔧 Code Quality & Formatting

• ESLint: Identify and fix coding issues.
• Prettier: Auto-format code for consistency.
• EmojiSense: Add suggestions and auto-completion for emojis.

🎨 Themes & Icons

• Vesper: Peppermint and orange flavored dark theme.
• Symbols: A simple file icon theme.
• Fluents Icons: Fluent product icons.

🔠 Fonts

• Geist Mono: Sans-serif typeface font designed for legibility and simplicity, made by Vercel.
• GeistMono Nerd Font: A patched version of Geist Mono with additional glyphs and icons.

⚙️ Settings

With all the extensions and themes installed, here are some of the key settings I use to customize my VSCode experience:

{
  "breadcrumbs.enabled": false,
  "conventionalCommits.emojiFormat": "emoji",
  "conventionalCommits.showNewVersionNotes": false,
  "discord.removeDetails": true,
  "discord.suppressNotifications": true,
  "editor.acceptSuggestionOnCommitCharacter": false,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.fontFamily": "'Geist Mono', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 12,
  "editor.fontWeight": "600",
  "editor.formatOnSave": true,
  "editor.guides.indentation": false,
  "editor.lineHeight": 22,
  "editor.minimap.enabled": false,
  "editor.mouseWheelScrollSensitivity": 1.3,
  "editor.occurrencesHighlight": "off",
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "editor.renderWhitespace": "trailing",
  "editor.smoothScrolling": true,
  "editor.suggest.insertMode": "replace",
  "editor.unicodeHighlight.nonBasicASCII": false,
  "editor.wordWrap": "on",
  "emojisense.languages": {
    "markdown": true,
    "mdx": true
  },
  "explorer.autoReveal": false,
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "explorer.confirmPasteNative": false,
  "explorer.sortOrder": "type",
  "files.autoSave": "onWindowChange",
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  "git.ignoreRebaseWarning": true,
  "github.copilot.enable": {
    "markdown": true,
    "mdx": true
  },
  "json.schemaDownload.enable": true,
  "security.workspace.trust.untrustedFiles": "open",
  "telemetry.telemetryLevel": "off",
  "terminal.integrated.fontFamily": "'GeistMono Nerd Font'",
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.gpuAcceleration": "on",
  "terminal.integrated.smoothScrolling": true,
  "update.showReleaseNotes": false,
  "window.commandCenter": false,
  "window.menuBarVisibility": "compact",
  "window.titleBarStyle": "custom",
  "workbench.activityBar.location": "top",
  "workbench.colorTheme": "Vesper",
  "workbench.editor.enablePreview": false,
  "workbench.iconTheme": "symbols",
  "workbench.layoutControl.enabled": false,
  "workbench.productIconTheme": "fluent-icons",
  "workbench.startupEditor": "none",
  "workbench.tree.indent": 20,
  "workbench.tree.renderIndentGuides": "none",
  "yaml.format.singleQuote": true
}

🔍 Preview

Here’s a preview of my VSCode setup, with all the extensions, themes, and settings in action:

🎉 Conclusion

Customizing your VSCode setup can make a significant difference in your coding experience. By choosing the right extensions, themes, and settings, you can create a personalized environment that suits your workflow and preferences, helping you write better code faster and more efficiently.

aefly

🌐 ʟɪᴠɪɴɢ ɪɴ ᴀ ᴠɪʀᴛᴜᴀʟ ᴡᴏʀʟᴅ.