VSCode Settings (Updated)

settings.json

{
  "workbench.startupEditor": "newUntitledFile",
  "editor.fontSize": 16,
  "editor.lineHeight": 1.8,
  "javascript.suggest.autoImports": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.rulers": [
    80,
    120
  ],
  "extensions.ignoreRecommendations": true,
  "typescript.tsserver.log": "off",
  "editor.stickyScroll.enabled": false,
  "workbench.tree.enableStickyScroll": false,
  "files.associations": {
    ".env.*": "dotenv",
    ".prettierrc": "json",
    "*.css": "postcss",
    ".dev.vars": "dotenv",
    "*.ndjson": "jsonl"
  },
  "symbols.files.associations": {
    "*.module.ts": "nest",
    "*.guard.ts": "typescript",
    "*.spec.ts": "ts-test",
    "*.e2e-spec.ts": "ts-test",
    "*.mock.ts": "ts-test",
    "vitest.config.e2e.ts": "vite",
    ".env.development.local": "gear",
    ".env.test.local": "gear",
    ".env.local": "gear",
    ".env.sst": "gear",
    ".env.example": "gear",
    "*.ndjson": "brackets-orange"
  },
  "tailwindCSS.experimental.classRegex": [
    [
      "tv\\(([^)]*)\\)",
      "cva\\(([^)]*)\\)",
      "[\"'`]([^\"'`]*).*?[\"'`]"
    ],
    "class:\\s*?[\"'`]([^\"'`]*).*?,",
    "tw\\('([^']*)'\\)"
  ],
  "editor.parameterHints.enabled": false,
  "editor.renderLineHighlight": "gutter",
  "cSpell.language": "en,pt",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.suggestSelection": "first",
  "explorer.confirmDelete": false,
  "gitlens.codeLens.recentChange.enabled": false,
  "terminal.integrated.showExitAlert": false,
  "[prisma]": {
    "editor.formatOnSave": true
  },
  "typescript.suggest.autoImports": true,
  "typescript.preferences.preferTypeOnlyAutoImports": true,
  "terminal.integrated.env.osx": {
    "FIG_NEW_SESSION": "1"
  },
  "workbench.editor.labelFormat": "short",
  "editor.fontLigatures": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "mdx": "javascriptreact"
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "mdx": "jsx"
  },
  "cSpell.enableFiletypes": [
    "!asciidoc",
    "!c",
    "!cpp",
    "!csharp",
    "!go",
    "!handlebars",
    "!haskell",
    "!jade",
    "!java",
    "!latex",
    "!php",
    "!pug",
    "!python",
    "!restructuredtext",
    "!rust",
    "!scala",
    "!scss"
  ],
  "editor.acceptSuggestionOnCommitCharacter": false,
  "explorer.compactFolders": false,
  "git.enableSmartCommit": true,
  "editor.accessibilitySupport": "off",
  "explorer.confirmDragAndDrop": false,
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.fontFamily": "JetBrainsMono Nerd Font",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "graphql"
  ],
  "editor.semanticHighlighting.enabled": false,
  "workbench.productIconTheme": "fluent-icons",
  "editor.fontFamily": "JetBrains Mono",
  "gitlens.codeLens.authors.enabled": false,
  "editor.tabSize": 2,
  "security.workspace.trust.untrustedFiles": "newWindow",
  "files.exclude": {
    "**\/CVS": true,
    "**\/.DS_Store": true,
    "**\/.hg": true,
    "**\/.svn": true,
    "**\/.git": true,
    ".vscode": true
    // "node_modules": true
  },
  "workbench.iconTheme": "symbols",
  "update.mode": "start",
  "terminal.integrated.gpuAcceleration": "on",
  "terminal.integrated.defaultProfile.osx": "fish",
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "window.commandCenter": false,
  "git.openRepositoryInParentFolders": "always",
  "symbols.hidesExplorerArrows": false,
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "workbench.editor.empty.hint": "hidden",
  "update.showReleaseNotes": false,
  "security.promptForLocalFileProtocolHandling": false,
  "workbench.activityBar.location": "hidden",
  "custom-ui-style.electron": {
    "frame": false,
    "titleBarStyle": "hiddenInset",
    "trafficLightPosition": {
      "x": 11,
      "y": 10
    },
    "opacity": 0.96,
    "visualEffectState": "active",
    "vibrancy": "ultra-dark"
  },
  "custom-ui-style.stylesheet": {
    ".title-label > h2": "display: none",
    ".editor-actions": "display: none",
    ".nosidebar .inline-tabs-placeholder": "width: 75px",
    ".pane-header": "padding: 0 8px",
    ".pane-body": "padding: 8px",
    ".split-view-view:first-child .pane-header": "display: none !important;",
    ".monaco-list-row": "border-radius: 4px;",
    ".monaco-workbench .monaco-list:not(.element-focused):focus:before": "display: none;"
  },
  "custom-ui-style.font.sansSerif": "Inter, -apple-system",
  "editor.hideCursorInOverviewRuler": true,
  "editor.minimap.enabled": false,
  "window.titleBarStyle": "native",
  "editor.scrollbar.vertical": "hidden",
  "explorer.sortOrder": "foldersNestsFiles",
  "explorer.fileNesting.patterns": {
    "package.json": ".eslint*, eslint.config.*, prettier*, tsconfig*, vite*, pnpm-*, bun.lockb, nest*, package-lock*",
    "tailwind.config.*": "tailwind.config*, postcss.config*",
    ".env.local": ".env*",
    ".env": ".env*"
  },
  "explorer.fileNesting.enabled": true,
  "cSpell.userWords": [
    "automations",
    "bootcamp",
    "chakra",
    "checkin",
    "checkins",
    "cloudflare",
    "clsx",
    "Codegen",
    "datadog",
    "Datetime",
    "dayjs",
    "Dotenv",
    "Elysia",
    "esbuild",
    "fastify",
    "Fastify",
    "feedbackwidget",
    "ffprobe",
    "gamificada",
    "Hasher",
    "hono",
    "Hono",
    "ilike",
    "IUGU",
    "jamjuree",
    "jupiter",
    "ksuid",
    "liveblocks",
    "LIVEBLOCKS",
    "Marguerita",
    "middlewares",
    "mixpanel",
    "monaco",
    "nestjs",
    "nivo",
    "omni",
    "Omni",
    "Onboarded",
    "pallas",
    "postgres",
    "postgresql",
    "prefetch",
    "reactflow",
    "retriable",
    "roboto",
    "rocketseat",
    "rotion",
    "rsxp",
    "Sandpack",
    "shiki",
    "skylab",
    "sqlite",
    "supergraph",
    "svgr",
    "sympla",
    "tailwindcss",
    "textblock",
    "tiptap",
    "trpc",
    "TRPC",
    "tsup",
    "unfollow",
    "Unfollow",
    "unform",
    "Unform",
    "unmark",
    "upsert",
    "Usuario",
    "webm",
    "WEBPUSH",
    "zrevrank",
    "zscore"
  ],
  "workbench.statusBar.visible": false,
  "editor.tokenColorCustomizations": {
    "textMateRules": []
  },
  "workbench.layoutControl.enabled": false,
  "window.autoDetectColorScheme": true,
  "workbench.preferredDarkColorTheme": "Oscura Dusk",
  "workbench.preferredLightColorTheme": "Oscura Dusk",
  "gitlens.advanced.messages": {
    "suppressIntegrationDisconnectedTooManyFailedRequestsWarning": true,
    "suppressIntegrationRequestTimedOutWarning": true
  },
  "liveServer.settings.donotShowInfoMsg": true,
  "editor.multiCursorLimit": 50000
}

Pra quem quiser customizar aquela caixa de pesquisa do vscode, vou deixar aqui minha config:

/* Command Palette */ ".quick-input-widget": "transform: translateY(-50%) !important; top: 50% !important; box-shadow: 0px 8px 20px rgba(0, 0, 0, .45) !important; padding: 10px 10px 18px 10px !important; background-image: gradient(90deg, #2e2e2e, #2e2e2e) !important; backdrop-filter: blur(3px) !important; border-radius: 10px !important; height: 300px !important;", ".quick-input-filter .monaco-inputbox": "border-radius: 10px !important; padding: 8px !important; border: none !important; background-color: rgba(46, 46, 46, .90) !important; font-size: 14px !important; margin-bottom: 10px !important; font-family: Inter !Important;", ".monaco-inputbox input::placeholder": "color: rgba(255, 255, 255, .5) !important;", ".quick-input-list .monaco-list": "max-height: 230px !important;", ".quick-input-list .monaco-list.list_id_3 .monaco-list-rows": "background: #2e2e2e !important;",

tu colocou isso através do apc? pq aqui dá erro

Estou usando win11, alguém sabe como instalar o zsh? Sei q precisa do 'sudo' mas o meu cmd e powershell n sabem oq é

no Windows é o https://ohmyposh.dev
eu sei que funciona com gitbash e com o powershell

