vscode snippets
{ | |
"Crea nuevo modelo": { | |
"prefix": "snpNuevoModelo", | |
"body": [ | |
"import { Errores } from './errores';", | |
"", | |
"export interface I${1:}Attrs {", | |
" id?: string;", | |
" ${2:};", | |
"}", | |
"", | |
"export class ${1:Modelo} implements I${1:}Attrs {", | |
" id?: string;", | |
"", | |
" constructor(raw: I${1:}Attrs) {", | |
" this.id = raw.id;", | |
" }", | |
"", | |
" static parseItem(raw: I${1:}Attrs): ${1:} {", | |
" if (!raw) {", | |
" throw new Error(Errores.Parse);", | |
" }", | |
" return new ${1:}(raw);", | |
" }", | |
"", | |
" static parseArray(raws: I${1:}Attrs[]): ${1:}[] {", | |
" if (!raws || !raws.length) {", | |
" return [];", | |
" }", | |
" return raws.map(raw => ${1:}.parseItem(raw));", | |
" }", | |
"}" | |
] | |
}, | |
"Parsea un attr": { | |
"prefix": "snpParseAttr", | |
"body": [ | |
"this.${1:attr} = raw.${1:};", | |
"${2:}" | |
], | |
"description": "Cuando estamos en el constructor, vamos parseando attrs del raw a la instancia." | |
} | |
} |
{ | |
// Docs: https://code.visualstudio.com/docs/editor/userdefinedsnippets | |
// Snippets: https://github.com/infeng/vscode-react-typescript/blob/master/snippets/snippets.json | |
"Componente react native completo para un screen": { | |
"prefix": "snpRNScreen", | |
"body": [ | |
"import * as React from 'react';", | |
"import { RouteComponentProps } from 'react-router';", | |
"import { BackHandler } from 'react-native';", | |
"import { Container, Content } from 'native-base';", | |
"", | |
"interface IProps extends RouteComponentProps {", | |
"}", | |
"", | |
"interface IState {", | |
// No podemos saber la ruta relativa asi que le das ctrl+espacio y ya | |
" estadoCarga: EstadoCarga;", | |
"}", | |
"", | |
"export class ${1:}Screen extends React.Component<IProps, IState> {", | |
" constructor(props: IProps) {", | |
" super(props);", | |
"", | |
" this.state = {", | |
" estadoCarga: EstadoCarga.Exito,", | |
" }", | |
" }", | |
"", | |
"componentDidMount() {", | |
" BackHandler.addEventListener('hardwareBackPress', this.atras);", | |
"}", | |
"", | |
"componentWillUnmount() {", | |
" BackHandler.removeEventListener('hardwareBackPress', this.atras);", | |
"}", | |
"", | |
"atras() {", | |
"", | |
" return true;", | |
"}", | |
"", | |
" public render() {", | |
" return (", | |
" <Container style={{ backgroundColor: '#f8f8f8' }}>", | |
" <Content>", | |
" {", | |
" this.state.estadoCarga === EstadoCarga.Cargando &&", | |
" <CartelCargando />", | |
" }", | |
" {", | |
" this.state.estadoCarga === EstadoCarga.Exito &&", | |
" <Content />${2:}", | |
" }", | |
" </Content>", | |
" </Container>", | |
" );", | |
" }", | |
"}", | |
"" | |
], | |
"description": "Crea un componente react native con todo lo que un screen comprende" | |
}, | |
"Componente funcional archivo compartido": { | |
"prefix": "snpFuncionalArchivoCompartido", | |
"body": [ | |
"interface I${1:}Props {", | |
"", | |
"}", | |
"", | |
"export const ${1:App} = (props: I${1:}Props) =>", | |
" $0;", | |
"" | |
], | |
"description": "Crea un componente funcional suponiendo nombres porque no puede chocar con otros" | |
}, | |
"Componente funcional archivo propio": { | |
"prefix": "snpFuncionalArchivoPropio", | |
"body": [ | |
"import * as React from 'react';", | |
"", | |
"interface IProps {", | |
"", | |
"}", | |
"", | |
"export const ${1:Name} = (props: IProps) =>", | |
" $0;", | |
"" | |
], | |
"description": "Crea un componente funcional sin suponer nombres porque puede chocar con otros" | |
}, | |
"constructor": { | |
"prefix": "snpConstructor", | |
"body": [ | |
"constructor(props) {", | |
" super(props);", | |
" ${1:}", | |
"}" | |
], | |
"description": "Add a constructor in class." | |
}, | |
"componentWillMount": { | |
"prefix": "snpComponentWillMount", | |
"body": [ | |
"componentWillMount() {", | |
" ${1:}", | |
"}" | |
], | |
"description": "Invoked immediately before mounting occurs. It is called before render()." | |
}, | |
"componentDidMount": { | |
"prefix": "snpComponentDidMount", | |
"body": [ | |
"componentDidMount() {", | |
" ${1:}", | |
"}" | |
], | |
"description": "Invoked immediately after a component is mounted." | |
}, | |
"componentWillReceiveProps": { | |
"prefix": "snpComponentWillReceiveProps", | |
"body": [ | |
"componentWillReceiveProps(nextProps: ${1:}) {", | |
" ${2:}", | |
"}" | |
], | |
"description": "Invoked before a mounted component receives new props." | |
}, | |
"shouldComponentUpdate": { | |
"prefix": "snpShouldComponentUpdate", | |
"body": [ | |
"shouldComponentUpdate(nextProps: ${1:}, nextState) {", | |
" ${2:}", | |
"}" | |
], | |
"description": "Invoked before rendering when new props or state are being received." | |
}, | |
"componentWillUpdate": { | |
"prefix": "snpComponentWillUpdate", | |
"body": [ | |
"componentWillUpdate(nextProps: ${1:}, nextState) {", | |
" ${2:}", | |
"}" | |
], | |
"description": "Invoked immediately before rendering when new props or state are being received." | |
}, | |
"componentDidUpdate": { | |
"prefix": "snpComponentDidUpdate", | |
"body": [ | |
"componentDidUpdate(prevProps: ${1:}, prevState) {", | |
" ${2:}", | |
"}" | |
], | |
"description": "Invoked immediately after updating occurs. This method is not called for the initial render" | |
}, | |
"componentWillUnmount": { | |
"prefix": "snpComponentWillUnmount", | |
"body": [ | |
"componentWillUnmount() {", | |
" ${1:}", | |
"}" | |
], | |
"description": "Invoked immediately before a component is unmounted and destroyed" | |
}, | |
"componentSetState": { | |
"prefix": "snpSetState", | |
"body": [ | |
"this.setState({ ${1:} });" | |
] | |
}, | |
"bind method": { | |
"prefix": "snpBind", | |
"body": [ | |
"this.${1:} = this.${1:}.bind(this);" | |
], | |
"description": "Bind de un metodo" | |
}, | |
"method": { | |
"prefix": "snpMetodo", | |
"body": [ | |
"${1:methodName} = (${2:e}) => {", | |
" ${3:}", | |
"}" | |
], | |
"description": "Crea un metodo de clase" | |
}, | |
"import": { | |
"prefix": "snpImport", | |
"body": [ | |
"import { $2 } from '$1';" | |
], | |
"description": "Crea un import" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment