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

# Como Mudar o Idioma do Visual Studio Code para Português do Brasil

Nesta aula, você aprenderá a alterar o idioma do Visual Studio Code (VS Code) para português do Brasil. 

## Passo a Passo:

1. **Sistema Operacional**: O tutorial é baseado no Linux, versão 20.04, e assume que o VS Code foi instalado através da loja de programas.

2. **Abrindo o VS Code**: Execute o Visual Studio Code e mantenha-o na lateral esquerda da tela.

3. **Abrindo o Command Palette**:
   - Você pode abrir o Command Palette usando o atalho `Ctrl + Shift + P`.
   - Procure por `Configure Display Language` e selecione a opção correspondente.

4. **Instalando Idiomas Adicionais**:
   - Como o idioma português do Brasil (PT-BR) não está disponível, clique em `Install Additional Languages`.
   - Isso abrirá o menu de extensões. Você pode usar o atalho `Ctrl + Shift + X`.
   - Digite a seguinte consulta na caixa de pesquisa:
     ```
     @category:"Language Packs"
     ```
   - Isso mostrará várias linguagens disponíveis.

5. **Selecionando o Idioma**:
   - Localize e clique na opção para português do Brasil e, em seguida, clique em `Install`.

6. **Reiniciando o VS Code**: 
   - Após a instalação, o VS Code solicitará que você reinicie. Clique no botão para reiniciar e aguarde.

7. **Verificando a Mudança**: 
   - Depois de reiniciar, os itens do menu estarão em português do Brasil.

## Mudando de Volta para o Inglês:
Se desejar mudar o idioma novamente para inglês, basta abrir o Command Palette, selecionar `Configure Display Language`, mudar para `EN` e reiniciar o aplicativo.

## Conclusão:
Você também pode utilizar este método para instalar quaisquer outras extensões que permitam modificar o idioma do Visual Studio Code.

Até a próxima!

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

```markdown
# Dica de Visual Studio Code: Quebra de Linha Simulada

Olá pessoal, estamos de volta com mais uma aula. Hoje, vou compartilhar uma dica útil para quem trabalha com **linhas longas** no Visual Studio Code, evitando o uso constante da barra de rolagem.

## Problema com Linhas Longas

Ao trabalhar com textos muito longos, como parágrafos extensos, é comum ter que rolar horizontalmente para ler o conteúdo. Embora seja possível quebrar manualmente as linhas, isso pode não ser viável se você não puder editar o arquivo.

## Solução: Ativando a Quebra de Linha Simulada

Felizmente, existe uma opção no Visual Studio Code que é simples de ativar:

1. Vá em **View** e selecione **Word Wrap**.
2. Alternativamente, você pode usar o atalho **Alt + Z** (Windows).

Após ativar essa função, as linhas longas são quebradas **virtualmente**, facilitando a leitura. A barra de rolagem horizontal desaparece, pois o conteúdo agora se ajusta à largura da tela, embora as linhas continuem sendo consideradas como uma única linha (por exemplo: linha 1, linha 3, linha 5).

## Como Configurar Permanentemente

Para definir a quebra de linha como a configuração padrão:

1. Acesse as configurações (`settings.json`).
2. Busque pela opção **word wrap** e ative-a.

Para configurar manualmente no arquivo `settings.json`, adicione:

```json
"editor.wordWrap": "on"
```

## Conclusão

Esta foi a dica de hoje sobre o **word wrap** no Visual Studio Code para facilitar a leitura de linhas longas. Espero que tenha gostado e até a próxima!
```


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

```markdown
# Dica de Visual Studio Code: Como Adicionar Barras Verticais

Olá pessoal! Nesta aula, vou ensinar como exibir regras ou barras verticais no painel de texto do Visual Studio Code. 

## Contexto

Tradicionalmente, muitos programadores seguem uma convenção de limitar o texto a 80 colunas por linha. Embora hoje em dia você possa digitar mais, muitos ainda preferem seguir essa prática. As barras verticais ajudam a definir essas colunas, proporcionando uma referência visual enquanto você escreve seu código.

### Vantagens das Barras Verticais

Adicionar essas regras tem a vantagem de reduzir a necessidade de rolagem horizontal, permitindo que você visualize melhor o código, especialmente em linhas mais longas. Porém, é importante notar que a quebra automática de linhas (word wrap) está desativada por padrão.

## Como Configurar no Visual Studio Code

1. **Acesse as Preferências**:
   - Clique em `File` > `Preferences` > `Settings`.
   
2. **Localize a Opção Rulers**:
   - Na aba do Editor, busque pela opção "Rulers". Você também pode digitar "rulers" na barra de pesquisa.

3. **Edite o arquivo settings.json**:
   - Se você não encontrar a opção, vá até o arquivo de configurações (settings.json) e adicione a propriedade `editor.rulers`. 

4. **Adicione as Colunas**:
   - O valor desta propriedade deve ser um array. Por exemplo:
     ```json
     "editor.rulers": [80, 100, 120]
     ```
   - Isso adicionará barras verticais nas colunas 80, 100 e 120.

5. **Salve e Visualize**:
   - Após adicionar as barras, salve o arquivo. Você verá a barra vertical na posição correspondente no editor.

### Considerações Finais

Os números 80, 100 e 120 são padrões geralmente aceitos, mas você pode definir outras colunas conforme sua preferência. Lembre-se de que se escolher um número maior, pode ser necessário usar a rolagem horizontal. 

Essa configuração ajuda a manter o código organizado e legível. Obrigado por assistir e até a próxima!
```

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

```markdown
# Aula de Visual Studio Code: Dica sobre Caracteres Invisíveis

Olá pessoal! Estamos de volta com mais uma aula de Visual Studio Code. Hoje, vou dar uma dica útil para identificar se você está utilizando tabulações ou espaços em um arquivo de texto.

## Importância da Dica

Essa dica é especialmente útil para programadores que desejam eliminar espaços redundantes ou garantir a indentação correta usando tabs ou espaços.

## Identificação de Tabs e Espaços

- Ao trabalhar com um arquivo, podemos ter dificuldades para identificar se os caracteres são tabs ou espaços em branco.
- Por padrão, ao selecionar espaços em uma linha, o Visual Studio Code mostra indicadores:
  - Pontinhos indicam **espaços em branco**.
  - Setas para a direita indicam **tabs**.

### Configuração para Mostrar Caracteres Invisíveis

Para visualizar sempre os caracteres invisíveis, siga os passos abaixo:
1. Vá para `File > Preferences > Settings`.
2. Na busca, digite `Render White Space`.
3. Altere a configuração de `Selection` para `All`.

Após fazer isso, os caracteres invisíveis serão exibidos continuamente, permitindo que você identifique a utilização de espaços e tabs sem precisar selecioná-los. 

## Exemplo Prático

- Após a configuração, você poderá ver:
  - **Pontinhos** para espaços em branco.
  - **Setas** para tabs.
  
Isso facilita a correção de qualquer uso redundante de espaços, como aqueles em linhas em branco, o que é importante antes de adicionar arquivos ao controle de versão (como Git).

## Finalizando

Verifique também o arquivo `settings.json` para confirmar que a propriedade `editor.renderWhitespace` está definida como `all`. 

E assim, você pode facilmente identificar e corrigir a utilização de espaços e tabs em seus códigos.

Até a próxima aula!
```

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.


Dicas do Editor Visual Studio Code (vscode)

Sobre o curso

Aulas

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

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

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

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