Um momento
Aula 03
Cursos / Dicas do Editor Visual Studio Code (vscode)
Como Mostrar Regras (Barras Linhas Verticais) no Visual Studio Code

Summary

# 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!

Video Transcript

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.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: