VS Code ES7+ React/Redux/React-Native/JS snippets

Customizable JavaScript and React/Redux snippets for VS Code, with first-class support for ES7+ syntax, React 17–19, React Router v6, Redux Toolkit, and TypeScript.

Maintained by r5n. Continues the work of the original vscode-es7-javascript-react-snippets extension. The legacy es7-react-js-snippets listing is deprecated; install r5n.es-js-snippets for new updates.

Install

Open VS Code Quick Open and paste:

ext install r5n.es-js-snippets

Quick Open shortcut: Ctrl+P (Linux/Windows) · ⌘P (macOS).

Or from the Marketplace: r5n.es-js-snippets · Open VSX: open-vsx.org.

Snippet search

Search by description or prefix:

Action	Shortcut
Snippet search	⇧⌘R (macOS) · Ctrl+Alt+R (Win/Linux)
Command palette	"Snippet search"

The full list lives in docs/Snippets.md.

What's new in v5

• React 17–19 support — components no longer add import React by default (toggle via importReactOnTop).
• React Router v6 imports.
• Redux Toolkit (createSlice, createApi / RTK Query) snippets.
• Performance: snippet generation no longer mutates source on settings reload, fixing stale snippets after toggling options.
• languageScopes is validated; invalid scopes are dropped instead of silently breaking activation.

See CHANGELOG.md for the full list.

Configuration

Settings live under reactSnippets.settings.*. Restart VS Code after changes.

Setting	Type	Default	Description
importReactOnTop	boolean	false	Add import React from 'react' to component snippets. Enable for projects on the legacy JSX transform.
typescript	boolean	true	Emit TypeScript Props typing in component snippets.
languageScopes	string	typescript,typescriptreact,javascript,javascriptreact	Comma-separated language scopes where snippets are active.
typescriptPropsStatePrefix	string	type	Use type or interface for Props/State in TypeScript snippets.

Editor support

VS Code · Cursor · VSCodium

Install from Marketplace (VS Code, Cursor) or Open VSX (VSCodium, Theia, Eclipse Che).

vim / neovim with coc.nvim

Add the plugin in your init.vim:

Plug 'r5n/vscode-react-javascript-snippets', { 'do': 'bun install --frozen-lockfile && bun run compile' }

Reload (:source %) and run :PlugInstall.

Packer (Lua)

use {
  'r5n/vscode-react-javascript-snippets',
  run = 'bun install --frozen-lockfile && bun run compile'
}

Save (:w) to trigger the build.

Contributing & development

Local stack: bun ≥ 1.3 + VS Code.

git clone https://github.com/r5n-labs/vscode-react-javascript-snippets
cd vscode-react-javascript-snippets
bun install
bun run typescript      # type-check
bun run lint            # eslint
bun run compile         # build to ./lib

Press F5 in VS Code to launch the Extension Development Host with the local build attached.

Open a PR against develop. CI (Typescript & lint) runs on every push and pull request.

Releasing (maintainers)

Releases publish to VS Code Marketplace and Open VSX via GitHub Actions:

1. Trigger the Release workflow in the Actions tab and pick a version bump (prerelease, patch, minor, major) or pass an explicit semver (5.0.0-rc.2).
2. The workflow runs lint + tsc, packages with vsce package, publishes with vsce publish and ovsx publish (auto-detects --pre-release for -rc/-beta versions), pushes the tag, and creates a GitHub Release with the .vsix attached.
3. Required repo secrets: VSCE_PAT (Azure DevOps PAT scoped to the r5n Marketplace publisher), OVSX_PAT (Open VSX namespace token).

License

MIT