Desenvolvendo para WordPress no Sublime Text

Durante uma das últimas edições do meetup WordPress em São Paulo, utilizei meu computador como apoio para a apresentação da Cah Félix e Leo Baiano. Em um certo momento, perguntaram qual IDE eu usava e alguns se espantaram ao ver que era o Sublime.

Então prometi fazer esse post que você está lendo agora.

Antes de começar a falar dos pacotes que uso no Sublime para código, vou mencionar o tema que tenho utilizado nos últimos meses e que chamou a atenção do pessoal lá:

Material Theme

Esse tema adiciona o conhecido design material do Android no Sublime e deixa a interface com cores flat e vibrantes.

Agora falarei sobre os pacotes que uso que me ajudam no desenvolvimento PHP, HTML, CSS e JavaScript.

Emmet

Esse pacote é um dos mais úteis para desenvolvedores web porque ele ajuda a economizar muito tempo digitando código.

Com o Emmet você pode digitar algo como:

ul>li.item-${Texto de exemplo}*5

E, ao dar tab, o Emmet gerará o HTML para você:

<ul>
    <li class="item-1">Texto de exemplo</li>
    <li class="item-2">Texto de exemplo</li>
    <li class="item-3">Texto de exemplo</li>
    <li class="item-4">Texto de exemplo</li>
    <li class="item-5">Texto de exemplo</li>
</ul>

DocBlockr

Documentar o próprio código é algo que poucos desenvolvedores gostam, mas se há algo que é unanime é: Nenhum desenvolvedor gosta de ler código legado mal documentado.

O DocBlockr torna a criação de documentação muito mais fácil!

Se você digitar /** e depois tab ou enter numa linha imediatamente acima de uma função, o DocBlockr criará automaticamente o bloco de comentário e você só precisa inserir a explicação necessária.

Ele tem suporte para JavaScript (incluindo ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ e Rust.

Git e GitGutter

Não vou discutir aqui a importância de trabalhar com versionamento de código, mas isso é algo que você precisa usar já, caso ainda não faça parte do seu dia a dia.

A integração com o Git coloca os comandos, que normalmente só estariam disponíveis no terminal, diretamente no painel de comandos do Sublime. Dessa maneira você não precisa sair do editor para commitar, por exemplo.

O GitGutter, por sua vez, adiciona indicações nas linhas que foram inseridas, excluídas ou editadas:

JavaScript Completions

Esse pacote auto completa seus códigos JavaScript enquanto você digita. Não preciso falar o quanto isso agiliza no desenvolvimento, né?

PHPcs

O PHPcs adiciona os recursos do PHP CodeSniffer ao Sublime.

O PHP CodeSniffer verifica seu arquivo toda vez que você o salva. Caso você erre algo em seu código, uma notificação será exibida no painel de comandos do Sublime.

O Moraleida me lembrou de inserir o link do WordPress Code Standards. Nele há um passo a passo de como instalar e utilizar os padrões do WordPress em seu código.

Sass e SCSS

Escrever CSS inteiro na unha sem nenhum processador é tortura. Há diversos pré e pós processadores disponíveis atualmente, mas eu prefiro o Sass usando a sintaxe SCSS.

Um recurso bem legal do Sass é a possibilidade de utilizar variáveis. Então você não precisa mais substituir a cor principal do site em várias linhas, por exemplo.

$default-font: Helvetica, sans-serif;
$primary-color: #333;

body {
  font-family: $default-font;
  color: $primary-color;
}

WordPress

Esse pacote adiciona e auto completa funções do WordPress aos seus arquivos PHP.

Instale o pacote e digite wp_, por exemplo:

WordPress Developer Resources

Esse pacote adiciona um item no menu do botão direito. Isso facilita na hora de procurar pela documentação de uma função.

• Selecione a função que está com dúvida
• Clique com o botão direito do mouse
• Selecione WP Dev Resources

WordPress Customizer

O pacote WordPress Customizer adiciona snippets (pequenos trechos de código) com configurações mais utilizadas no Customizer do WordPress.

Xdebug Client

Uma das maiores reclamações sobre o Sublime é que ele não tem uma ferramenta de debug. O Xdebug Client minimiza esse problema adicionando suporte ao Xdebug.

---

Esses são os pacotes que mais utilizo no Sublime. Você tem alguma dica? Comente aí 🙂

PS: O Felipe Elia publicou um ótimo post sobre como instalar o WordPress Code Standards no Atom.