gem-hunter
Language: TypeScript
Extension for React/Javascript snippets with search supporting ES7+ and babel features
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-snippets
Quick 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.
r5n.es-js-snippets).5.0.1 is 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:
r5n.es-js-snippets.dsznajder.es7-react-js-snippets to prevent duplicate snippets and command keybindings.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.
import React by default (toggle via importReactOnTop).createSlice, createApi / RTK Query) snippets.languageScopes is 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.
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 ./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.
Releases publish to VS Code Marketplace and Open VSX via GitHub Actions:
patch, minor, major, or an explicit numeric version such as 5.0.1. Marketplace extension versions must use major.minor.patch without -rc or -beta suffixes.develop frozen 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. If develop has advanced, preserve the existing tag and use the VSIX/checksum artifact from the original run to recover the missing destination manually.VSCE_PAT is required for vsce or both; OVSX_PAT is required for ovsx or both after the Open VSX namespace is configured.