Assim que você começar a desenvolver um site, a primeira ferramenta que você vai usar é um editor de texto, seja simples como um bloco de notas ou um IDE.
Neste episódio Addy & Matt confere a coleção de plug-ins. no Sublime Text e discutir como como cada uma ajuda no fluxo de trabalho.
Controle de pacotes
Para acessar os pacotes (ou plug-ins) referenciados no episódio, você precisa: instale o Package Control, é simples e fácil para instalar e você pode encontrar instruções sobre como fazer isso aqui.
JSHint
JSHint é uma ferramenta de inspeção de JavaScript que examina e destaca todos os possíveis erros ou práticas inadequadas no seu código.
Por exemplo, se você digitar errado o nome de uma variável, como
abaixo, o JSHint apontará que fo nunca foi definido e é
vai causar um erro.
var foo = { bar: 'Hello, World.' };
var msg = fo.bar;
O plug-in JSHint aponta os problemas com a exibição de uma caixa amarela ao redor do e posicionar o cursor nesse trecho do código resulta em erro exibida no canto inferior esquerdo do Sublime.
Outros problemas que ele detecta são:
- Variáveis que são definidas, mas nunca usadas.
- Como evitar a criação de funções dentro de repetições
- Usar os métodos de comparação certos
Para instalar o pacote SublimeLinter-JSHint também é necessário instalar o pacote SublimeLinter e seguir o processo instruções na página do pacote SublimeLinter-JSHint.
Para alguns desenvolvedores, pode ser útil incluir o parâmetro JSHint Gutter (link em inglês) . Ele coloca um pequeno ponto a medianiz de qualquer linha com um problema do JSHint.
JSCS
O JSCS destacará os lugares onde seu JavaScript não está seguindo um estilo de codificação específico.
Por exemplo, JSCS pode ser usado para definir se os espaços devem ser usada depois de palavras-chave, como "se", ou ao definir se as chaves devem estar na mesma linha ou em uma nova linha do método.
O pacote SublimeLinter-JSCS destaca quaisquer problemas inline em um estilo semelhante ao JSHint o que facilita a correção de problemas.
Isso é extremamente útil quando se trata de trabalhar em uma equipe, pois todos podem seguir o mesmo guia de estilo e manter seu código consistente.
A melhor parte é que, com o pacote JSCS-Formatter, você pode corrigir automaticamente qualquer problema na página.
pressionando ctrl + shift + p e digitando "JSCS Formatter: Format this file"
e pressione Enter. Saiba mais na postagem do blog da Addy (link em inglês).
Realce de cor
Destaque de cor adiciona uma cor ao plano de fundo as definições de cor no CSS ou no Sass.
É possível definir se ele será exibido como sublinhado com plano de fundo completo quando você passa o mouse sobre ele ou quando exibe cor no plano de fundo da definição. Basta acessar "Configurações do pacote" > "Marcador de cor" > "Configurações - Padrão" para conferir as configurações iniciais e altere suas configurações em "Configurações - Usuário".
Para realçar o plano de fundo completo adicione o seguinte a "Configurações - Usuário" arquivo:
{
"ha_style": "filled"
}
Cor da medianiz
Cor da calha é uma alternativa ao realce de cor, em vez de mostrar a cor na parte de cima da variável de cor, isso 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 da tela Depois, clique em Color Picker Package que podem ser úteis para você.
Pressione ctrl + shift + c e pronto. Você terá um seletor de cores.
AutoFileName
AutoFileName é um pequeno plug-in simples que oferece uma lista de possíveis arquivos enquanto você digita. Isso é super se estiver tentando digitar o nome de uma imagem ou adicionar um arquivo CSS ou JS e economizar tempo e, o mais importante, reduz o risco de erros de digitação.
Prefixador automático
Todos nós já passamos por aquele momento em que esquecemos de adicione uma propriedade CSS prefixada. Com Prefixador automático basta executá-lo em seu CSS e ele adicione todos os prefixos necessários.
Significa que a gente partiu disso...
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
...para o seguinte, basta pressionar ctrl + shift + p e digitar
"CSS de prefixo automático" e apertando Enter.
.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 quais navegadores e versões de navegador você quer nas configurações do pacote. Confira a página "Package Control" para mais informações.
Mais…
Existem vários outros plug-ins para Sublime Text, então explore o Package Control.
Para mais conselhos e dicas, confira a excelente apresentação de slides do WesBos em atalhos de teclado e outros plug-ins para o Sublime Text.
WesBos também escreveu um livro intitulado "Sublime Text para o usuário avançado" Isso também pode ser do seu interesse, pessoal :)