JavaScript Snippets

This is a small collection of useful JavaScript snippets for VS Code.

Features

Console Logs

Shortcut	Command
cl	console.log('foo: ', foo)
clog	console.log(foo)
cljson	console.log(JSON.stringify(foo, null, 2))
clobj	console.log({ foo })
cleslint	// eslint-disable-next-line no-console \n console.log('$1: ', $1)

Eslint

Shortcut	Command
esdisable	/* eslint-disable @typescript-eslint/no-unused-vars */
esdisablenextline	/* eslint-disable-next-line @typescript-eslint/no-unused-vars */

Import Statements

Shortcut	Command
imp	import defaultExport from 'module'
impn	import { namedExport } from 'module'

Jest Unit Tests

Shortcut	Command
testfile	Unit test boilerplate
testdescribe	describe('', () => {})
testspec	it('', () => {})
testassert	expect(variable).toEqual(result)

React

Shortcut	Command
react-typescript	React component boilerplate
reactnative-typescript	React Native component boilerplate
useEffectHook	React useEffect hook boilerplate

Install Instructions

This extension can be installed through the VS Code Marketplace:

https://marketplace.visualstudio.com/items?itemName=ezrafree.js-snippets

For development, you can also install manually through git:

cd ~/.vscode/extensions
git clone [email protected]:ezrafree/vscode-javascript-snippets.git ezrafree.js-snippets

Configuring

You may want to disable keywords in your configuration to make accessing snippets easier:

{
  "[javascript]": {
    "editor.suggest.showKeywords": false
  },
  "[javascriptreact]": {
    "editor.suggest.showKeywords": false
  },
  "[typescript]": {
    "editor.suggest.showKeywords": false
  },
  "[typescriptreact]": {
    "editor.suggest.showKeywords": false
  }
}

Learn more about configuring snippets in the VS Code IntelliSense documentation.

Known Issues

There are no known issues at this time, please reach out if you discover anything.