MCPcopy
hub / github.com/r5n-labs/vscode-react-javascript-snippets

github.com/r5n-labs/vscode-react-javascript-snippets @main sqlite

repository ↗ · DeepWiki ↗
13 symbols 34 edges 21 files 0 documented · 0%
README

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.

Version Installs Rating Open VSX CI License: MIT

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

Core symbols most depended-on inside this repo

extensionConfig
called by 3
src/helpers/extensionConfig.ts
generateSnippets
called by 2
src/helpers/generateSnippets.ts
replaceSnippetPlaceholders
called by 2
src/helpers/snippetPlaceholders.ts
replaceOrRemoveReactImport
called by 1
src/helpers/replaceOrRemoveReactImport.ts
parseSnippetToBody
called by 1
src/helpers/parseSnippetToBody.ts
validateLanguageScopes
called by 1
src/helpers/generateSnippets.ts
getSnippets
called by 1
src/helpers/generateSnippets.ts
parseSnippet
called by 1
src/helpers/formatters.ts

Shape

Function 13

Languages

TypeScript100%

Modules by API surface

src/index.ts3 symbols
src/helpers/generateSnippets.ts3 symbols
src/helpers/snippetPlaceholders.ts2 symbols
src/helpers/snippetSearch.ts1 symbols
src/helpers/replaceOrRemoveReactImport.ts1 symbols
src/helpers/parseSnippetToBody.ts1 symbols
src/helpers/formatters.ts1 symbols
src/helpers/extensionConfig.ts1 symbols

Dependencies from manifests, versioned

@types/node25.6.0 · 1×
@types/vscode1.118.0 · 1×
@vscode/vsce3.9.1 · 1×
ovsx0.10.11 · 1×
oxfmt0.47.0 · 1×
oxlint1.62.0 · 1×
typescript6.0.3 · 1×

For agents

$ claude mcp add vscode-react-javascript-snippets \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact