Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Loki SnippetsNew to Visual Studio Code? Get it now.
Loki Snippets

Loki Snippets

Outbound

|
46 installs
| (0) | Free
A snippets to use on React ecosystem
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

loki-snippets

Loki Snippets for VS Code.

Loki is composed of a common snippets to use in React ecosystem.

Installation

  1. Open Extensions sidebar panel in VS Code. View > Extensions
  2. Search for Loki Snippets
  3. Click Install to install it

To use it, just type snippet and press Enter, when the snippet contains parameters just fill and navigate on next using Tab.

EXAMPLES

We have several snippets and we'll be adding new ones over time, here's the list:

React

ir: import React from 'react'

rc: Component

import React from 'react'

export const Snippets = () => {
  return <div></div>
}

rfc: Function component

import React from 'react'

export function Snippets() {
  return <div></div>
}

rcp: Component with props

import React from 'react'

type SnippetsProps = {

}

export const Snippets = (_: SnippetsProps) => {
  return <div></div>
}

export default Snippets

rfcp: Function component with props

import React from 'react'

type SnippetsProps = {
  foo: string
  bar: number
}

export const Snippets = (_: SnippetsProps) => {
  return <div></div>
}

export default Snippets

React Testing Library

irtl: import { cleanup, render } from '@testing-library/react'

rtld: describe

import { cleanup, render } from '@testing-library/react'

describe('Snippets', () => {
  afterEach(cleanup)

  it('should render correctly', () => {
    const { container } = render(<Snippets />)

    expect(container).toBeInTheDocument()
  })
})

rtli: it

it('should render correctly', () => {
  const { container } = render(<Snippets />)

  expect(container).toBeInTheDocument()
})

rtlie: it.each

const cases = [{ disabled: true, name: 'Snippets' }, { className: 'p-4' }]

it.each(cases)('should render correctly with props', props => {
  const { container } = render(<Snippets {...props} />)

  expect(container).toBeInTheDocument()
})

Typescript

tsa: Arrow function

const snippets = () => {
  return
}

tsf: Function

function snippets() {
  return
}

tst: Type

type Snippets = {
  
}

tsi: Interface

interface Snippets {
  
}

Loki Snippets created by Melquisedec Felipe.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft