A Técnica de Integração Definitiva do Clibor: Automatize Textos Padrão com AutoHotkey e VSCode

Olá, criadores de sites! Bom trabalho todos os dias! A codificação de HTML e CSS está indo bem?

Se você se pega pensando:

• "Escrever o mesmo <div class="..."></div> todas as vezes é meio chato..."
• "Não há uma maneira mais fácil de digitar console.log()?"
• "Eu tenho meus snippets de código favoritos salvos, mas queria poder usá-los fora do VSCode!"

Se você se sente assim, este artigo é para você. Porque, acredite, há apenas alguns meses, eu estava lutando exatamente com as mesmas coisas.

Olá! Eu sou o autor deste artigo, um ex-iniciante que começou do zero em programação, aprendeu com a ajuda de IA e, em um mês e meio, lançou dois sites por conta própria (buyonjapan.com, copicode.com). É por isso que eu sei exatamente onde você pode empacar.

Neste artigo, vou compartilhar a técnica de integração da trindade "Clibor × AutoHotkey × VSCode" que descobri por tentativa e erro. Evitarei jargões técnicos e prometo que, simplesmente copiando e colando o código deste artigo, seu PC se transformará na máquina de codificação definitiva. Espero que você experimente a alegria de "fazer funcionar"!

Preparação: Vamos Instalar os Três Tesouros Sagrados

Primeiro, vamos preparar as três ferramentas que serão nossas protagonistas. Se você já as tem instaladas, sinta-se à vontade para pular para a seção "Básico".

1. Clibor

Esta é a melhor ferramenta de extensão de área de transferência. Ela salva seu histórico de cópias indefinidamente e permite que você o recupere a qualquer momento. Seu recurso de texto padrão é poderoso, mas hoje vamos "hackear" esse recurso com o AutoHotkey.

• Clique aqui para o site oficial do Clibor

A instalação é super fácil. Basta baixá-lo do site acima e seguir as instruções do instalador.

2. AutoHotkey

É uma ferramenta mágica e gratuita que pode automatizar quase qualquer operação no seu PC. Você pode simular entradas de teclado e cliques do mouse com comandos curtos. Você pode estar pensando "isso parece complicado...", mas não se preocupe. Hoje, usaremos apenas código de copiar e colar!

• Clique aqui para o site oficial do AutoHotkey

【Ponto Importante】 O AutoHotkey tem as versões v1.1 e v2.0, mas muitos scripts que você encontrará online são para a v1.1. Para evitar dores de cabeça com compatibilidade, recomendo baixar a v1.1, a menos que você tenha um motivo específico para não o fazer.

(A imagem é apenas para fins ilustrativos)

3. Visual Studio Code (VSCode)

O editor de texto de alto desempenho amado por muitos criadores da web. Se você está lendo isto, provavelmente o usa todos os dias. Hoje, vamos melhorar drasticamente sua eficiência de codificação no VSCode.

Assim que tiver todas as ferramentas, vamos passar para a configuração da integração!

Básico: A Experiência "Aha!" da sua Primeira Integração do Clibor com o AutoHotkey

Primeiro, vamos começar com um pequeno passo para você experimentar como essa integração é fácil e poderosa. Nosso objetivo é digitar uma palavra-chave registrada no Clibor (ex: `@saudacao`) e fazer com que ela se expanda automaticamente para uma frase como "Muito obrigado por seu contínuo apoio.".

Passo 1: Registrar um script do AutoHotkey no Clibor

Na verdade, você pode escrever comandos do AutoHotkey diretamente nas entradas de texto padrão do Clibor. Esta é a chave para nossa técnica de integração.

1. Abra a janela principal do Clibor e selecione a guia "Texto Padrão".
2. Clique com o botão direito em um grupo e escolha "Novo".
3. Cole o seguinte código diretamente no campo "Conteúdo".

#Persistent
:*?:@saudacao::Muito obrigado por seu contínuo apoio. Atenciosamente, [Seu Nome] da [Sua Empresa].
Return

Breve Explicação do Código:

• #Persistent: Um pequeno truque para manter o script rodando em segundo plano.
• :*?:@saudacao::: Este é um gatilho (hotstring) que significa "quando a string `@saudacao` for digitada". O `*` entre os dois pontos significa "disparar mesmo que haja um caractere antes" e o `?` significa "disparar mesmo que esteja no meio de uma palavra". Não se preocupe com os detalhes por enquanto, apenas lembre-se deste formato!
• Muito obrigado...: Este é o texto que você deseja que seja gerado.
• Return: Sinaliza o fim da ação do script.

Passo 2: Executar o script a partir do Clibor

1. Clique com o botão direito no texto padrão que você acabou de registrar e selecione "Executar com AutoHotkey".
2. Se você vir um ícone "H" verde na sua bandeja do sistema (a área com ícones no canto inferior direito da tela), você conseguiu. Isso significa que o script agora está aguardando seu comando.
3. Abra o VSCode, o Bloco de Notas ou qualquer campo de entrada de texto e tente digitar `@saudacao`.

Como foi? O texto deve ter se transformado instantaneamente! Este é o primeiro passo para integrar o Clibor e o AutoHotkey. Pode parecer simples demais, mas este mecanismo básico tem um potencial infinito.

Dica Avançada ①: Domine seu Histórico de Cópia com a Integração FIFO/LIFO

Agora, vamos ao que interessa. O verdadeiro poder do Clibor reside em seu extenso histórico da área de transferência. Mas quando você pensa "quero usar o item que copiei dois passos atrás...", é um pouco incômodo ter que abrir a janela do Clibor e selecioná-lo.

Com o AutoHotkey, você pode colar o segundo, terceiro ou até mesmo itens mais antigos do seu histórico de cópias diretamente, sem nunca abrir a janela do Clibor. Isso é chamado de integração FIFO (First-In, First-Out)/LIFO (Last-In, First-Out).

Parece complicado, mas o processo é o mesmo de antes. Basta registrar o seguinte script em uma entrada de texto padrão do Clibor и "Executar com AutoHotkey".

#Persistent
; Cole o 2º item do histórico com Ctrl + Shift + V (FIFO)
^+v::
PostMessage, 0x319, 106, 0,, ahk_class TClibor
Return

; Cole o 3º item do histórico com Ctrl + Alt + V (FIFO)
^!v::
PostMessage, 0x319, 107, 0,, ahk_class TClibor
Return

Breve Explicação do Código:

• ^+v::: `^` significa Ctrl e `+` significa Shift. Portanto, este é um gatilho para quando "Ctrl + Shift + V" for pressionado.
• PostMessage, ...: Este é o feitiço mágico. Ele envia um comando para o Clibor dizendo: "Cole o N-ésimo item do histórico!". `106` corresponde ao segundo item e `107` ao terceiro. Os detalhes deste feitiço estão documentados no site oficial do Clibor, então é uma fonte confiável.

Com este script em execução, tente copiar três palavras diferentes em ordem (ex: "maçã" → "banana" → "cereja").

1. Se você pressionar `Ctrl + V` normalmente, "cereja", o último item que você copiou, será colado.
2. Em seguida, tente pressionar `Ctrl + Shift + V`. "banana" deve ser colado!
3. Finalmente, se você pressionar `Ctrl + Alt + V`, "maçã" será colado.

No desenvolvimento web, você frequentemente copia nomes de classes, códigos de cores e texto de vários lugares. Com esta integração, você pode reduzir drasticamente o número de vezes que troca de abas ou abre o Clibor, permitindo que você se concentre na codificação sem interromper seu fluxo de trabalho.

Dica Avançada ②: Scripts Práticos que Transformarão sua Codificação no VSCode

Obrigado pela paciência. Agora, apresentaremos o auge desta técnica de integração: aplicações práticas no VSCode. Embora o VSCode tenha um recurso de snippets embutido, "a integração com o AutoHotkey tem a enorme vantagem de poder ser usada em qualquer editor ou campo de entrada de navegador, não apenas no VSCode".

Ao registrar o seguinte script como uma única entrada de texto padrão no Clibor e executá-lo com "Executar com AutoHotkey", você pode transformar sua experiência no VSCode.

#Persistent

; =============================================
;  Para Codificação HTML
; =============================================

; Digite `!html` para expandir o template básico de HTML5
:*?:!html::
(
<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documento</title>
</head>
<body>
    {Up 3}{End}{Left 10}
</body>
</html>
)
Return

; =============================================
;  Para Codificação CSS
; =============================================

; Digite `!flex` para expandir o snippet básico de Flexbox
:*?:!flex::
(
display: flex;
justify-content: center;
align-items: center;
)
Return

; =============================================
;  Para Codificação JavaScript
; =============================================

; Digite `!log` para inserir console.log() e mover o cursor para dentro dos parênteses
:*?:!log::
SendInput, console.log();{Left 2}
Return

; Digite `!q` para inserir document.querySelector('') e mover o cursor para dentro das aspas
:*?:!q::
SendInput, document.querySelector('');{Left 2}
Return

; =============================================
;  Geral
; =============================================

; Digite `!date` para inserir a data de hoje (YYYY-MM-DD)
:*?:!date::
FormatTime, CurrentDateTime, , yyyy-MM-dd
SendInput, %CurrentDateTime%
Return

[Super Importante] A Magia do Movimento do Cursor: {Left 2}

Entre estes scripts, o que eu quero que você note especialmente é a parte {Left 2} no final de `!log` e `!q`. Este é um comando que significa "pressione a tecla de seta para a esquerda duas vezes".

Com isto, por exemplo, quando você digita `!log`, depois que console.log(); é expandido, o cursor se move automática e suavemente para dentro dos `()`. Você pode começar a digitar o nome de uma variável imediatamente, eliminando completamente o incômodo de usar o mouse ou as teclas de seta para voltar. Este acúmulo de pequenas eficiências irá encurtar significativamente o seu tempo de trabalho diário.

No exemplo de !html, eu uso {Up 3}{End}{Left 10} para ajustar o cursor para se mover para a parte Document da tag <title> após a expansão. Ser capaz de mover o cursor para qualquer posição que você queira é uma característica poderosa do AutoHotkey.

Pontos a Observar e Solução de Problemas

Esta integração é incrivelmente poderosa, mas há algumas coisas que você deve saber. Estes são pontos em que eu mesmo tropecei, então, por favor, tenha-os em mente.

1. O script não está funcionando? Tente executá-lo novamente!

Às vezes, depois de reiniciar o PC ou de despertá-lo do modo de suspensão, o script do AutoHotkey pode parar de funcionar. Se você perceber que não está respondendo, primeiro tente clicar com o botão direito na entrada de texto padrão no Clibor e selecionar "Executar com AutoHotkey" novamente. Isso geralmente resolve o problema.

2. Use Gatilhos Inteligentes para Evitar Expansões Indesejadas

Se você definir um gatilho para uma palavra comum como `log`, ele pode se expandir acidentalmente para `console.log()` enquanto você está escrevendo, o que pode ser muito frustrante.

Para evitar isso, eu tenho a regra de adicionar um `!` (ponto de exclamação) no início de todos os meus gatilhos (ex: `!log`, `!html`). Dessa forma, você quase nunca os ativará por engano durante a digitação normal. Recomendo criar sua própria regra, como usar `@` ou `;` como prefixo.

3. Como Gerenciar Vários Scripts

Como fizemos hoje, registrar várias funções em uma única entrada de texto padrão facilita o gerenciamento. Se você quiser modificar um script, basta editar o texto padrão no Clibor e executá-lo novamente com "Executar com AutoHotkey" para aplicar as alterações. (Você deve sair do script antigo clicando com o botão direito em seu ícone na bandeja do sistema и selecionando "Exit").

Conclusão: Cultive seu Próprio Ambiente Definitivo

Hoje, mostramos como melhorar drasticamente a eficiência da sua entrada de texto padrão integrando o Clibor, o AutoHotkey e o VSCode.

• A simplicidade de iniciar a integração apenas registrando um script do AutoHotkey em uma entrada de texto padrão do Clibor.
• A satisfação de dominar seu histórico de cópias pelo teclado com a integração FIFO/LIFO.
• O poder de aumentar sua velocidade de codificação com scripts práticos para o VSCode.

Se você experimentou isso e sentiu o momento "aha!" de fazer funcionar, eu não poderia estar mais feliz.

No entanto, a verdadeira jornada começa aqui. O que eu mostrei hoje é apenas um exemplo. As tarefas repetitivas que você acha tediosas todos os dias são as oportunidades perfeitas para criar novos scripts de automação. Quando você pensar "Será que posso automatizar esta tarefa também?", eu o encorajo a tentar criar seus próprios scripts originais, talvez com a ajuda de IA. O ambiente que você cultivar dessa forma se tornará sua própria "arma definitiva" única que ninguém mais poderá replicar.

Espero que este artigo ajude em seus empreendimentos criativos.