Skip to content

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

Notifications You must be signed in to change notification settings

Jimmydalecleveland/js--snippet-good

Repository files navigation

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)

rfpe snippet example

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

clconsole log

console.log()


clcconsole 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;')


clgconsole 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");

impimport module

import module from 'module'


imdimport module destructured

import { moduleName } from 'module'


imrimport react

import React from 'react'


imrcimport react and Component

import React, { Component } from 'react'


imrpcimport react and PureComponent

import React, { PureComponent } from 'react'


imrusimport react and useState

import React, { useState } from 'react'


imrueimport react and useEffect

import React, { useEffect } from 'react'


imruse or imruesimport react, useState and useEffect

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


imptimport PropTypes

import PropTypes from 'prop-types'


imesimport enzyme's shallow module

import { shallow } from 'enzyme'


imemimport enzyme's mount module

import { mount } from 'enzyme'


imesmimport enzyme's shallow and mount modules

import { shallow, mount } from 'enzyme'


expexport default module

export default module


rceReact 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;

rusReact 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();

rueReact 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 rfesReact 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;

rfcReact functional component

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

rfpeReact 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;

ptPropTypes 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;')
}

scpStyled Components: props callback

${props => props.};

sctStyled 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("", () => {});

titTesting 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} />


rtlbsReact 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();
  });
});

rtlssReact Testing Library: Snapshot

expect(container).toMatchSnapshot()


tst – Testing: test block

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

sbcStorybook 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

sbcstorybook 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

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published