⚡ Snipzy
Functions, classes e componentes React em segundos — sem sair do teclado.
Snippets para JavaScript e TypeScript, incluindo .jsx e .tsx.
function · arrow function · async/await · class · React
✨ Por que usar
- 🚀 Menos digitação, mais foco na lógica — estruturas repetitivas (constructor,
export default, tipagem de retorno) ficam prontas na hora.
- 🔤 Nomes inteligentes — selecione um texto antes de inserir o snippet e ele vira o nome da function/class/componente automaticamente.
- 🧠 Sync e async lado a lado — os prefixos seguem um padrão consistente (
a = async), fácil de memorizar.
- 🏷️ Versões tipadas para TypeScript — variantes específicas geram parâmetros, retornos e
interface Props já tipados.
- 📱 Compatível com
.js, .jsx, .ts e .tsx.
🧩 Functions & Arrow Functions
JavaScript / TypeScript (uso geral)
| Prefixo |
Gera |
Quando usar |
fn |
function nome(params) { } |
função nomeada tradicional, com hoisting |
afn |
async function nome(params) { } |
função nomeada que retorna uma Promise |
af |
const nome = (params) => { } |
arrow function guardada em const |
aaf |
const nome = async (params) => { } |
arrow function assíncrona em const |
afe |
(params) => { } |
arrow function anônima, para passar como callback |
aafe |
async (params) => { } |
arrow function anônima assíncrona, para callback |
iife |
(async () => { })(); |
função assíncrona autoexecutável |
| Prefixo |
Gera |
fnt |
function nome(param: Tipo): Retorno { } |
afnt |
async function nome(param: Tipo): Promise<Retorno> { } |
aft |
const nome = (param: Tipo): Retorno => { } |
aaft |
const nome = async (param: Tipo): Promise<Retorno> => { } |
typefn |
type Nome = (param: Tipo) => Retorno; |
💡 Regra de bolso: o prefixo com a na frente sempre indica async.
🏛️ Classes
JavaScript / TypeScript (uso geral)
| Prefixo |
Gera |
Quando usar |
cls |
class Nome { constructor() { } } |
classe simples com constructor |
clse |
class Nome extends Pai { super() } |
classe que herda de outra |
method |
nomeMetodo(params) { } |
método de instância |
amethod |
async nomeMetodo(params) { } |
método assíncrono de instância |
smethod |
static nomeMetodo(params) { } |
método estático (chamado direto pela classe) |
getset |
get/set propriedade |
par getter + setter para uma propriedade |
| Prefixo |
Gera |
clst |
classe com propriedade private tipada + constructor |
clset |
classe tipada que estende outra (extends) |
methodt |
método com parâmetro e retorno tipados |
amethodt |
método assíncrono tipado (Promise<T>) |
int |
interface Nome { } |
clsa |
abstract class com método abstrato |
⚛️ Estrutura base de componentes React
JSX (JavaScript)
| Prefixo |
Gera |
rfc |
componente como function |
rafc |
componente como arrow function |
rfcs |
arrow function + useState já configurado |
ruse |
useEffect(() => { }, [deps]); |
TSX (TypeScript)
| Prefixo |
Gera |
rfct |
function + interface Props gerada automaticamente |
rafct |
React.FC<Props> (arrow function) + interface Props |
rfcst |
React.FC<Props> + useState<T> já configurado |
ruset |
useEffect(() => { }, [deps]); |
Exemplo — rafct em um arquivo Botao.tsx:
import React from 'react';
interface BotaoProps {
}
const Botao: React.FC<BotaoProps> = ({ }) => {
return (
<div>
</div>
);
};
export default Botao;
O nome vem do arquivo (Botao) e se repete em três lugares — interface, const e export — todos ligados ao mesmo campo, então editar um edita todos ao mesmo tempo, antes de confirmar.
🎯 Definindo o nome antes de inserir o snippet
Quer que a class, function ou componente já nasça com um nome específico, tipo Usuarios? Dá pra fazer sem digitar por cima do placeholder:
- Digite o nome em qualquer lugar do arquivo — ex:
Usuarios.
- Selecione a palavra.
- Abra a paleta de comandos (
Ctrl+Shift+P / Cmd+Shift+P) → Insert Snippet → escolha o snippet (ex: Class).
- O snippet expande já com
Usuarios no lugar do nome padrão. ✅
class Usuarios {
constructor(parametros) {
}
}
Se nada estiver selecionado, o comportamento padrão continua: um nome de exemplo vem selecionado para você digitar por cima (ou o nome do arquivo, no caso dos snippets React).
💡 Dica avançada: crie um atalho de teclado para editor.action.insertSnippet apontando para um snippet específico, e o fluxo acima fica ainda mais rápido — sem precisar abrir a paleta de comandos.
📥 Instalação
- Abra o VS Code.
- Vá em Extensões (
Ctrl+Shift+X / Cmd+Shift+X).
- Clique no menu
... no topo do painel de extensões → Instalar a partir do VSIX...
- Selecione o arquivo
snipzy-1.0.0.vsix.
- Reinicie o VS Code se solicitado.
Depois disso, digite o prefixo em um arquivo .js, .jsx, .ts ou .tsx e pressione Tab ou Enter para expandir.
Feito para acelerar o dia a dia com JavaScript, TypeScript e React. 🚀
