Configurações e extensões essenciais para o Visual Studio Code

Para acessar o arquivo de configurações em formato JSON no VS Code, utilize a paleta de comandos com Ctrl + Shift + P e digite Preferências: Abrir Configurações (JSON).

Personalização da barra de rolagem e minimapa

Adicione o seguinte trecho ao final do arquivo de configurações para alterar as cores da barra de rolagem e do minimapa, ajustando os valores hexadecimais conforme sua preferência:

{
    "workbench.colorCustomizations": {
        "scrollbarSlider.activeBackground": "#ff6347",
        "scrollbarSlider.hoverBackground": "#4682b4",
        "scrollbarSlider.background": "#8b4513",
        "minimap.background": "#333333"
    }
}

Edição e pré-visualização de arquivos .md

Para arquivos Markdown, o VS Code oferece suporte integrado para edição e visualização. Você pode alternar entre os modos usando o ícone de pré-visualização na barra de ferramentas ou comandos específicos.

Conversão de maiúsculas e minúsculas

Existem extensões disponíveis que permitem transformar rapidamente o texto selecionado entre maiúsculas, minúsculas ou capitalização. Pesquise por extensões como "change-case" na loja de extensões do VS Code.

Marcadores (Bookmarks)

Utilize extensões de marcadores para salvar posições em seu código e navegar facilmente entre elas, aumentando a produtividade em projetos grandes.

Suporte a idiomas

O VS Code pode ser configurado para exibir a interface em diferentes idiomas, como chinês simplificado, através de extensões de localização.

Desativando a formatação automática ao salvar

Usando o Pretteir

  1. Abra as configurações do VS Code com Ctrl + ,.
  2. Pesquise por format on save e desmarque a opção Editor: Format On Save.
  3. No campo Editor: Default Formatter, selecione esbenp.prettier-vscode se desejar usar o Prettier manualmente.

Usando o Beautify

  1. Abra as configurações do VS Code com Ctrl + ,.
  2. Pesquise por format on save e desmarque a opção Editor: Format On Save.
  3. Na seção Beautify: Language, certifique-se de que html está incluído, se aplicável.

Extensões para Git

O VS Code possui suporte integrado ao Git, mas extensões como GitLens podem aprimorar a experiência com recursos avançados de visualização de histórico e blame.

Verificação ortográfica

Instale extensões de verificação ortográfica para detectar erros de digitação em arquivos de texto, como "Code Spell Checker".

Prettier - Formatador de código

O Prettier é uma ferramenta popular para formatação de código. Configure-o nas preferências do VS Code para aplicar regras de formatação consistentes.

ESLint

Para projetos JavaScript ou TypeScript, o ESLint ajuda a manter a qualidade do código. Integre-o ao VS Code para obter alertas em tempo real.

Serviço de linguagem Angular

A extensão Angular Language Service fornece suporte aprimorado para desenvolvimento com Angular, incluindo autocompletar e navegação.

C# Dev Kit

Para desenvolvimento em C#, instale o C# Dev Kit. Se o .NET SDK estiver instalado, essa extensão permite desenvolver e depurar projetos diretamente no VS Code.

Posicionamento de abas ao abrir arquivos

Para que novas abas se abram sempre após a última aba existente, altere a configuração workbench.editor.openPositioning para last nas preferências do VS Code.

Exibição de múltiplas linhas de abas

Configure o VS Code para exibir abas em múltiplas linhas, em vez de uma única linha rolável, ativando a opção workbench.editor.wrapTabs.

Personalização da cor da aba ativa

Adicione o seguinte código ao arquivo de configurações JSON para alterar a cor da borda da aba ativa:

{
    "workbench.colorCustomizations": {
        "tab.activeBorder": "#1a7dc4",
        "tab.activeBorderTop": "#1a7dc4",
        "tab.activeModifiedBorder": "#f50707"
    }
}

Configuração de fontes

Baixe a fonte monoespaçada "Maple Mono" do repositório oficial, instale-a no sistema e adicione as seguintes configurações ao VS Code:

{
    "editor.fontFamily": "'Maple Mono NF CN', Consolas, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.letterSpacing": 0.5,
    "editor.lineHeight": 1.6,
    "editor.fontWeight": "normal",
    "terminal.integrated.fontFamily": "'Maple Mono NF CN'",
    "terminal.integrated.lineHeight": 1.4,
    "terminal.integrated.letterSpacing": 0.5,
    "terminal.integrated.fontWeight": "normal",
    "terminal.integrated.cursorBlinking": true
}

Alternativamente, você pode usar a fonte "Cascadia Mono" da Microsoft, embora não suporte caracteres chineses. Considere também ajustar o tamanho do texto:

{
    "editor.fontSize": 15,
    "window.zoomLevel": 1.5
}

Quebra de texto automática

Para configurar a quebra de linha com base em um número fixo de colunas, adicione:

{
    "[markdown]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.wordWrap": "wordWrapColumn",
        "editor.wordWrapColumn": 110
    },
    "editor.wordWrap": "wordWrapColumn",
    "editor.wordWrapColumn": 110
}

Exibição de histórico de modificações com GitLens

O GitLens permite visualizar o histórico de alterações por linha ou arquivo. Configure-o nas extensões para exibir detalhes de commits diretamente no editor.

Ajuste da largura da barra de rolagem

Para alterar a largura da barra de rolagem vertical, use a seguinte configuração:

{
    "editor.scrollbar.verticalScrollbarSize": 20
}

Tags: vscode extensões Configurações JSON Prettier

Publicado em 7-6 02:32