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
}

Opa galera, beleza?

Eu criei um novo tema para o VSCode nessa pegada minimalista que acho que vocês podem gostar, vou deixar algumas imagens aqui em baixo.

Miraculous Theme [Visual Studio Code](https://code.visualstudio.com/) **Dark theme for Visual Studio Code**

Install • Team • License

Miraculous Theme Preview

Miraculous Terminal Preview

Miraculous Json Preview

Installation

1. Install theme from the Marketplace
2. Go to File > Preferences > Color Theme
3. Select Miraculous Theme

Team

This theme is maintained by Gabbezeira

Gabriel Alves

License

MIT License

Achei muito foda mano, parabéns!

Opa galera, beleza?

Eu criei um novo tema para o VSCode nessa pegada minimalista que acho que vocês podem gostar, vou deixar algumas imagens aqui em baixo.

Miraculous Theme [Visual Studio Code](https://code.visualstudio.com/) **Dark theme for Visual Studio Code**

Install • Team • License

Miraculous Theme Preview

Miraculous Terminal Preview

Miraculous Json Preview

Installation

1. Install theme from the Marketplace
2. Go to File > Preferences > Color Theme
3. Select Miraculous Theme

Team

This theme is maintained by Gabbezeira

Gabriel Alves

License

MIT License

Parabéns man, ficou muito fod@@@

Cara como foi o processo de criar um tema do zero ? tenho interesse nesse assunto.

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.

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

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

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