Executando verificação de segurança...
2
kauadev
8 min de leitura ·

Como customizei meu VSCode e aumentei minha produtividade

Sempre fui uma pessoa que se importa bastante com a estética do ambiente em que trabalho. No caso do VSCode, a escolha de cores padrão nunca me agradou. Eu até encontrei um tema chamado Vesper que quase me conquistou, mas ele ainda não combinava com o restante do meu setup, que é focado em tons de roxo.

Então, decidi personalizar o tema Vesper para deixá-lo com as cores que eu queria. Comecei ajustando as configurações de cores:

"workbench.colorCustomizations": {
    "badge.background": "#9435ED",
    "focusBorder": "#9435ED",
    "list.highlightForeground": "#9435ED",
    "textLink.foreground": "#9435ED",
    "ettings.modifiedItemIndicator": "#9435ED",
    "editorWarning.foreground": "#9435ED",
    "editorGutter.modifiedBackground": "#9435ED",
    "activityBarBadge.background": "#9435ED",
    "statusBarItem.remoteBackground": "#9435ED",
    "list.activeSelectionForeground": "#9435ED",
    "button.background": "#9435ED",
    "button.hoverBackground": "#b772f8",
    "editor.background": "#0c0c0c",
    "sideBar.background": "#0c0c0c",
    "sideBarSectionHeader.background": "#0c0c0c",
    "activityBar.background": "#0c0c0c",
    "titleBar.activeBackground": "#0c0c0c",
    "titleBar.inactiveBackground": "#0c0c0c",
    "panel.background": "#0c0c0c",
    "editorGroupHeader.tabsBackground": "#0c0c0c",
    "tab.inactiveBackground": "#0c0c0c",
    "editorGroupHeader.noTabsBackground": "#0c0c0c",
    "list.activeSelectionBackground": "#0c0c0c",
    "list.inactiveSelectionBackground": "#0c0c0c",
    "list.hoverBackground": "#0c0c0c",
    "editorGutter.background": "#0c0c0c",
    "dropdown.background": "#0c0c0c",
    "menu.background": "#0c0c0c",
    "quickInput.background": "#0c0c0c",
    "scrollbarSlider.background": "#0c0c0c",
    "scrollbarSlider.hoverBackground": "#1A1A1A",
    "statusBar.background": "#0c0c0c",
    "terminal.background": "#00000000"
  },
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": [
          "entity.name.function",
          "entity.name.tag",
          "constant",
          "entity.name.type",
          "support.type",
          "support.type.property-name",
          "constant.language.boolean",
          "support.class.component",
          "constant.numeric",
          "meta.tag.sgml",
          "markup.deleted.git_gutter",
          "entity.name.function",
          "variable.function",
          "support.function",
          "keyword.other.special-method",
          "constant.numeric",
          "support.constant",
          "constant.character",
          "constant.escape",
          "keyword.other.unit",
          "keyword.other",
          "constant.language.boolean",
          "entity.name",
          "support.type",
          "support.class",
          "support.other.namespace.use.php",
          "meta.use.php",
          "support.other.namespace.php",
          "markup.changed.git_gutter",
          "support.type.sys-types",
          "text.html.basic entity.other.attribute-name.html",
          "text.html.basic entity.other.attribute-name",
          "entity.other.attribute-name.class",
          "entity.other.attribute-name.id",
          "meta.attribute-selector.scss",
          "variable.parameter.misc.css",
          "source.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "markdown.heading",
          "markup.heading | markup.heading entity.name",
          "markup.heading.markdown punctuation.definition.heading.markdown",
          "markup.heading",
          "markup.inserted.git_gutter",
          "markup.underline",
          "constant.other.reference.link.markdown"
        ],
        "settings": {
          "foreground": "#c19ae6"
        }
      }
    ]
  }

Mesmo assim, o VSCode ainda me parecia muito "poluído", cheio de elementos desnecessários. Foi aí que descobri como editar o CSS do próprio editor para remover algumas coisas usando uma extensão que possíbilita o carregamento de CSS e Javascript no VSCode:

.title-label {
  display: none;
}

.editor-actions {
  display: none;
}

Além disso, a barra de título nunca foi útil para mim, então dei um jeito de sumir com ela:

"window.title": " "

Depois, resolvi harmonizar as fontes do VSCode com meu setup. Para isso, usei a extensão Fonted e configurei a fonte JetBrains Mono:

"fonted.font": "JetBrains Mono"

Por fim, removi outros elementos como o minimapa, timeline e a barra de atividades, deixando o VSCode bem minimalista e limpo. Agora ele finalmente combina com o meu Windows 11:

Levei cerca de 2 horas para finalizar tudo, mas o esforço definitivamente valeu a pena. Programar em um ambiente que combina comigo me motivou ainda mais. Percebi uma grande melhora na minha produtividade, simplesmente por programar em uma interface que me agrada 100%.

Se alguém quiser experimentar, segue abaixo minha configuração completa do settings.json:

