JS - Snippet Good!

Newest Release: v1.7.0 - Typescript Support!

---

Features

A collection of customized snippets intended for personal use. I've gathered and modified some of them from existing packages and created the rest.

Example (rfpe and ptsr snippets)

Supported VS Code Language Extensions

• javascript (.js)
• javascriptreact (.jsx)
• typescript (.ts)
• typescriptreact (.tsx)
• css (styled component shortcuts)

Debugging developer note:

If you are working on this extension, you can use the F5 key to enter debugging mode and use the snippets you are adding/modifying in any project you like.

Snippets

cl – console log

console.log()

---

clc – console log with color

note: cursor starts at your message, first tab goes to color, third tab goes to the position after the css string, so you can add additional variables to log.

console.log('%cYourTextHere', 'color: cornflowerblue;')

---

clg – console log group

note: the string passed to .group and .groupEnd should be the same

console.group("Group Name");
console.log("I am in the group!");
console.groupEnd("Group Name");

---

imp – import module

import module from 'module'

---

imd – import module destructured

import { moduleName } from 'module'

---

imr – import react

import React from 'react'

---

imrc – import react and Component

import React, { Component } from 'react'

---

imrpc – import react and PureComponent

import React, { PureComponent } from 'react'

---

imrus – import react and useState

import React, { useState } from 'react'

---

imrue – import react and useEffect

import React, { useEffect } from 'react'

---

imruse or imrues – import react, useState and useEffect

import React, { useState, useEffect } from 'react'

---

impt – import PropTypes

import PropTypes from 'prop-types'

---

imes – import enzyme's shallow module

import { shallow } from 'enzyme'

---

imem – import enzyme's mount module

import { mount } from 'enzyme'

---

imesm – import enzyme's shallow and mount modules

import { shallow, mount } from 'enzyme'

---

exp – export default module

export default module

---

rce – React Component class with export after

import React, { Component } from "react";

class Module extends Component {
  render() {
    return <div></div>;
  }
}

export default Module;

---

rfe or rse(deprecated) – React functional component with export after

import React from "react";

const Module = () => {
  return <div></div>;
};

export default Module;

---

rus – React useState statement

Note: this snippet takes the state placeholder and captializes the setState counterpart using snippet transforms. Just type whatever your state variable is and press "Tab" to activate the transform and move on to the next placeholder.

Note of Note: I can't get this to work with the "Vim" extension, not matter how hard I try. Sorry :(

const [state, setState] = useState();

rue – React useEffect statement

Note: I didn't place the 2nd argument of useEffect in this snippet, because I often do not know if I'm going to need it, or what props/state will go in there until I'm done writing it. It also becomes troublesome to delete the placeholder if you don't want it

useEffect(() => {});

rfeus or rfes – React functional component with export after and useState setup

Note: this snippet takes the state placeholder and captializes the setState counterpart using snippet transforms. Just type whatever your state variable is and press "Tab" to activate the transform and move on to the next placeholder.

Note of Note: I can't get this to work with the "Vim" extension, not matter how hard I try. Sorry :(

import React, { useState } from "react";

const Module = () => {
  const [state, setState] = useState();

  return <div></div>;
};

export default Module;

---

rfc – React functional component

const Module = () => {
  return <div></div>;
};

---

rfpe – React functional component with PropTypes and export after

import React from "react";
import PropTypes from "prop-types";

const Module = () => {
  return <div></div>;
};

Module.propTypes = {};

export default Module;

pt – PropTypes object

Useful if you have already created a component and decide you need Proptypes after. Uses the filename as the default for Module. Note:: VSCode snippets do not autocomplete during placeholders, so you'll want to hit escape after tabbing inside of the object

Module.propTypes = {};

---

cdu – React: componentDidUpdate

componentDidUpdate(prevProps, prevState) {

}

---

cdm – React: componentDidMount

componentDidMount() {

}

---

cdml – React: componentDidMount with log

componentDidMount() {
  console.log('Module Mounted')
}

---

cdmlc – React: componentDidMount with log (color)

componentDidMount() {
  console.log('%cModule Mounted', 'color: cornflowerblue;')
}

---

scp – Styled Components: props callback

${props => props.};

---

sct – Styled Components: theme callback

${({ theme }) => theme.};

---

PropType snippets:

Prefix	Output
pta	PropTypes.array
ptar	PropType.array.isRequired
ptb	PropType.bool
ptbr	PropType.bool.isRequired
ptel	PropType.element
ptelr	PropType.element.isRequired
ptf	PropType.func
ptfr	PropType.func.isRequired
ptnd	PropType.node
ptndr	PropType.node.isRequired
ptn	PropType.number
ptnr	PropType.number.isRequired
pto	PropType.object
ptor	PropType.object.isRequired
pts	PropType.string
ptsr	PropType.string.isRequired
ptsh	PropType.shape({})
ptshr	PropType.shape({}).isRequired

---

des – Testing describe block

describe("", () => {});

---

tit – Testing it block

it("", () => {});

---

expss – Testing expect to match snapshot

expect().toMatchSnapshot()

---

expte or exp== – Testing expect to equal

expect().toEqual()

---

exptb – Testing expect to be

expect().toBe()

---

exptbn – Testing expect to be n`ull

expect().toBeNull()

---

shal – Enzyme shallow mount component

const component = shallow(<Component />

---

shalp – Enzyme shallow mount component with premade props object

const component = shallow(<Component {...props} />

---

mnt – Enzyme full mount component

const component = mount(<Component />

---

mntp – Enzyme full mount component with premade props object

const component = mount(<Component {...props} />

---

rtlbs – React Testing Library: Bootstrap

import React from "react";
import { render } from "@testing-library/react";

import TestComponent from ".";

describe("TestComponent", () => {
  test("should render", () => {
    const { container } = render(<TestComponent></TestComponent>);

    expect(container).toMatchSnapshot();
  });
});

---

rtlss – React Testing Library: Snapshot

expect(container).toMatchSnapshot()

---

tst – Testing: test block

test("", () => {});

---

sbc – Storybook Component

Quick story setup for a component in the same directory as the story.

import React from "react";
import { storiesOf } from "@storybook/react";

import Component from ".";

storiesOf("Components|Component", module).add("default", () => (
  <Component></Component>
));

---

Typescript Snippets

sbc – storybook component

Quick story setup for a component in the same directory as the story.

import { ComponentStory, ComponentMeta } from '@storybook/react'

import { Example } from './'

export default {
  title: 'Components/Example',
  component: Example,
} as ComponentMeta<typeof Example>

const Template: ComponentStory<typeof Example> = (args) => <Example {...args} />

export const Default = Template.bind({})
Default.args = {
  children: 'I am the Example Component',
}

---

Release Notes

See Changelog