Assim que começar a desenvolver um site, a primeira ferramenta que você vai usar é um editor de texto, seja um editor de texto simples, como um bloco de notas ou um ambiente de desenvolvimento integrado completo.
Neste episódio, Addy & Matt analisa a coleção de plug-ins do Sublime Text e discute como cada um deles ajuda no fluxo de trabalho.
Controle de pacotes
Para acessar os pacotes (ou plug-ins) referenciados no episódio, você precisa instalar o Package Control. Ele é legal e simples de instalar. Confira instruções aqui.
JSHint
O JSHint é um linter de JavaScript que examina seu JavaScript e destaca quaisquer erros possíveis ou práticas inadequadas em seu código.
Por exemplo, se você tiver digitado incorretamente um nome de variável, como abaixo, o JSHint apontará que fo nunca foi definido e causará um erro.
var foo = { bar: 'Hello, World.' };
var msg = fo.bar;
O plug-in JSHint aponta problemas ao exibir uma caixa amarela ao redor do texto relevante e posicionar o cursor nesse pedaço de código resulta em uma mensagem de erro sendo mostrada no canto inferior esquerdo do Sublime.
Outros problemas que ele detectará são:
- Variáveis que são definidas, mas nunca usadas.
- Como evitar a criação de funções dentro de loops
- Como usar os métodos de comparação certos
Para instalar o pacote SublimeLinter-JSHint, você também precisará instalar o pacote SublimeLinter e seguir as instruções na página do pacote SublimeLinter-JSHint.
Alguns desenvolvedores também podem achar útil incluir o plug-in JSHint Gutter. Ele coloca um pequeno ponto no gutter de qualquer linha com um problema de JSHint.
JavaScript
O JSCS destaca todos os lugares em que o JavaScript não segue um estilo de codificação específico.
Por exemplo, o JSCS pode ser usado para definir se os espaços devem ser usados depois das palavras-chave, como "if", ou para definir se as chaves devem estar na mesma linha ou na nova linha de um método.
O pacote SublimeLinter-JSCS (link em inglês) destaca os problemas inline em um estilo semelhante ao JSHint, facilitando a correção de qualquer problema.
Isso é extremamente útil quando se trata de trabalhar em equipe, já que todos podem seguir o mesmo guia de estilo e manter o código consistente.
O melhor é que, com o pacote JSCS-Formatter, você pode corrigir automaticamente qualquer problema na página pressionando ctrl + shift + p, digitando "JSCS Formatter: Format this file" e pressione Enter. Saiba mais na postagem do blog do Addy.
Marcador de cor
O Marcador de cor adiciona uma cor ao plano de fundo de qualquer definição de cor no seu CSS ou Sass.
Você pode definir se ele será mostrado como um sublinhado com um segundo plano completo quando você passar o cursor sobre ele ou sempre exibir a cor no segundo plano da definição. Basta acessar 'Configurações de pacote' > 'Marcador de cor' > 'Configurações - Padrão' para conferir as configurações iniciais e alterar as configurações em 'Configurações - Usuário'.
Para o realce total do plano de fundo, adicione o seguinte ao arquivo "Settings - User":
{
"ha_style": "filled"
}
Cor da medianiz
Gutter Color é uma alternativa ao marcador de cor. Em vez de mostrar a cor sobre a variável de cor, ele coloca a cor no gutter dessa linha.
Seletor de cores
Se você precisar de uma maneira rápida e fácil de selecionar uma cor na tela, o Pacote de seletor de cores pode ser a opção certa para você.
Pressione ctrl + shift + c e pronto! Você tem um seletor de cores para você.
AutoFileName
O AutoFileName é um plug-in simples que fornece uma lista de possíveis arquivos à medida que você digita. Isso é muito útil quando você está tentando digitar o nome de uma imagem ou adicionar um arquivo CSS ou JS. Isso economiza tempo e reduz o risco de erros de digitação.
Prefixo automático
Todos nós já passamos pelo momento de entender em que esquecemos de adicionar uma propriedade CSS prefixada. Com o Autoprefixer, você simples faz a execução dele no CSS e adiciona todos os prefixos necessários.
Significa que a partir daí...
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
Pressione ctrl + shift + p, digite "Autoprefix CSS" e pressione Enter para inserir o código abaixo.
.container-thingy {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
Você também pode definir nas configurações do pacote para quais navegadores e versões eles gostariam de oferecer suporte. Confira a página Controle de pacotes para mais informações.
Mais…
Existem diversos outros plug-ins para o Sublime Text, então explore o Package Control.
Para ver mais dicas e conselhos, confira a excelente apresentação de slides do WesBos sobre atalhos de teclado e outros plug-ins do Sublime Text.
WesBos também escreveu um livro intitulado 'Sublime Text for the Power User', que também pode ser interessante para você.