Como personalizar o código do Visual Studio

O Visual Studio Code, o novo editor de código de código aberto da Microsoft, fornece aos desenvolvedores muitos recursos impressionantes que facilitar o processo de edição do código fonte. Além disso, o Visual Studio Code também garante que os usuários não ficarão entediados quando trabalharem com ele, já que isso permite que eles personalizar várias partes de sua aparência, como cores, fontes, espaçamento e formatação de texto, assim como muitas funcionalidades, como linting e regras de validação.

Neste post, a princípio vamos dar uma olhada como alterar a aparência da área de trabalho código Visual Studio Code, então eu vou mostrar-lhe como personalizar as configurações padrão com a ajuda de dois JSON-arquivos de configuração formatados.

Como definir um tema de cores no código VS

O Visual Studio Code permite que você definir um tema de cores personalizado para o seu editor.

Para colocar um tema pré-fabricado em uso, clique no Arquivo> Preferências> Tema de Cores menu na barra de menu superior. Quando você bate “Entrar”, a paleta de comandos aparece e exibe uma lista suspensa dos temas que você pode escolher.

Você pode conseguir o mesmo efeito se pressionar F1 para abrir a Paleta de Comandos e digite o Preferências: tema de cores comando no campo de entrada.

À medida que você passa pelas opções na lista suspensa, a aparência do espaço de trabalho muda em tempo real, para que você possa ver rapidamente qual tema atende melhor às suas necessidades.

Eu chooe o “Alto contraste” tema de cor, como meus olhos não são os melhores. Aqui está o que minha visão parece.

Como instalar um tema do mercado de código VS

Se você não gosta de nenhum dos temas de cores que o VS Code oferece por padrão, você pode baixar muitos outros do VS Code Marketplace.

Aqui você pode dar uma olhada nos temas que o Marketplace tem atualmente. Se você quiser instalar um tema no Marketplace, clique em F1 bem dentro do seu editor do VS Code, a fim de abrir a Paleta de Comandos, digite o instalação ext comando no campo de entrada, finalmente escolha o Extensões: Instalar Extensão opção da lista que aparece.

Quando você clica nessa opção, uma nova instância da Paleta de Comandos é exibida. Digite o "ext install theme" comando para o novo campo de entrada, e você obter uma lista de todos os temas que estão disponíveis no VS Code Marketplace.

Eu escolho o tema chamado “Kit de tema material”, e instalá-lo clicando nele. Para ter o novo tema na lista de temas de cores, no mesmo local onde estão os outros temas padrão, você precisa reiniciar o código VS. Depois de reiniciar, o novo tema aparece na lista de temas e você pode configurá-lo na Paleta de Comandos.

Com o novo Tema de Material, meu editor agora se parece com isso:

Você pode voltar ao tema anterior (como eu fiz, porque eu ainda prefiro esse tema) ou você pode brincar um pouco mais com outros temas para ver qual é o mais adequado para você.

Se você quiser, você também pode crie seu tema personalizado, e publicá-lo no VS Code Marketplace usando a ferramenta de gerenciamento de extensão vsce.

Alterar configurações de usuário e espaço de trabalho

O VS Code não permite apenas que você defina um tema personalizado, mas você também pode configurar muitas outras configurações, como regras de formatação, uso de recursos diferentes, relatórios de falhas, configurações de HTTP, associações de arquivos, regras de linting e muito mais.

Você pode fazer isso editando dois arquivos de configuração, ambos no formato JSON. Não se preocupe, você não precisa ser um profissional, pois o VS Code oferece uma maneira simples e intuitiva de adicionar rapidamente suas personalizações..

Primeiramente, vamos ver qual é a diferença entre os dois arquivos de configuração. O VS Code possui dois escopos (global e local) para configurações, daí os dois arquivos separados:

1. o global settings.json, em que as regras de configuração são válidas para cada área de trabalho
2. o relacionado ao espaço de trabalho .vscode / settings.json, isso está relacionado apenas a um espaço de trabalho individual

o global settings.json O arquivo pode ser encontrado na pasta onde seu sistema operacional armazena todos os outros arquivos de configuração relacionados ao aplicativo, respectivamente:

• no Windows: % APPDATA% \ Code \ User \ settings.json
• no Linux: $ HOME / .config / Code / User / settings.json
• no Mac: $ HOME / Library / Application Support / Código / Usuário / settings.json

o relacionados ao espaço de trabalho settings.json arquivo é armazenado na pasta do seu projeto atual. Por padrão, esse arquivo não existe, mas assim que você adiciona uma configuração personalizada da área de trabalho, o VS Code cria .vscode / settings.json arquivo de uma só vez e coloca configurações específicas da área de trabalho.

Então, quando você usa o settings.json arquivos?

Se você quiser que o VS Code use suas regras de configuração personalizadas todos seus projetos, coloque-os no mercado global settings.json Arquivo.

Se você quiser que suas configurações só sejam válidas em seu projeto atual, colocá-los no espaço de trabalho relacionado settings.json Arquivo.

As configurações da área de trabalho substituem as configurações globais, por isso tem cuidado.

Configurações globais são chamadas “Configurações do usuário” no código VS. Abra-os clicando no Arquivo> Preferências> Configurações do Usuário menu, ou começando a digitar a expressão “Configurações do usuário” na Paleta de Comandos (abra-a com F1).

O VS Code abre dois painéis ao lado do outro: o da esquerda contém todas as opções que podem ser configuradas, e o da direita exibe o global settings.json Arquivo. Você precisa colocar suas regras de configuração personalizadas neste arquivo.

Como você pode ver, não é necessário fazer mais nada, basta copiar e colar as configurações que deseja alterar do lado esquerdo para a direita e adicionar os valores modificados.

Vamos dar uma olhada em um breve exemplo (mas você pode fazer outras modificações de acordo com suas necessidades individuais). Eu vou mudar a família da fonte, reduzir o comprimento de uma aba dos quatro espaços padrão para dois, reduza o número máximo de arquivos de trabalho de nove para cinco e altere uma das regras de linting de CSS referentes a estilos duplicados de "ignorar" para "Aviso".

Depois de copiar e colar, meu global settings.json arquivo se parece com isso:

 // Coloque suas configurações neste arquivo para sobrescrever as configurações padrão "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "Aviso" 

Depois de salvar o modificado settings.json arquivo, a aparência do meu editor muda de uma vez (na tela abaixo apenas a mudança da família da fonte é visível):

Você pode alterar as configurações da área de trabalho de forma semelhante. Agora você precisa clicar no Arquivo> Preferências> Configurações do Espaço de Trabalho na barra de menu superior para acessar as informações relacionadas ao espaço de trabalho. .vscode / settings.json Arquivo.

As configurações da área de trabalho têm exatamente as mesmas opções de configuração que as Configurações do usuário, e você pode usar a mesma técnica de copiar e colar. Existem apenas duas diferenças, o escopo (local em vez de global) e o settings.json arquivo no qual suas configurações personalizadas serão salvas.