diff --git a/README.md b/README.md index 57f8e3d..a3174f6 100644 --- a/README.md +++ b/README.md @@ -12,10 +12,28 @@ A VSCode extension to effortlessly generate React and Next.js files with customi - Layout - Customizable templates - Integration with VSCode commands +- Snippets for React/Next components ![Context menu](https://raw.githubusercontent.com/mrheault/vscode-react-nextjs-generator/refs/heads/main/images/explorer-context-menu.jpg) _Explorer Context Menu_ +## 🔧 Snippets + +| Prefix | Description | +| ---------------- | ---------------------------------------------------------------- | +| `rimr` | JavaScript/TypeScript: import react | +| `rfc` | JavaScript/TypeScript: React functional component | +| `rfce` | JavaScript/TypeScript: React functional component with useEffect | +| `rsc` | JavaScript/TypeScript: React functional component with useState | +| `rctx` | JavaScript/TypeScript: React context with provider and hook | +| `nxpg` | NextJS page file | +| `nxlayout` | NextJS layout | +| `nxerror` | NextJS error | +| `nxloading` | NextJS loading | +| `nxcomponent` | React component | +| `nxcomponentcss` | React component CSS module | +| `nxtest` | React component test | + ## 🛠️ Installation There are several ways to install. diff --git a/images/react-nextjs-generator-icon.png b/images/react-nextjs-generator-icon.png new file mode 100644 index 0000000..c98ba1b Binary files /dev/null and b/images/react-nextjs-generator-icon.png differ diff --git a/package.json b/package.json index ed89ca1..4db85f8 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "Easily create React components with Next.js structure and Next.js pages", "author": "Mike Rheault", "publisher": "mikerheault", + "icon": "images/react-nextjs-generator-icon.png", "repository": { "type": "git", "url": "https://github.com/mrheault/vscode-react-nextjs-generator" @@ -46,17 +47,33 @@ "language": "typescriptreact", "path": "./src/snippets/ts-react.json" }, + { + "language": "typescriptreact", + "path": "./src/snippets/ts-next.json" + }, { "language": "typescript", "path": "./src/snippets/ts-next.json" }, + { + "language": "typescript", + "path": "./src/snippets/ts-react.json" + }, { "language": "javascriptreact", "path": "./src/snippets/js-react.json" }, + { + "language": "javascriptreact", + "path": "./src/snippets/js-next.json" + }, { "language": "javascript", "path": "./src/snippets/js-next.json" + }, + { + "language": "javascript", + "path": "./src/snippets/js-react.json" } ], "commands": [