Estou usando win11, alguém sabe como instalar o zsh? Sei q precisa do 'sudo' mas o meu cmd e powershell n sabem oq é

tu vai ter q usar wsl mano, e assimq eu faço aqui no meu, baixa um wsl (windows subsystem linux) dentro da sua maquina. Na propria microsoft store voce consegue baixar, so pesquisar Ubuntu e baixar a versao mais recente, ai dentro do seu terminal tu abri esse terminal ubuntu e baixa o zsh

Galera, tentei botar aqui o APC mas por algum modo nenhuma modificação faz efeito. Já tentei reinstalar a extensão, realizar o sudo chown -R $(whoami) $(which code) indicado no GitHub do APC mas nada surte efeito. Alguém que use MacOS sabe como posso fazer para que a extensão funcione? Até quando eu tento usar o enable pela command palette, dá esse erro.

@bangoim cara parece que o apc quebrou na ultima atualização do vscode, o meu estava bonitinho mas agora parou de funcionar :/

@Rickpariz mano, pse, entrei no github deles e o criador da extensão falou que foi uma modificação no código fonte do VSC e que ele teria que refazer a extensão do zero e ele não tem paciência pra isso. Aí disse que se alguém quiser corrigir, que fique livre, mas que ele não vai fazer KKKK

Para quem tiver tendo problemas com o APC depois do update do VSCode, recomendo baixar a versão anterior do VSCode por enquanto (https://code.visualstudio.com/updates/v1_93) e deixar as atualizações manuais adicionando isso na configuração do editor:

"update.mode": "manual",

Alguém manja como tirar aquele texto Explorer: da lateral esquerda superior usando o APC

no caso eu queria deixar somente o nome do projeto aberto, por exemplo somente LINKED-LIST

🌌 DarkWizard Theme Visual Studio Code

DarkWizard Theme is a sleek, modern Visual Studio Code theme designed to provide a focused, immersive development experience. With a dark palette, elegant visuals, and excellent readability, DarkWizard Theme is made for developers who value both style and functionality.

Dark theme for Visual Studio Code

Install • Screenshots • Team • License

Install

1. Requirements: Make sure your Visual Studio Code is up to date.
2. Marketplace: Go to the Visual Studio Code Marketplace and search for DarkWizard Theme or Click here!.
3. Install the Theme: Click “Install” and then select the theme via Preferences > Color Theme > DarkWizard Theme.

Screenshots

DarkWizard Theme 🌌 Preview

DarkWizard Theme 🌌 Terminal Preview

DarkWizard 🌌 Json Preview

⚙️ Recommended Settings

For the best visual experience, we suggest adding the following configurations to your settings.json. These settings enhance font, spacing, and other visual preferences in Visual Studio Code:

{
  "workbench.iconTheme": "symbols",
  "editor.fontFamily": "JetBrains Mono",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.5,
  "editor.renderLineHighlight": "gutter",
  "workbench.editor.labelFormat": "short",
  "explorer.compactFolders": false,
  "breadcrumbs.enabled": false,
  "workbench.activityBar.location": "hidden",
  "editor.minimap.enabled": false,
  "editor.scrollbar.vertical": "hidden",
  "workbench.statusBar.visible": true,
  "symbols.hidesExplorerArrows": false,
  "editor.bracketPairColorization.enabled": false
}

🔗 Download JetBrains Mono Font

Use the JetBrains Mono font, specifically designed for coding, with ligatures and high readability.

🔥 Extra Tips

• 🖥️ Full-Screen Mode: Maximize the theme’s impact by using VS Code in full-screen mode.
• 🧩 Icon Customization: Install Symbols for best integration with the theme and enable "workbench.iconTheme": "symbols" in your settings.json.
• 🚫 Hide the Minimap: Disable the minimap for a cleaner interface with "editor.minimap.enabled": false.

---

Team

Author: Gabbezeira
🌐 Instagram: https://instagram.com/gabbezeira

---

License

MIT License

---

Enjoy DarkWizard Theme and take your coding environment to the next level! 🚀

Procurando algumas alternativas pra essa nova versão do vs code que não tem mais suporte ao APC, tem essas duas extensões que da pra customizar o vs code sem precisar fazer a instalação das versões anteriores: Custom CSS Loader and JS, Custom UI Style

Cara eu segui esse post e foi bem tranquilo, usei essa plataforma pra ir deixando do jeito que eu queria as abas, bordas e cores em geral, porém a as configurações das cores da sintaxe não eram salvas, aí fui alterando direto no arquivo do tema, foi muito tranquilo mesmo.

Site incrivel! Não conhecia, obrigado

boa noite pessoal, sabe a arvore de arquivos, onde ficam as pastas alguem sabe como almentar a fonte ?

@davi92limas para você abrir e fechar a arvore de arquivos use CTRL + B ou Command + B, para aumentar a fonte é só usar o CTRL + SHIFT + P e digitar Settings.json abre o arquivo e altera esse campo: "editor.fontSize": 14

amigao, será que fica baum no cursor ai?

Hey guys, there's a new VS Code extension that does pretty much the same thing, it's Custom UI Style.

---

Olá pessoal, há uma nova extensão do VS Code que faz praticamente a mesma coisa: Custom UI Style.

Hey guys, there's a new VS Code extension that does pretty much the same thing, it's Custom UI Style.

Olá pessoal, há uma nova extensão do VS Code que faz praticamente a mesma coisa: Custom UI Style.

Thanks for letting us know ✌🏻

Hey guys, there's a new VS Code extension that does pretty much the same thing, it's Custom UI Style.
Olá pessoal, há uma nova extensão do VS Code que faz praticamente a mesma coisa: Custom UI Style.

Thanks for letting us know ✌🏻

Sem problema haha

Ola como faço para ter as cores dos "{}" nos arquivos tailwind.js settings.json etc... ?

Tenta adicionar essa linha aqui no settings.json:

"editor.bracketPairColorization.enabled": true,

Não funcionou, tem algum codigo dentro do settings que faz isso mas não encontrei

Atualmente as versões atuais do vscode fazem isso, mas tinham esses plugins ( bracket pair coloriz , rainbow brackets , ... )

podia disponibilizar essa config pra quem usa windows

Pessoal qual tema é esse que o Diego está usando no video do Trigger.dev? Não é o VESPER pois tem tons amarelo.

@black-adm eu com muito custo encontrei. Não tenho total certeza, mas acredito que seja este mesmo. Chama Oscura Theme. E o autor chama Fey.

Testa e vê o que você acha.

Opa, qual o app que o diego esta usando pra gerenciamento apps em tela ? pra organizar as abas.