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-snippetsextension. The legacydsznajder.es7-react-js-snippetslisting is a separate installation and its formal Marketplace deprecation is still pending. Installr5n.es-js-snippetsfor new updates and uninstall the legacy extension to avoid duplicate commands and snippets.
Open VS Code Quick Open and paste:
ext install r5n.es-js-snippetsQuick Open shortcut: Ctrl+P (Linux/Windows) · ⌘P (macOS).
Or install from the Marketplace: r5n.es-js-snippets. Open VSX availability will follow after the r5n namespace is verified.
Version 5.0.1 is distributed through the Marketplace prerelease channel. Existing stable users stay on 5.0.0 unless they opt in.
- Open Extensions and select ES JS Snippets (
r5n.es-js-snippets). - Use the extension's menu to switch to the prerelease version.
- Confirm that version
5.0.1is installed, then report regressions through GitHub Issues.
The stable follow-up will use version 5.0.2 because Marketplace versions cannot be reused between prerelease and stable channels.
The Marketplace cannot automatically update between different extension IDs. To move from dsznajder.es7-react-js-snippets:
- Install
r5n.es-js-snippets. - Uninstall
dsznajder.es7-react-js-snippetsto prevent duplicate snippets and command keybindings. - Reload VS Code when prompted.
User-level reactSnippets.settings.* values use the same keys and carry over. Move any workspace-specific values to User settings because generation settings are now application-scoped. The experimental reactSnippets.settings.prettierEnabled option was removed; generated snippets no longer read project Prettier configuration.
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.
- React 17–19 support — components no longer add
import Reactby default (toggle viaimportReactOnTop). - React Router v6 imports, including v6.4+ data-router scaffolds.
- Redux Toolkit (
createSlice,createApi/ RTK Query) snippets. - Performance: snippet generation no longer mutates source on settings reload, fixing stale snippets after toggling options.
languageScopesis validated and honored by both completions and snippet search.
See CHANGELOG.md for the full list.
Settings live under reactSnippets.settings.*. They are application-scoped because VS Code windows share one generated snippet artifact. Reload VS Code when prompted after a change.
Type: boolean
Default: false
Adds import React from 'react' to component snippets for projects using the legacy JSX transform.
Type: boolean
Default: true
Includes TypeScript-specific ts*, exptp, and expint snippets.
Type: string
Default: typescript, typescriptreact, javascript, javascriptreact
Accepts a comma-separated list of VS Code language identifiers.
Type: string
Default: type
Allowed values: type, interface
Controls whether Props and State declarations use type aliases or interfaces in TypeScript snippets.
Type: string
Default: generic
Allowed values: generic, component
Controls whether TypeScript component snippets name their props type Props or derive it from the component name, for example ButtonProps.
Type: string
Default: filename
Allowed values: filename, directoryForIndex
Controls how component snippets derive their name. directoryForIndex uses the parent directory for an index.* file, so Button/index.tsx becomes Button; other filenames still use their basename.
Either way the name is converted to PascalCase, so delete-modal.tsx becomes DeleteModal. Separators such as -, _, and . are dropped, and names that are already PascalCase are left unchanged.
Redux slice snippets are not components, so they are only renamed when the filename would not be a valid identifier: user-slice.ts becomes userSlice, while UserSlice.ts is left alone.
Type: string
Default: fragment
Allowed values: fragment, div
Controls whether generated web component content is wrapped in a React fragment or a div.
Install from the VS Code Marketplace where supported. Open VSX availability for VSCodium and other compatible desktop clients will follow after namespace verification. Browser extension hosts are not currently supported.
vim / neovim with coc.nvim
Add the plugin in your init.vim:
Plug 'r5n-labs/vscode-react-javascript-snippets', { 'do': 'bun install --frozen-lockfile && bun run compile' }Reload (:source %) and run :PlugInstall.
use {
'r5n-labs/vscode-react-javascript-snippets',
run = 'bun install --frozen-lockfile && bun run compile'
}Save (:w) to trigger the build.
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 audit # high-severity dependency audit
bun run typescript # type-check
bun run lint # oxlint + oxfmt checks
bun test # generation and artifact contracts
bun run compile # build to ./libPress 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.
Releases publish to VS Code Marketplace and Open VSX via GitHub Actions:
- Trigger the Release workflow in the Actions tab and pick
patch,minor,major, or an explicit numeric version such as5.0.1. Marketplace extension versions must usemajor.minor.patchwithout-rcor-betasuffixes. - Enable the separate prerelease input to publish that numeric version to the prerelease channel. Each prerelease needs a unique, increasing numeric version.
- The workflow verifies publisher authorization, audits, lints, tests, verifies generated snippets, packages one VSIX with a SHA-256 checksum, pushes the release commit and tag atomically, then publishes that exact artifact to the selected registries and creates the GitHub Release.
- Keep
developfrozen until publication and GitHub Release creation finish. To recover before another commit lands, start a new workflow dispatch with the same explicit version, prerelease value, and target. Do not use GitHub's Re-run jobs action. Existing registry versions are skipped while missing destinations are retried. Ifdevelophas advanced, preserve the existing tag and use the VSIX/checksum artifact from the original run to recover the missing destination manually. VSCE_PATis required forvsceorboth;OVSX_PATis required forovsxorbothafter the Open VSX namespace is configured.