VSCode Settings (Updated)

NODE.md

⚠️ Note!

With VSCode version 1.94, the APC extension broke and there is no fix yet.

So, for those having issues with APC after the VSCode update, I recommend downloading the previous version of VSCode for now (https://code.visualstudio.com/updates/v1_93) and setting updates to manual by adding this to the editor's configuration:

"update.mode": "manual",

settings.json

{
  "workbench.startupEditor": "newUntitledFile",
  "editor.fontSize": 14,
  "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": "css",
    ".dev.vars": "dotenv"
  },
  "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.example": "gear"
  },
  "tailwindCSS.experimental.classRegex": [
    [
      "tv\\(([^)]*)\\)",
      "[\"'`]([^\"'`]*).*?[\"'`]"
    ],
    "class:\\s*?[\"'`]([^\"'`]*).*?,"
  ],
  "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,
  "breadcrumbs.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": "manual",
  "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"
  },
  "console-ninja.featureSet": "Community",
  "workbench.editor.empty.hint": "hidden",
  "update.showReleaseNotes": false,
  "security.promptForLocalFileProtocolHandling": false,
  "workbench.activityBar.location": "hidden",
  "apc.activityBar": {
    "position": "bottom",
    "hideSettings": true,
    "size": 48,
    "itemMargin": 8,
    "itemSize": 32
  },
  "editor.hideCursorInOverviewRuler": true,
  "editor.minimap.enabled": false,
  "window.titleBarStyle": "native",
  "apc.electron": {
    "titleBarStyle": "hiddenInset",
    "trafficLightPosition": {
      "x": 11,
      "y": 10
    },
    "opacity": 1,
    "vibrancy": "dark",
    "frame": false
  },
  "apc.header": {
    "height": 36
  },
  "apc.listRow": {
    "height": 24
  },
  "apc.font.family": "Inter",
  "apc.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;"
  },
  "editor.scrollbar.vertical": "hidden",
  "explorer.sortOrder": "foldersNestsFiles",
  "explorer.fileNesting.patterns": {
    "package.json": ".eslint*, 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"
  ],
  "workbench.statusBar.visible": false,
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "keyword.other.dotenv",
        "settings": {
          "foreground": "#FF000000"
        }
      }
    ]
  },
  "workbench.layoutControl.enabled": false,
  "window.autoDetectColorScheme": true,
  "workbench.preferredDarkColorTheme": "poimandres",
  "workbench.preferredLightColorTheme": "Min Light",
  "gitlens.advanced.messages": {
    "suppressIntegrationRequestTimedOutWarning": true
  },
  "liveServer.settings.donotShowInfoMsg": true
}

Olá, tem um problema. Primeiramente parabéns! Gostei muito! Só tem 1 probleminha aqui comigo que é aquele "quick start" de opcoes quando o @diego3g fala no vídeo: Pressione CTRL + Q, que abre aquele menu de opções. Eu estou na ultima versão do vscode, ultima versão do ubuntu e não tenho esse menu, olhando o mapeamento esse atalho basicamente fecha o vscode, não que eu não tenha procurado algo que abrisse isso mas sem sucesso kkk

No maximo o CTRL+SHIFT+P, mas são muitas opçoes por exemplo pra abrir um arquivo novo, ou abrir as extensoes, basicamente minerar até achar a opção que pra mim foi o mais proximo (embora bagunçado) que encontrei do CTRL + Q do video.

Também criei uma versão mais focada no Linux e bem simples, caso algum iniciante, assim como eu, teve alguns probleminhas pra fazer funcionar haha.
Minimalist VSCode - Linux

mano tem um problema q no ubuntu o atalho CTRL + Q é usado pra sair dos aplicativos, então tu vai ter q setar esse atalho manualmente no VSCODE

como retiro essa barra do lado?

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

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,

Eu consegui colocar a barra mas não consegui tirar os títulos, vê ai se você gosta

