VS Code: Editor Settings & Extensions 🔥
Your code editor is your workspace, and like any workspace, it should be optimized for focus, efficiency, and speed. I've slimmed down my VS Code setup to remove unnecessary extensions and rely more on built-in settings for performance. The few extensions I keep are carefully chosen—like Go, as I'm strengthening my backend skills. This setup is a work in progress, but it's my first public configuration, laying down the foundation for a minimal yet powerful development experience. Let's dive in!
🛠️ Extensions: The Power-Ups You Need
- ESLint: Your code's new best friend. ESLint catches those pesky errors and enforces code style, keeping your codebase clean and consistent. ✅
- Docker: Containerize your development like a pro! Docker simplifies environment management and ensures your apps run smoothly, everywhere. 🐳
- Error Lens: Say goodbye to hunting for errors! Error Lens supercharges VS Code's diagnostics, displaying errors and warnings directly in your editor. 👓
- Go: GoLang development? This extension provides rich language support for Go, including features like code completion, debugging, and more. 🚀
- Prettier: Format your code with a single keystroke! Prettier automatically formats your code to a consistent style, saving you time and effort. ✨
- Subtle Match Brackets: Never lose track of your brackets again! This extension subtly highlights matching brackets, making it easier to navigate complex code structures. 💫
- TabOut: Escape those pesky auto-completion popups with ease. TabOut lets you quickly jump out of quotes or brackets with a simple tab press. ➡️
- Tailwind CSS Intellisense: Tailwind just got even easier. Get intelligent code completion, syntax highlighting, and more for your Tailwind CSS projects. 🎨
- Thunder Client: Ditch the external tools and test your APIs directly within VS Code with this lightweight and powerful API client. ⚡️
- GitHub Copilot: Your AI pair programmer. Get intelligent code suggestions and autocompletion powered by AI. 🤖
🎨 Themes & Icons: Make VS Code a Vibe
- One Monokai Theme: A classic, comfortable theme that's easy on the eyes and great for long coding sessions. 😎
- Catppuccin Icons for VSCode: Give your VS Code a fresh, modern look with these delightful, pastel-themed icons. 🍦
⚙️ Settings: Fine-Tune Your Workflow
{
"workbench.colorTheme": "One Monokai",
"editor.formatOnSave": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[python]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"breadcrumbs.enabled": false,
"editor.renderWhitespace": "none",
"editor.fontFamily": "'JetBrainsMono Nerd Font','Monaco Nerd Font Mono',Monaco, Menlo, 'Courier New', monospace",
"editor.tabSize": 2,
"editor.wordWrap": "on",
"editor.linkedEditing": true,
"editor.hideCursorInOverviewRuler": true,
"workbench.editor.tabActionCloseVisibility": false,
"explorer.decorations.colors": false,
"explorer.compactFolders": false,
"git.decorations.enabled": false,
"editor.formatOnPaste": false,
"editor.renderLineHighlight": "none",
"editor.scrollbar.horizontal": "hidden",
"editor.scrollbar.vertical": "hidden",
"editor.showFoldingControls": "never",
"editor.glyphMargin": false,
"editor.folding": false,
"workbench.layoutControl.enabled": false,
"window.title": " ",
"editor.cursorBlinking": "blink",
"editor.cursorSmoothCaretAnimation": "on",
"workbench.editor.showTabs": "single",
"window.commandCenter": false,
"editor.occurrencesHighlight": "off",
"scm.diffDecorationsGutterPattern": {
"added": false,
"modified": false
},
"scm.diffDecorations": "none",
"scm.diffDecorationsGutterAction": "none",
"files.autoSave": "afterDelay",
"workbench.startupEditor": "none",
"workbench.sideBar.location": "right",
"application.shellEnvironmentResolutionTimeout": 30,
"gopls": {
"ui.semanticTokens": true
},
"go.toolsManagement.autoUpdate": true,
"typescript.inlayHints.enumMemberValues.enabled": true,
"javascript.inlayHints.variableTypes.enabled": true,
"javascript.inlayHints.propertyDeclarationTypes.enabled": true,
"javascript.inlayHints.parameterNames.enabled": "literals",
"typescript.inlayHints.variableTypes.enabled": true,
"typescript.inlayHints.propertyDeclarationTypes.enabled": true,
"typescript.inlayHints.parameterNames.enabled": "literals",
"typescript.inlayHints.functionLikeReturnTypes.enabled": true,
"javascript.inlayHints.functionLikeReturnTypes.enabled": true,
"typescript.inlayHints.parameterTypes.enabled": true,
"javascript.inlayHints.parameterTypes.enabled": true,
"go.inlayHints.assignVariableTypes": true,
"go.inlayHints.compositeLiteralFields": true,
"go.inlayHints.compositeLiteralTypes": true,
"go.inlayHints.constantValues": true,
"go.inlayHints.functionTypeParameters": true,
"go.inlayHints.rangeVariableTypes": true,
"go.inlayHints.parameterNames": true,
"eslint.probe": [
"astro",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"mdx",
"vue",
"markdown",
"json",
"jsonc"
],
"editor.inlayHints.enabled": "off",
"editor.unicodeHighlight.nonBasicASCII": false,
"github.copilot.enable": {
"*": false,
"plaintext": false,
"markdown": false,
"scminput": false
},
"window.zoomLevel": 1,
"workbench.iconTheme": "catppuccin-latte",
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",
"terminal.integrated.stickyScroll.enabled": false,
"editor.stickyScroll.enabled": false,
"terminal.integrated.fontFamily": "SFMono Nerd Font",
"editor.guides.indentation": false,
"workbench.tree.renderIndentGuides": "none",
"editor.matchBrackets": "never",
"terminal.integrated.cursorStyle": "line",
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.minimap.enabled": false
}
Key Tweaks Explained:
"editor.formatOnSave": true: Automatically format your code every time you save. A must-have for maintaining code consistency! ✨"editor.fontFamily": "'JetBrainsMono Nerd Font','Monaco Nerd Font Mono',Monaco, Menlo, 'Courier New', monospace": A clean, readable font is crucial. JetBrains Mono is a popular choice for its excellent legibility. 👓"editor.tabSize": 2: Use 2 spaces for indentation – the modern standard. ➡️"workbench.sideBar.location": "right": Move the Side Bar to the right for a more modern IDE look"editor.minimap.enabled": false: Hides the Minimap for a cleaner UI and more screen space. 🧹"window.zoomLevel": 1: Adjusts the zoom level of the window. Change it to your liking!
🎯 Conclusion: A Solid Foundation
This setup is my first public configuration and serves as my foundation for an efficient development workflow. It's optimized for speed, clarity, and ease of use while keeping performance in check. As I refine my workflow, this setup will evolve—but for now, it's a minimal, powerful, and elegant workspace that lets me focus on writing great code. 🚀
Got any cool VS Code tips or must-have extensions? Let me know! 🛠️👨💻