vscode snippets

typescript.json

{
  "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."
  }
}

typescriptreact.json

{
  // 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"
  }
}