Listado de extensiones incluidas
Snippets
snippets
Lenguajes soportados:
- javascript
- javascriptreact
- typescript
- typescriptreact
Mui theme provider
prefix: muithemeprovider
'use client'
import { ThemeProvider, createTheme, StyledEngineProvider } from '@mui/material/styles';
import { PropsWithChildren } from "react"
const theme = createTheme({
})
export default function MuiThemeProvider({children}: PropsWithChildren) {
return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
{children}
</ThemeProvider>
</StyledEngineProvider>
)
}
prefix: muirhform
'use client'
import React, { useState } from 'react'
import { useForm } from 'react-hook-form'
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'
import { Alert, Backdrop, Card, CardActions, CardContent, CardHeader, CircularProgress, Grid } from '@mui/material'
export type ${TM_FILENAME_BASE}FormFields = {
name: string;
surname: string;
email: string;
password: string;
};
export default function ${TM_FILENAME_BASE}Form() {
const { register, handleSubmit } = useForm<${TM_FILENAME_BASE}FormFields>()
const [loading, setLoading] = useState(false)
const [error, setError] = useState('')
const onSubmit = handleSubmit(async (values) => {
console.log('valores', values)
setLoading(true)
setError('')
try {
} catch (error) {
console.log(error)
} finally {
setLoading(false)
}
})
return (
<Card sx={{ position: 'relative' }} component={'form'} onSubmit={onSubmit}>
<CardHeader title="${1:titleform}" />
<CardContent>
<Backdrop open={loading}
sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1, position: 'absolute' })}
>
<CircularProgress style={{ color: 'white' }} />
</Backdrop>
<Grid container spacing={2}>
<Grid size={12}>
{error && <Alert severity='error'>
{error}
</Alert>}
</Grid>
</Grid>
</CardContent>
<CardActions sx={{ display: 'flex', justifyContent: 'space-between', placeItems: 'center' }}>
<Typography variant="body1" color="initial">
<Button variant="text" href='/'>
${3:linktoother}
</Button>
</Typography>
<Button variant="contained" type='submit' loading={loading} disableElevation>
${2:submitbuttontext}
</Button>
</CardActions>
</Card>
)
}
Validar variables de entorno con zod
prefix: envzod
import { z } from 'zod'
const envSchema = z.object({
NODE_ENV: z.enum(["development", "production", "test"]),
PORT: z.string().regex(/^\d+\$/).transform(Number).default("3000"),
DATABASE_URL: z.string().url(),
SALTS_HASH: z.string()
});
const parsedEnv = envSchema.safeParse(process.env);
if (!parsedEnv.success) {
console.error("Environment variables are not valid:", parsedEnv.error.format());
throw new Error('Environment variables are not valid')
}
console.log("Environment variables loaded successfully:", parsedEnv.data);
export const envData = parsedEnv.data;
Componente de react typescript
prefix: rfcts
type ${TM_FILENAME_BASE}Type = {
}
export default function ${TM_FILENAME_BASE}({}: ${TM_FILENAME_BASE}Type) {
return (
<div>ExampleComponent</div>
)
}
Componente de react typescript con prospwithchildren
prefix: rfctschildren
import {PropsWithChildren} from 'react'
type ${TM_FILENAME_BASE}Type = PropsWithChildren<{
}>
export default function ${TM_FILENAME_BASE}({children}: ${TM_FILENAME_BASE}Type) {
return (
<div>
{children}
</div>
)
}
javascript
Lenguajes soportados:
Environment variables zod
prefix: envzod
import { z } from 'zod'
const envSchema = z.object({
NODE_ENV: z.enum(["development", "production", "test"]),
PORT: z.string().regex(/^\d+\$/).transform(Number).default("3000"),
DATABASE_URL: z.string().url(),
SALTS_HASH: z.string()
});
const parsedEnv = envSchema.safeParse(process.env);
if (!parsedEnv.success) {
console.error("Environment variables are not valid:", parsedEnv.error.format());
throw new Error('Environment variables are not valid')
}
console.log("Environment variables loaded successfully:", parsedEnv.data);
export const envData = parsedEnv.data;
