Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Sublime Text
Webdesign

Aperfeiçoamentos Visuais Simples para uma Melhor Codificação no Sublime Text

by
Length:ShortLanguages:

Portuguese (Português) translation by Cassio Cardoso (you can also view the original English article)

O Sublime Text oferece milhares de extensões e configurações para fazer um editor de código personalizado disponível para todos. Agora, eu vou lhe mostrar algumas configurações, plugins, temas e esquemas de cores para ajudar a fazer a experiência de codificar mais agradável visualmente. Isto não vai somente tornar sua tela mais bonita, vai fazer voce se tornar um programador melhor!

Configurações

O Sublime Text já vem com alguns recursos para alterar visualmente a sua experiência de codificação, no entanto, algumas dessas configurações não estão ativadas por padrão. Aqui estão algumas que eu não poderia viver sem.

Nota: Para editar o arquivo de configurações do seu Sublime, abra-o, indo em Sublime Text 2 > Preferências (Preferences) > Configurações (Settings) - Padrão (Default) e selecionando o item apropriado.

sublime-settings

Encontre as configurações que você gostaria de alterar, então adicione-as as suas Configurações de Usuário (User Settings) para prevenir que elas sejam sobrescritas quando atualizar o Sublime Text.

sublime-settings-2

Confira em Installation and Base Settings mais informações sobre o gerenciamento das configurações do Sublime Text.

Fontes e Espaçamento

Escolher o tipo de fonte e o espaçamento correto é uma das formas mais pessoais de se personalizar seu código. Em primeiro lugar, escolha um tipo de fonte adequada, de preferência uma fonte monoespaçada. Aqui estão algumas sugestões:

Assim que você tiver escolhido a fonte, certifique-se que ela está instalada no seu sistema, adicione-a às suas configurações, e ajuste o tamanho e espaçamento, conforme o exemplo a seguir:

“font_face”: “Inconsolata";
"font_size": 18;
"line_padding_bottom": 1,
"line_padding_top": 1,

Destacar linha (highlight_line)

Essa configuração destaca a linha onde o cursor está no momento com uma cor diferente (dependendo do seu esquema de cores). Vendo a sua linha atual ajuda a se concentrar na tarefa atual durante a digitação, navegar mais facilmente de linha para linha, e rapidamente encontrar o lugar em que estava ao retornar de um programa diferente.

"highlight_line": true,

Destacar abas modificadas (highlight_modified_tabs)

Para trazer mais foco para os arquivos que não foram salvos no projeto atual, esta configuração vai destacar as abas dos arquivos modificados dentro de uma janela.

"highlight_modified_tabs": true,

Dobrando trechos do código (fade_fold_buttons)

Você sabia que o Sublime Text pode dobrar e desdobrar blocos de código? Eu sabia, mas sempre me esquecia que essa opção estava disponível. Se você ativar essa configuração, ela vai deixar o botão para dobrar o código à direita, em vez de escondê-lo.

"fade_fold_buttons": false,

Envolver palavras (word_wrap)

Rolar a tela horizontalmente pode ser doloroso. Com o envolvimento de palavras ativado, o texto flui para o tamanho da tela atual e evita a rolagem horizontal.

"word_wrap": true,

Rótulo das pastas em negrito (bold_folder_labels)

Existem algumas ótimas configurações disponíveis para levar alguns bons elementos visuais para a barra lateral, eles são:

"bold_folder_labels": true,

Mostrar Arquivos Abertos na Barra Lateral

Estranhamente, essa opção não está configurada no arquivo de preferências. Para mostrar os arquivos abertos no topo de sua barra lateral, vá em:

Visualizar (View) → Barra Lateral (Side Bar) → Mostrar Arquivos Abertos (Show Open Files)

Alinhar a Barra Lateral

Essa não é tanto uma configuração, mas sim uma dica. Assim como em uma planilha, você pode clicar duas vezes no limite entre a barra lateral e o conteúdo fazendo com que a barra lateral adeque seu tamanho ao seu conteúdo.

sublime-visual-sidebar

Plugins

Os plugins são extremamente úteis para trazer recursos extras para o Sublime Text, eu recomendo usar o Gerenciador de Pacotes (Package Control) para gerenciar seus plugins.

BracketHighlighter

O Bracket highlighter é um plugin que destaca as tags e colchetes(Brackets... entendeu?). Mas, falando sério, é uma ferramenta poderosa que te mostra o início e fim de cada trecho de código. O tipo do colchete é exibido na lateral e possui um ícone diferente para os diferentes caracteres e elementos.

sublime-visual-brackethighlighter-2

Git Gutter

Este é, pessoalmente, um dos meus favoritos. O Git gutter é um plugin simples que exibe um ícone na área ao lado da numeração das linhas para indicar linhas inseridas, modificadas ou deletadas em comparação com seu projeto git.

sublime-visual-gitgutter-2

SublimeLinter

Este plugin destaca pequenos trechos do código que podem ser revistos. Com sua extensa documentação e longa lista de linguagens suportadas, este plugin é uma ótima solução para certificar que seu código está livre de erros.

sublime-visual-sublimelinter-2

Temas e Esquemas de Cores

Uma das maiores formas de customizar o Sublime Text e deixá-lo com a sua cara é através dos temas e esquemas de cores. Atualmente existem centenas de opções disponíveis e mais são introduzidas a cada semana. Aqui estão alguns temas e esquemas de cores que valem a pena serem conferidos.

Tema: Soda

Soda tornou-se o tema mais popular e o melhor exemplo de um tema personalizado na comunidade do Sublime Text. Muitos temas foram criados baseando-se neste projeto. O Soda oferece configurações extras, gráficos retina prontos e UIs escuras e claras

sublime-visual-soda-2

Tema: Flatland

Se você é um fã da tendência de flat design, então o Flatland é uma boa opção. Ele simplifica todos os elementos visuais e te permite

Tema: Spacegray

Meu favorito pessoal no momento e sendo bem comentado no GitHub, o Spacegray possui uma paleta de cores única e uma interface com o usuário minimalista.

sublime-visual-spacegray

Esquema de Cores: Solarized

O bem conhecido projeto Solarized está disponível para o Sublime Text. É um projeto de cor entitulado como "cores de precisão para máquinas e pessoas" com uma teoria da cor única por trás de sua criação.

Esquema de Cores: Base16

O Base16 é outro esquema de cores popular com muitas opções (estou utilizando ele no momento).

Conclusão

Há muito mais para cobrir! Não se esqueça, é importante avaliar todos os diferentes elementos do Sublime Text quando for fazer o seu próprio. Não tome minhas palavras como lei, procure no GitHub ou no Package Control, tente algumas novas configurações e veja se elas funcionam para você. E reveja sua configuração periodicamente para conferir se nada de novo pode ajudar a melhorar sua experiência enquanto estiver codificando.

Quais configurações, fonte, plugins, temas ou esquemas de cores você achou que melhorou sua experiência enquanto está codificando? Deixe-nos saber nos comentários, e compartilhe isso com alguém que você ache que pode precisar dessas dicas!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.