Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>JS - Snippet Good!New to Visual Studio Code? Get it now.
JS - Snippet Good!

JS - Snippet Good!

Jimmy Cleveland

|
2,948 installs
| (2) | Free
A collection of Javascript and React snippets the way I want them to be.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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

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

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