Loki Snippets for VS Code.
Loki is composed of a common snippets to use in React ecosystem.
Installation
- Open Extensions sidebar panel in VS Code.
View > Extensions
- Search for
Loki Snippets
- 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.