Alterar a cor do texto de destaque no Visual Studio Code


114

No momento, é uma sobreposição cinza esmaecida, que é difícil de ver. Alguma maneira de alterar a cor padrão?

insira a descrição da imagem aqui


Ferramentas -> Opções, em geral: Fontes e cores
Austin T French

10
Código do Visual Studio, não VS 2013, 2015, etc.
duyn9uyen

Respostas:


14

Atualização Veja a resposta de @Jakub Zawiślak para VScode 1.12+


Resposta antiga

O Visual Studio Code chama essa seleção de realce e, infelizmente, não acho que a cor seja personalizável atualmente. Os temas podem controlar a cor de 'seleção', mas a cor de 'destaque de seleção' é codificada.

Veja este problema rastreando uma possível solução: https://github.com/Microsoft/vscode/issues/1636

(Como observação lateral, você pode alternar esse recurso ou / desligar com a editor.selectionHighlightconfiguração.)


4
Obsoleto .
Alex

4
Atualizado para fazer referência à resposta de Jakub Zawiślak para versões modernas do VSCode
Matt Bierner

@ duyn9uyen, é melhor mudar a resposta aceita.
kmchmk

266

Adicione as seguintes linhas na configuração "Editor: Token Color Customizations", dentro do arquivo settings.json.

"workbench.colorCustomizations": {
    "editor.selectionBackground": "#135564",
    "editor.selectionHighlightBackground": "#135564"
},

Veja a Referência de Cores do Tema para mais opções


5
Existe alguma maneira de mudar a cor do texto? Caso contrário, você terá que encontrar uma cor de fundo que mantenha a legibilidade quando combinada com cada uma das cores em seu esquema de cores. Este é um dos dois problemas que infelizmente me impedem de usar o VS Code ...
Bruno Ely

3
@BrunoBEly Se você abrir "workbench.colorCustomizations": {}e começar a digitar "editor.selection, o menu de preenchimento automático irá sugerir todas as teclas possíveis e sua explicação, incluindo o primeiro plano de seleção.
Tobia

2
@Tobia obrigada pela dica! Eu encontrei, mas provavelmente estou fazendo algo errado. Defini o fundo e o primeiro plano como vermelho, mas apenas o fundo parece funcionar (estou usando o VS Code 1.18.0)
Bruno Ely

1
para o terminal: "terminal.selectionBackground": "#f1eeb3a9",
JinSnow,

1
Isso não parece funcionar para Python, a configuração selectionHighlightBackgroundnão parece afetar a cor que o vscode usa ao destacar os usos de uma variável ou função (por exemplo)
jrh

48

As respostas acima cobrem o Selected texte areas with same content as selection, mas não o Current Search Matche Other Search Matches- que têm o mesmo problema .

"workbench.colorCustomizations": {
    "editor.findMatchBackground": "#00cc44a8", //Current SEARCH MATCH
    "editor.findMatchHighlightBackground": "#ff7b00a1" //Other SEARCH MATCHES
}

Observe que as configurações acima também afetarão as cores ao usar Change All Occurrences CtrlF2 (um comando superútil que seleciona inteligentemente todas as ocorrências de uma string, colocando cursores em cada local para edição de múltiplas instâncias) .

ATUALIZAR:

Para aqueles que usam a popular extensão Marcadores numerados - agora você pode alterar a cor de fundo das linhas marcadas - torna muito fácil notá-los. Adicione esta linha ao seu settings.json (também em workbench.colorCustomizations ):

        "numberedBookmarks.lineBackground": "#007700"

E não perca a dica útil de Henry Zhu em sua resposta abaixo (lembre-se de votar a favor da resposta se você achar útil) . Eu adicionei a dica de Henry às configurações acima e descobri que o efeito geral melhorou.


Exemplo de um arquivo de configurações típico, pós-mod:

    {
        "git.enableSmartCommit": true,
        "git.autofetch": verdadeiro,
        "breadcrumbs.enabled": verdadeiro,
        "git.confirmSync": false,
        "explorer.confirmDelete": falso,
        "code-runner.saveFileBeforeRun": true,
        "code-runner.saveAllFilesBeforeRun": true,
        "workbench.activityBar.visible": verdadeiro,
        "files.trimTrailingWhitespace": verdadeiro,
        "telemetry.enableTelemetry": falso,
        "scm.providers.visible": 0, // 0 permite o redimensionamento manual dos painéis de controle de origem
        "workbench.colorCustomizations": {
            "editor.selectionBackground": "# e788ff7c", // Texto SELECIONADO
            "editor.selectionHighlightBackground": "# ff00005b", // Mesmo conteúdo da seleção
            "editor.findMatchBackground": "# 00cc44a8", // CORRESPONDÊNCIA DE PESQUISA atual
            "editor.findMatchHighlightBackground": "# ff7b00a1", // Outros SEARCH MATCHES
            "numberedBookmarks.lineBackground": "# 007700"
            // A dica do Henry vai aqui ... (não se esqueça de adicionar vírgula à linha acima)
        }
    }


Onde encontrar o arquivo settings.json:

Depending on your platform, the user settings file is located here:

Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

Método ALTERNATE para abrir o arquivo settings.json:

  1. Ctrl +, (vírgula) para abrir as configurações

  2. Bancada de trabalho

  3. Editor de configurações

  4. Na caixa de pesquisa na parte superior, cole workbench.colorCustomizations

  5. À esquerda, clique Workbenche depoisAppearance

  6. Clique no link à direita: Edit in settings.json

Referências:

https://code.visualstudio.com/api/references/theme-color#editor-colors

https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme

https://code.visualstudio.com/docs/getstarted/settings


1
Eu também achei isso útil em conjunto com esta resposta para encontrar correspondências rapidamente. Observe o suporte para RGBA (no meu uso, a configuração 75 alfa no final dos valores de cor:"editor.wordHighlightBorder": "#00ff0075", "editor.findMatchHighlightBorder": "#00ff0075"
Neil Guy Lindberg

Obrigado por essa dica, Neil. Vou tentar
cssyphus

Alguém sabe como isso é possível para as correspondências na pesquisa do terminal?
holzkohlengrill

20

Se alguém encontrar isso e, como eu, não conseguir fazer a configuração acima funcionar, tente fazer isso.

  1. vá para arquivo> Preferências> configurações
  2. digite no Editor de pesquisa personalizações de cores de tokens
  3. sob o cabeçalho de personalizações de cor do token do Editor
  4. clique em editar em settings.json
  5. na coluna da direita selecione as configurações do usuário
  6. cole isso no objeto json

Certifique-se de substituir os # pelas cores que deseja ver.

"workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#<color1>",
    "editor.selectionBackground": "#<color2>",
    "editor.wordHighlightBackground": "#<color3>",
    "editorCursor.foreground": "#<color4>"
},

Meu entendimento da configuração acima.

editor.lineHighlightBackground - quando você clica em uma linha, esta é a cor de fundo da linha.

"editor.selectionBackground" - Este é o plano de fundo das seleções correspondentes em qualquer lugar do buffer. Pense em uma variável chamada foo e ela é usada em todo um arquivo. Você então destaca aquele texto e todos os outros foos na página terão esta cor.

"editor.wordHighlightBackground" - Esta é a cor do texto selecionado se a palavra de destaque padrão no clique não tiver efeito. Eu só vi esse valor fazer diferença se você clicar em uma palavra que não é selecionada automaticamente.

editorCursor.foreground - esta é a cor do seu cursor.


2
Esta deve ser a resposta. Estas são as configurações usadas no VSCode versão 1.3+
MaylorTaylor 01 de

editor.lineHighlightBackground parece não estar mais lá, e acho que eles estão dizendo que foi removido intencionalmente: github.com/dracula/visual-studio-code/issues/68
havlock

isso poderia muito bem ser.
FujiRoyale

1
Obrigado, há dias tento encontrar isso e ninguém nunca mencionou o wordHighlightBackground!
Ryan Weiss de

Isso deve ser marcado como a resposta. Correção de 10 segundos!
Nico Butler

17

Como testei, definir a cor da borda torna a leitura mais fácil do que definir a cor de fundo, que é o que o Sublime Text faz.

Por exemplo, adicione estas linhas em settings.json:

"workbench.colorCustomizations": {
    "editor.selectionHighlightBorder": "#FFFA",
},

As palavras selecionadas serão exibidas assim:

insira a descrição da imagem aqui


6

você pode alterá-lo com sua cor favorita:

Passos

  1. Código visual aberto
  2. Ir para menu de arquivo
  3. Preferências -> Configurações

depois de abrir as configurações, você atualizará sua configuração na coluna do lado direito, copie e cole este código dentro dos colchetes principais { ... }

"workbench.colorCustomizations": {
    "editor.selectionBackground": "#f00", // red color hexadecimal code
    "editor.selectionHighlightBackground": "#fff" // white hex code
},

Não pode colocar redou whitecomo valores.
giovannipds

1
giovannipds, é apenas um nome para mostrar, que você pode adicionar qualquer cor Nome, não valor
Rizo

1
Esse é o código, então está errado. rede whitesão cores da web, o que pode confundir as pessoas.
giovannipds

3

Se alguém se pegasse lendo a resposta de @FujiRoyale como nenhuma das outras funcionou, e se perguntou por que a sua também não funcionou, mas como era mais recente me perguntei por que, eu segui sua resposta e tinha (com v1.18 de vscode ) isso como uma user settingsconfiguração:

{
    // Is git enabled
    "git.enabled": true,
    // Path to the git executable
    "git.path": "C:\\Users\\t606964\\AppData\\Local\\Programs\\Git\\mingw64\\bin\\git.exe",
    "workbench.startupEditor": "newUntitledFile",
    // other settings
    //
    "editor.fontSize": 12,
    "editor.tabSize": 2,
    "git.confirmSync": false,
    "workbench.colorTheme": "Monokai",
    "editor.fontWeight": "bold",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "workbench.iconTheme": "vscode-icons",
    "explorer.confirmDelete": false,
    "files.autoSave": "off",
    "workbench.colorCustomizations": {
        "editor.lineHighlightBackground": "#f00",
        "editor.selectionBackground": "#0f0",
        "editor.wordHighlightBackground": "#00f",
        "editorCursor.foreground": "#ff0"
    }
}

Observe o recuo e as vírgulas e a remoção das aspas duplas de sua resposta (o que eu tive que brincar para acertar, o que não ficou muito claro na resposta). Não deve haver necessidade de reiniciar o vscode, mas pode valer a pena ir File > Autosavee ver se você começa a obter destaques de cores primárias. Em seguida, escolha cores melhores para seus destaques.

Você também pode fazer isso funcionar workspace settingscolando

"workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#f00",
    "editor.selectionBackground": "#0f0",
    "editor.wordHighlightBackground": "#00f",
    "editorCursor.foreground": "#ff0"
}

entre o existente {}no painel de configurações do lado direito.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.