{
  "explorer.confirmDelete": false,
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "explorer.confirmDragAndDrop": false,
  "editor.unicodeHighlight.allowedCharacters": {
    "ㅤ": true,
    "‎": true
  },
  "liveServer.settings.useLocalIp": true,
  "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
  "terminal.integrated.env.windows": {},
  "workbench.editorAssociations": {
    "*.sqlite": "default"
  },
  "git.autofetch": true,
  "importCost.smallPackageSize": 0,
  "terminal.integrated.env.linux": {},
  "javascript.inlayHints.parameterNames.enabled": "all",
  "window.zoomLevel": 0,
  "symbols.folders.associations": {
    "actions": "folder-orange",
    "tests": "folder-utils",
    "constants": "folder-config"
  },
  "symbols.hidesExplorerArrows": false,
  "editor.fontFamily": "JetBrainsMono Nerd Font",
  "terminal.integrated.fontFamily": "JetBrainsMono Nerd Font",
  "editor.fontWeight": "200",
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.tabSize": 2,
  "editor.rulers": [100],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[html]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[prisma]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "Prisma.prisma"
  },
  "[astro]": {
    "editor.defaultFormatter": "astro-build.astro-vscode",
    "editor.formatOnSave": true
  },
  "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]],
  "editor.renderLineHighlight": "gutter",
  "editor.fontLigatures": true,
  "workbench.editor.labelFormat": "short",
  "explorer.compactFolders": true,
  "editor.semanticHighlighting.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.scrollbar.horizontal": "hidden",
  "editor.wordWrap": "on",
  "prettier.printWidth": 100,
  "editor.stickyScroll.enabled": false,
  "workbench.activityBar.location": "hidden",
  "workbench.layoutControl.enabled": false,
  "editor.minimap.enabled": false,
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "*.ts": "${capture}.js",
    "*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
    "*.jsx": "${capture}.js",
    "*.tsx": "${capture}.ts",
    "tsconfig.json": "tsconfig.*.json, tsconfig*",
    "package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lockb, .eslintrc*, .gitignore",
    "tailwind.config*": "tailwind.config*, postcss.config*",
    " .env": ".env*",
    "*.sqlite": "${capture}.${extname}-*",
    "*.db": "${capture}.${extname}-*",
    "*.sqlite3": "${capture}.${extname}-*",
    "*.db3": "${capture}.${extname}-*",
    "*.sdb": "${capture}.${extname}-*",
    "*.s3db": "${capture}.${extname}-*"
  },
  "editor.formatOnSave": true,
  "vscode_custom_css.imports": ["file:///C:/Users/Kauã Braz/.vscode/vscode.css"],
  "window.commandCenter": false,
  "typescript.suggest.autoImports": true,
  "workbench.productIconTheme": "fluent-icons",
  "files.associations": {
    "*.astro": "astro"
  },
  "discord.detailsEditing": "Editando {file_name}",
  "explorer.confirmPasteNative": false,
  "workbench.iconTheme": "symbols",
  "workbench.colorTheme": "Vesper",
  "tabnine.experimentalAutoImports": true,
  "fonted.font": "JetBrains Mono",
  "window.title": " ", // sem barra de título

  // CONFFIGURAÇÕES DO TEMA VESPER
  "workbench.colorCustomizations": {
    "badge.background": "#9435ED",
    "focusBorder": "#9435ED",
    "list.highlightForeground": "#9435ED",
    "textLink.foreground": "#9435ED",
    "ettings.modifiedItemIndicator": "#9435ED",
    "editorWarning.foreground": "#9435ED",
    "editorGutter.modifiedBackground": "#9435ED",
    "activityBarBadge.background": "#9435ED",
    "statusBarItem.remoteBackground": "#9435ED",
    "list.activeSelectionForeground": "#9435ED",
    "button.background": "#9435ED",
    "button.hoverBackground": "#b772f8",
    "editor.background": "#0c0c0c",
    "sideBar.background": "#0c0c0c",
    "sideBarSectionHeader.background": "#0c0c0c",
    "activityBar.background": "#0c0c0c",
    "titleBar.activeBackground": "#0c0c0c",
    "titleBar.inactiveBackground": "#0c0c0c",
    "panel.background": "#0c0c0c",
    "editorGroupHeader.tabsBackground": "#0c0c0c",
    "tab.inactiveBackground": "#0c0c0c",
    "editorGroupHeader.noTabsBackground": "#0c0c0c",
    "list.activeSelectionBackground": "#0c0c0c",
    "list.inactiveSelectionBackground": "#0c0c0c",
    "list.hoverBackground": "#0c0c0c",
    "editorGutter.background": "#0c0c0c",
    "dropdown.background": "#0c0c0c",
    "menu.background": "#0c0c0c",
    "quickInput.background": "#0c0c0c",
    "scrollbarSlider.background": "#0c0c0c",
    "scrollbarSlider.hoverBackground": "#1A1A1A",
    "statusBar.background": "#0c0c0c",
    "terminal.background": "#00000000"
  },
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": [
          "entity.name.function",
          "entity.name.tag",
          "constant",
          "entity.name.type",
          "support.type",
          "support.type.property-name",
          "constant.language.boolean",
          "support.class.component",
          "constant.numeric",
          "meta.tag.sgml",
          "markup.deleted.git_gutter",
          "entity.name.function",
          "variable.function",
          "support.function",
          "keyword.other.special-method",
          "constant.numeric",
          "support.constant",
          "constant.character",
          "constant.escape",
          "keyword.other.unit",
          "keyword.other",
          "constant.language.boolean",
          "entity.name",
          "support.type",
          "support.class",
          "support.other.namespace.use.php",
          "meta.use.php",
          "support.other.namespace.php",
          "markup.changed.git_gutter",
          "support.type.sys-types",
          "text.html.basic entity.other.attribute-name.html",
          "text.html.basic entity.other.attribute-name",
          "entity.other.attribute-name.class",
          "entity.other.attribute-name.id",
          "meta.attribute-selector.scss",
          "variable.parameter.misc.css",
          "source.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json",
          "markdown.heading",
          "markup.heading | markup.heading entity.name",
          "markup.heading.markdown punctuation.definition.heading.markdown",
          "markup.heading",
          "markup.inserted.git_gutter",
          "markup.underline",
          "constant.other.reference.link.markdown"
        ],
        "settings": {
          "foreground": "#c19ae6"
        }
      }
    ]
  }
}

Obrigado por ler 💖

Carregando publicação patrocinada...