{
"workbench.startupEditor": "newUntitledFile",
"editor.fontSize": 15,
"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": "css",
".dev.vars": "dotenv"
},
"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.example": "gear"
},
"tailwindCSS.experimental.classRegex": [
["tv\(([^)])\)", "["']([^\"']).?"']"], "class:\\s*?[\"'.?,"
],
"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,
"workbench.editor.labelFormat": "short",
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
"javascript": "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,
"breadcrumbs.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
},
"update.mode": "default",
"terminal.integrated.gpuAcceleration": "on",
"[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"
},
"console-ninja.featureSet": "Community",
"workbench.editor.empty.hint": "hidden",
"update.showReleaseNotes": false,
"security.promptForLocalFileProtocolHandling": false,
"workbench.activityBar.location": "hidden",
"editor.hideCursorInOverviewRuler": true,
"editor.minimap.enabled": false,
"window.titleBarStyle": "custom",
"window.menuBarVisibility": "toggle",
"explorer.sortOrder": "foldersNestsFiles",
"explorer.fileNesting.patterns": {
"package.json": ".eslint, prettier*, tsconfig*, vite*, pnpm-, bun.lockb, nest, package-lock*",
"tailwind.config.": "tailwind.config, postcss.config*",
".env.local": ".env*",
".env": ".env*"
},
"explorer.fileNesting.enabled": true,
"workbench.statusBar.visible": true,
"editor.tokenColorCustomizations": {
"textMateRules": []
},
"workbench.layoutControl.enabled": false,
"liveServer.settings.donotShowInfoMsg": true,
"editor.codeLensFontFamily": "JetBrains Mono",
"editor.fontLigatures": true,
"workbench.colorTheme": "Monokai Pirokai - Arctic Frost",
"files.autoSave": "afterDelay"
`}```

o meu vs ficou sem a barra, algm sabe como deixar igual?

o meu vs ficou sem a barra, algm sabe como deixar igual?

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

Fala galera, estou no mac M1 e a extensão do APC não funcionou, alguém passou por isso?

Apc Extension failed: Error: ENOENT: no such file or directory, rename '/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/bootstrap-amd.js' -> '/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/bootstrap-amd.js.apc.extension.backup'

Fala galera, estou no mac M1 e a extensão do APC não funcionou, alguém passou por isso?

Apc Extension failed: Error: ENOENT: no such file or directory, rename '/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/bootstrap-amd.js' -> '/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/bootstrap-amd.js.apc.extension.backup'

O meu está dando o mesmo erro também, toda vez que reinicio o vs code aparece essa mensagem 😕

Fala galera, estou no mac M1 e a extensão do APC não funcionou, alguém passou por isso?

Apc Extension failed: Error: ENOENT: no such file or directory, rename '/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/bootstrap-amd.js' -> '/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/bootstrap-amd.js.apc.extension.backup'

Dei uma pesquisada e encontrei esse link: https://github.com/drcika/apc-extension?tab=readme-ov-file#mac-and-linux-users

Eu tentei rodar sudo chown -R $(whoami) $(which code), mas o comando $(which code) não estava retornando o caminho correto para o VSCode, e descobri que o VSCode não estava no PATH, ou que talvez tenha sido instalado de uma forma que não adicionou o comando code ao PATH.

Então a solução que encontrei foi desinstalar o VSCode, excluir a pasta 'Code' e reinstalar o VSCode novamente.

Assim que reinstalei, fui no Command Palette e selecionei a opção: "Shell Command: Install 'code' command in PATH", e a partir daí subi as config novamente em settings.json e finalmente funcionou a extensão APC!

Fala galera! Teve alguma atualização do Apc esses dias ? Iniciei meu VS Code hoje e não tá configurado como deixei. Como se nem tivesse instalado o apc.

Aqui também deu problema, abri hj e simplemente parece q eu nao apliquei nada!

Aqui também deu problema, abri hj e simplemente parece q eu nao apliquei nada!

Aqui voltou a funcionar normalmente

Alguém sabe dizer se a extensão do APC funciona para vscode no WSL ?

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;",

Pessoal meu vscode ficou sem os icons de pasta saberiam informar qual comando causou isso?

Edit: Encontrei a causa, por alguma razão o "Apc Customize UI++" alterou as configs de "File Icon Theme " caso alguem encontre o mesmo problema, segue a solução!
Path:

Só selecionar "Symbols" nas opções!

Ou

Adicionar dentro do User Settings (JSON): "workbench.iconTheme": "symbols",

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! 🚀