Skip to content

Instantly share code, notes, and snippets.

@diego3g
Last active December 8, 2024 20:42
Show Gist options
  • Save diego3g/b1b189063d21b96d6144ca896755be64 to your computer and use it in GitHub Desktop.
Save diego3g/b1b189063d21b96d6144ca896755be64 to your computer and use it in GitHub Desktop.
VSCode Settings (Updated)

⚠️ 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",
{
"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
}
@gabbezeira
Copy link

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.

@mauriciodogithub
Copy link

De qual imagem vocês dizem ?

acho que ele está falando da foto que eu mandei. ela é mais amarelada, não acho que seja o MinDark, mas pode ser apenas um filtro de tela

min theme

@flavio-ever
Copy link

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

@rodrigodotdev
Copy link

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

@henriquemenezescg
Copy link

como retiro essa barra do lado?
Captura de Tela 2024-07-02 às 00 54 38

@HennrikeSocher
Copy link

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

@birobirobiro
Copy link

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,

@yvan467
Copy link

yvan467 commented Jul 14, 2024

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"
`}```

@yvan467
Copy link

yvan467 commented Jul 14, 2024

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

Captura de tela_1

@yvan467
Copy link

yvan467 commented Jul 14, 2024

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

Captura de tela_1

@HennrikeSocher
Copy link

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

@luizandrends
Copy link

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'

@gabrielaesechiel
Copy link

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 😕

@gabrielaesechiel
Copy link

gabrielaesechiel commented Jul 30, 2024

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!

@Hertzzy
Copy link

Hertzzy commented Aug 2, 2024

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.

@oswaldo-oliveira
Copy link

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

@Hertzzy
Copy link

Hertzzy commented Aug 5, 2024

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

Aqui voltou a funcionar normalmente

@paulosantana95
Copy link

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

@lucianolopezz
Copy link

lucianolopezz commented Aug 23, 2024

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

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

@carlosT0ledo
Copy link

carlosT0ledo commented Sep 15, 2024

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

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:
image

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

Ou

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

@guilhermecrf
Copy link

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

/* 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

@OSrB2
Copy link

OSrB2 commented Oct 1, 2024

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

@oswaldo-oliveira
Copy link

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

@bangoim
Copy link

bangoim commented Oct 4, 2024

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.

image

@Rickpariz
Copy link

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

@bangoim
Copy link

bangoim commented Oct 5, 2024

@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

@diego3g
Copy link
Author

diego3g commented Oct 5, 2024

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

@eduardonunesp
Copy link

Alguém manja como tirar aquele texto Explorer: da lateral esquerda superior usando o APC
image
no caso eu queria deixar somente o nome do projeto aberto, por exemplo somente LINKED-LIST

@gabbezeira
Copy link


Dark Wizard Theme Logo
🌌 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

PRs welcome! License

InstallScreenshotsTeamLicense

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

Dark Wizard screnshoot for Visual Studio Code


DarkWizard Theme 🌌 Terminal Preview

Dark Wizard Terminal screnshoot for Visual Studio Code


DarkWizard 🌌 Json Preview

Dark Wizard Json screnshoot for Visual Studio Code

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

@amandasaporiti
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment