Confira umas dicas do editor Visual Studio Code.

Dicas do Editor Visual Studio Code (vscode)

0022 Dicas de Visual Studio Code

Siga as seguintes instruções para mudar o idioma do Visual Studio Code (vscode) para português do Brasil:

Abra o Command Palette (Paleta de Comandos). Clique View -> Command Palette. Ou pela hotkey: Ctrl+Shift+P no Windows; CMD+P no macOS.

![Menu View no Visual Studio Code tem como uma das opções o Command Palette](/images/courses/0022/lessons/01/0022_01_01.png) 

Digite `Configure Display Language` na caixa de texto. Escolha essa opção com um clique ou aperte ENTER.

![Configure Display Language digitado no Command Palette do Visual Studio Code](/images/courses/0022/lessons/01/0022_01_02.png) 

Clique `Install Additional Languages`.

![Install Additional Languages no Command Palette do Visual Studio Code](/images/courses/0022/lessons/01/0022_01_03.png) 

O vscode te levará ao painél de extensões com o seguinte digitado: `@category:"language packs"`

Haverá vários ítens na lista de resultados de busca. Procure pelo item que diz `Portuguese (Brazil) Language Pack for Visual Studio` e clique `Install`.

![Extensão para o idioma português no vscode: Portuguese (Brazil) Language Pack for Visual Studio](/images/courses/0022/lessons/01/0022_01_04.png) 

O vscode irá pedir para reiniciar. Clique no botão de Restart, que provavelmente aparecerá no lado inferior direito da tela. Em uma versão mais nova do Visual Studio Code, o botão é `Change Language and Restart` ("Mudar Idioma e Reiniciar").

![Screenshot que mostra no canto inferior direito da janela o Botão para Reiniciar o vscode com o novo idioma instalado: Change Language and Restart](/images/courses/0022/lessons/01/0022_01_05.png)

Depois de reiniciar, o Visual Studio Code aparecerá com o menu e vários outros textos traduzidos para o português.

Para mudar o idioma do Visual Studio Code para outro que não seja o português, basta seguir os mesmos passos acima, mas escolher outra linguagem. Se a extensão da linguagem já estiver instalada, só precisa escolhê-la no passo de Configure Display Language. Por exemplo, para mudar de volta para inglês, selecione `en`. Depois disso, não haverá necessidade de ir novamente ao painél de extensões como a linguagem já fora instalada anteriormente.


Como Mudar o Idioma do Visual Studio Code vscode para Portugues do Brasil

Nesta aula vou te ensinar como mudar o idioma do Visual Studio Code para português do Brasil.
Vamos lá? O meu sistema é o .linux, versão 20.04, eu instalei o Visual Studio Code através da loja de programas software.
Vou executar o Visual Studio Code, deixar aqui no lado esquerdo da tela.
Então a gente vai abrir o Command Palette, é um menu de comandos. Se você não sabe a shortcut, só clicar view, Command Palette.
Contro o Shift P, procura Configure, Display, Language, como já sugere aqui, entra.
Como não tem a linguagem PT traço BR, ou português do Brasil, eu clico install additional languages.
Isso na verdade abre o menu de extensões. Contro o Shift X e na verdade ele digita a rouba Category, dois pontos, Aspas Duples, Language, Espaço, Packs, Fecha Aspas Duples.
Na verdade teria o equivalente a você ir a extensões e digitar essa coisa aqui.
Aí tem várias linguagens, estou interessado em português do Brasil, clica na existência e clica install.
Agora está dizendo que precisa reiniciar, clica no botão de reiniciar o VS Code.
E agora temos os itens do menu em português do Brasil.
Se você quiser mudar a linguagem de novo, é só abrir o Command Palette, ver paleta de comandos, configurar idioma de exibição e mudar para EN e reiniciar e tal.
Também pode ser usado para instalar qualquer outra extensão para mudar o idioma do Visual Studio Code, VS Code.
Então por essa é só e até a próxima.


0022-01 Como Mudar o Idioma do Visual Studio Code vscode para Portugues do Brasil

Siga as seguintes instruções para quebrar linhas longas no Visual Studio Code por padrão.

Clique View -> Word Wrap. A hotkey é Alt+Z no Windows. Alt no macOS é chamada de Option.

![Opção de Word Wrap do menu de View no Visual Studio Code](/images/courses/0022/lessons/02/0022_02_01.png) 

Note que essa quebra de linha é virtual, só para ajudar a visualização melhor do texto do arquivo, se a linha for mais longa que a largura da tela. Na realidade não há um caractere de quebra de linha adicionado quando o arquivo é salvo.


Como Quebrar Linhas Longas no Visual Studio Code Virtualmente por Padrão

Olá pessoal, estamos de volta com mais uma aula, vou te dar mais uma dica de visual
studio code, essa vai ser para aqueles que trabalham com linhas longas e é, vai ter
e tem esse problema de ficar usando a barra de rolagem o tempo todo, é uma das minhas
preferências favoritas que eu sempre tenho ativado, a quebra de linha simulada.
Então vamos lá, eu tenho um arquivo de texto aqui e as linhas são muito longas, você
note que esses parágrafos são muito longas e se eu quiser ler, eu sempre vou estar aqui
rolando a barra horizontal, de rolar de horizontal para a direita, para a esquerda, para a direita,
para a esquerda todo o tempo.
Então obviamente você poderia quebrar uma linha manualmente, mas vamos supor que você
não pode aditar o arquivo.
Então como melhorar isso para a gente?
Bem, tem uma opção no visual studio code que é bem simples de ativar, você clica em
view e word wrap, ou no meu caso alt z, do windows.
Então você note que agora o conteúdo de cada linha longa, as linhas são quebradas
virtualmente, não é uma quebra real, mas fica melhor da gente visualizar, não tem
mais a barra de rolagem.
Então ele vai quebrar a linha simulada virtualmente no final da largura da sua tela.
Note que as linhas continuam sendo uma única linha, linha 1, linha 3, linha 5, o que aconteceu
que mudou foi só a representação da nossa visão.
O vj studio code viu que apareceu a barra de rolagem, então ele fez a linha se dividir
em várias sublinhas que na verdade ainda é a mesma linha.
Então note que por exemplo essa primeira ainda é só uma linha, mas é mais fácil de visualizar.
Se eu quebrar a linha aqui, aí sim que tem uma nova linha.
Então é isso pessoal, a propriedade do word wrap, e você pode ativar no visual studio
code para poder melhorar a leitura de linhas muito longas.
E o sem aparativo padrão, se você adicionar os seus settings, ponto json, tem lá, vamos
ver aqui preferences, settings, word wrap, você pode ativar aqui por padrão, você pode
ativar on, que ele vai sempre abrir com o word wrap ativado.
No caso se eu te mostrar também os settings json, se eu abrirmos os rjson aqui, você
pode usar declarar nos settings.json manualmente dessa maneira.
A propriedade se chama editor.wordwrap, dois pontos, o valor é on para ativar.
Tá bom pessoal?
Então por essa aula é só, espero que tenha gostado e até a próxima.
Tchau.


0022-02 Como Quebrar Linhas Longas no Visual Studio Code Virtualmente por Padrão

Como Mostrar Regras (Barras Linhas Verticais) no Visual Studio Code

Olá pessoal, estão de volta com mais uma aula, eu te dar uma dica de Visual Studio Code,
eu te demonstrar como mostra regras ou barras verticais no painel de texto.
Antigamente o pessoal tinha muito isso de você só digitar no máximo 80 colunas de texto,
80 caracteres por linha na área de digitar texto no terminal e se pude antes.
Hoje em dia você pode digitar mais não tem problema, mas tem gente que ainda tem esse padrão de estilo,
ainda que seja de 80 colunas, 100 colunas, 120.
Então eu vou te mostrar como você pode adicionar uma barra vertical ou uma regra no Visual Studio Code
para você poder ter uma referência de quantos caracteres ou quantos colunas a sua linha já tem,
na medida que você escreve o seu código.
Uma das vantagens de ter essas regras que eu acho é que você pode ter um limite de colunas
para você não precisar arrastar, usar barra de rolar sempre que você está vendo o código.
Mas é claro que tem aquela função que quebra as linhas se o texto não couber na tela,
mas essa função é por padrão desativada no Visual Studio Code e também quando você olhar em outros locais
e você tem essa função, você vai ter que rolar horizontalmente para poder ver o conteúdo de toda a linha
se a linha for muito longa, então é importante ter essas barras.
Então vamos lá. Então aqui no Visual Studio Code é bem simples, você vai lá nas suas preferências, certo?
Então você pode clicar em File, Preferences, Settings, nas suas preferências, na Abutax Editor,
você vê a racha lá para a letra R, você note que está em forma alfabetica e vai procurar pela opção Rulers, essa aqui, R-U-L-E-R-S.
Se você não achar só digitar aqui na busca Rulers, que ele aparece aqui, né?
Aí você vai ter que aditar o arquivo de AutoSAN, tá? De Preferências.
Então eu tinha letrado o meu só para poder demonstrar isso, então ele criou um novo Seres.json, normalmente se você já tem, ele já mostra o Editor Rulers aqui.
Então dentro desse objeto de AutoSAN, eu abri as aspas duples, vou falar Editor.ru-le-rs.
Você vai adicionar a propriedade chamada Editor.ru-le-rs e a essa propriedade você põe 2 pontos e o valor vai ser 1 array, tá?
Então abre, fecha, fecha, fecha, fecha.
E dentro você vai colocar quantas colunas, onde é que você quer que a regra apareça.
exemplo, se eu quero carregar a vertical aparece na coluna só de 80, eu digito 80 aqui, eu salvo
se você notar aqui o próprio painel de editor de teste já adicionou a barra vertical na posição 80
se você for até a posição 80 ele vai lá, se você digitar um monte de coisa, note que você mostra aqui embaixo
50, 60, 70 até que eu chego na coluna lá, 80, que é essa aqui que ele adiciona a barra, na 80
no final do cursor, então eu gosto também de ter 100, então você pode assinar várias barras
vertical, um novo elemento na array, vírgula 100, ele adiciona um na 100 lá e se você realmente tem uma tela bem
enlargada você pode tutar 120 que aparece outro aqui e assim por diante você escolhe o seu, mas eu acho que esses
números são bem padrão, especialmente o 80, que tem a gente, regra geral de estilo, gosta de seguir
no máximo 80 caracteres por linha, mas como hoje os monitores as telas são mais, tem largura maior
você pode ir até 100 ou 120, é claro que tem gente que pode, quanto quiser, mas aí você vai ter que usar a barra de
rolage, e esse é o motivo de você não querer digitar uma linha muito longa, você vai ter que ficar todo
tempo usando a barra, note que eu tenho a barra de rolage, então a gente pode quebrar na 80, ou você quebra na 100,
você quer 120, é claro que tem também aquela função, porque claro, o wardrap que ele vai só quebrar de mentira, mas na
verdade não quebrou, só de mentira, mas nem todos quantos que você vai visualizar esse arquivo tem essa função,
é só do visual studio code, isso não significa quebrou a linha, ainda está na mesma linha, só que o editor
colocou na alta linha para ficar melhor para você ver, então vou tirar isso, view wardrap, então é isso pessoal, essa é a
regra configuração do visual studio code, você tem que ir em settings, rulers, tem que editar arquivo settings.json,
e tem que adicionar a propriedade editor.rulers, cujo valor é uma array de números inteiros, onde é que as
barras besticais aparecerão, muito obrigado por assistir e até a próxima.


Como Sempre Mostrar Caracteres Invisíveis como Espaço e Tab no Visual Studio Code

Olá pessoal estamos de volta com mais uma aula de Visual Studio Code, uma dica para você aqui.
Essa dica vai para aqueles que querem saber se você está digitando, se você tem uma tab ou você tem um espaço no arquivo, no texto.
Isso é bem útil para o pessoal que trabalha com programação e quer eliminar espaços redundantes,
ou quer corretamente usar uma tab ou espaço para a indentação.
Estou aqui com um arquivo de texto que adicionei os caracteres de tab e de espaço em várias linhas aqui.
Por padrão aqui eu não sei se esses espaços da linha 1 são tab ou chia espaço em branco.
Eu não sei se a linha 5 é tab ou espaço em branco.
Bem, essa configuração padrão dessa novidade, dessa feature,
é que se você selecionar os espaços você pode identificar o que eles são.
Por exemplo, eu selecionei na linha 7 e esses pontinhos no meio,
pontinhos centralizados, significa espaço em branco, não é uma tab.
Vamos ver na linha 5 se eu selecionar.
Eu selecionei os espaços no começo da linha 5 e essa seta para a direita no começo dos espaços significa que eu usei a tecla tab.
Realmente tem um caracter de tab.
Na programação normalmente é o barra T contra o barra T.
Seria legal se a gente conseguisse ver sem ter que selecionar.
É muito útil quando você, por exemplo, você quer confirmar que a linha 4, por exemplo, não tenha nenhum caracter.
O menor de que eu adicionei espaço na linha 4 poderia ser que eu nem tinha notado isso.
Quando eu vou adicionar, por exemplo, esse arquivo no controle de versão,
normalmente a gente quer eliminar esses espaços das linhas em branco,
se não vai ocupar espaço em branco que não serve para nada.
A gente não, para a gente não significa nada,
mas o computador vai ver que tem espaço aqui ocupando espaço.
Não precisa para ter que deletar, mas eu não sabia, não dava para saber de cara.
Então vamos ver com essa configuração do video studio code para sempre mostrar os caracteres invisíveis sem a gente ter que selecionar.
Você vai em File, Preferences, Settings.
A opção se chama Render White Space.
Se você está na busca Render White Space, ele está no Text Editor aqui, Mostra.
Editor Render White Space.
Você note que o valor é Selection, que significa que você só dá para ver os caracteres invisíveis quando você selecionar os caracteres.
Então vamos mudar isso, a gente pode mudar para All, significa que ele sempre vai mostrar.
Se eu vou dar para All, vamos ver, vamos botar o nosso arquivo.
Note que agora apareceu os pontinhos, deixa eu aumentar aqui para ver se você vê melhor.
Na linha 1 apareceu 4 pontinhos centralizados, significação 4 de espaços em branco.
Na linha 2 eu note que tem uns espaços, eu não quero esse espaço,
senão eu deletaria ele antes de fazer o commit, por exemplo, em controle de versão, git.
Você note que na linha 3 está usando espaço, dois espaços.
Na linha 5 está usando tab, olha, combinou tab com espaço.
Normalmente tem pessoal que usa tab, tem pessoal que usa espaço.
Eu pessoalmente gosto de espaço, então eu poderia corrigir isso.
Não é tab, tem que ser espaço, dois espaços, por exemplo.
E na mesma linha 10 tem uma tab, porque tem a seta para a direita, no começo dos espaços.
Então o pontinho significa espaço em branco e a seta para a direita significa uma tab.
Tá bom pessoal, eu vou notar que cada espaço aparece um pontinho e dá para você identificar esses caracteres invisíveis.
Na linha 4 não precisaria desses caracteres, os trilhetes, porque é redundante, né?
A linha em branco não precisa ter, ocupar espaço em branco.
E assim por diante você corrigiria os seus espaços e tal e tal, né?
Tá bom pessoal, então deixa eu só mostrar o serange.json, disso aqui.
Seu digitar ControlShift P no Windows, no meu caso.
Preferences Open Serans.json, você note que a propriedade que você declarar no seu serange.json
é editor.renderwhitespace com valor all al.
Parece o zoom level que eu amentei o texto, tá?
Tá vendo que o zoom level esse negócio.
Tá bom pessoal, então por essa aula é só e até a próxima.
