{"id":24205289,"url":"https://github.com/mheob/vscode-snippets","last_synced_at":"2026-01-04T17:14:50.739Z","repository":{"id":38469721,"uuid":"399040089","full_name":"mheob/vscode-snippets","owner":"mheob","description":"Snippets for the development with Next.js, React in a TypeScript environment.","archived":false,"fork":false,"pushed_at":"2025-07-19T09:41:08.000Z","size":30248,"stargazers_count":4,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-19T11:23:31.853Z","etag":null,"topics":["hacktoberfest","nextjs","react","snippets","vs-code-extenstion"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=mheob.vscode-snippets","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mheob.png","metadata":{"funding":{"github":["mheob"],"patreon":null,"open_collective":null,"ko_fi":"mheob","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["www.paypal.me/mheob","www.buymeacoffee.com/mheob"]},"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-08-23T09:10:29.000Z","updated_at":"2025-07-19T09:41:11.000Z","dependencies_parsed_at":"2023-02-15T03:16:04.720Z","dependency_job_id":"13931ddd-b259-4207-9b45-95c93e8fdff3","html_url":"https://github.com/mheob/vscode-snippets","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/mheob/vscode-snippets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mheob%2Fvscode-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mheob%2Fvscode-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mheob%2Fvscode-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mheob%2Fvscode-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mheob","download_url":"https://codeload.github.com/mheob/vscode-snippets/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mheob%2Fvscode-snippets/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273272560,"owners_count":25075985,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-02T02:00:09.530Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","nextjs","react","snippets","vs-code-extenstion"],"created_at":"2025-01-13T23:20:59.317Z","updated_at":"2026-01-04T17:14:50.733Z","avatar_url":"https://github.com/mheob.png","language":"TypeScript","funding_links":["https://github.com/sponsors/mheob","https://ko-fi.com/mheob","www.paypal.me/mheob","www.buymeacoffee.com/mheob"],"categories":[],"sub_categories":[],"readme":"# Snippets for Next.js, React in TypeScript\n\n[![GitHub issues](https://img.shields.io/github/issues/mheob/vscode-snippets?logo=github\u0026style=for-the-badge)](https://github.com/mheob/vscode-snippets)\n\nThis extension provides you Snippets for the development with Next.js, React in a TypeScript environment in\n[VS Code](https://code.visualstudio.com/).\n\n## Supported languages (file extensions)\n\n- JavaScript (`.js`)\n- JavaScript React (`.jsx`)\n- TypeScript (`.ts`)\n- TypeScript React (`.tsx`)\n\n- Markdown (`.md`)\n\n## Snippets List for JS/TS\n\n### Components\n\n#### `rfc⇥`\n\nCreates a React Functional Component\n\nOnly for languages: `.tsx`\n\n```tsx\ninterface MyDynamicComponentNameProps {\n\ttest: string;\n}\n\nexport const MyDynamicComponentName = ({ test }: MyDynamicComponentNameProps): JSX.Element =\u003e {\n\treturn \u003cdiv\u003e$0\u003c/div\u003e;\n};\n\nexport default MyDynamicComponentName;\n```\n\n### Common\n\n| Trigger | Content                | Only for languages |\n| :------ | :--------------------- | :----------------- |\n| `dtid⇥` | adds `data-testid=\"…\"` | `.jsx`, `.tsx`     |\n\n### Console\n\n| Trigger      | Content                          |\n| :----------- | :------------------------------- |\n| `consError⇥` | console error `console.error(…)` |\n| `consInfo⇥`  | console info `console.info(…)`   |\n| `consLog⇥`   | console log `console.log(…)`     |\n| `consWarn⇥`  | console warn `console.warn(…)`   |\n\n### Export and Import\n\n| Trigger            | Content                                                         | Only for languages |\n| :----------------- | :-------------------------------------------------------------- | :----------------- |\n| `expAllFrom⇥`      | exports all from module `export * from '…'`                     |                    |\n| `expAs⇥`           | exports all as alias from module `export … as … from '…'`       |                    |\n| `expConst⇥`        | exports const `export const … = …`                              |                    |\n| `exportDefault⇥`   | exports default `export default …`                              |                    |\n| `impFrom⇥`         | imports entire module `import … from '…'`                       |                    |\n| `impAllFrom⇥`      | imports all as alias from module `import … as … from '…'`       |                    |\n| `impDestructured⇥` | imports only destructed part of module `import { … } from '…'`  |                    |\n| `impFileOnly⇥`     | imports entire module without module name `import '…'`          |                    |\n| `impReact⇥`        | import the `React` module `import React from 'react'`           | `.jsx`, `.tsx`     |\n| `impReactDom⇥`     | import the `ReactDOM` module `import ReactDOM from 'react-dom'` | `.jsx`, `.tsx`     |\n| `impType⇥`         | import only the type from module `import type { … } from '…'`   | `.ts`, `.tsx`      |\n\n### Functions\n\n| Trigger                | Content                                                  |\n| :--------------------- | :------------------------------------------------------- |\n| `arrowFunction⇥`       | creates a named function `const … = (…) =\u003e …`            |\n| `arrowFunctionInline⇥` | creates an anonymous function `(…) =\u003e …`                 |\n| `setInterval⇥`         | set interval helper method `setInterval(() =\u003e { … }, …)` |\n| `setTimeout⇥`          | set timeout helper method `setTimeout(() =\u003e { … }, …)`   |\n\n### Next.js Functions\n\n| Trigger               | Content                                                    | Only for languages |\n| :-------------------- | :--------------------------------------------------------- | :----------------- |\n| `getServerSideProps⇥` | creates the Next.js specific `getServerSideProps` function | `.tsx`             |\n| `getStaticPaths⇥`     | creates the Next.js specific `getStaticPaths` function     | `.tsx`             |\n| `getStaticProps⇥`     | creates the Next.js specific `getStaticProps` function     | `.tsx`             |\n\n### React Hooks\n\n| Trigger        | Hook                      |\n| :------------- | :------------------------ |\n| `useCallback⇥` | create `useCallback` hook |\n| `useContext⇥`  | create `useContext` hook  |\n| `useEffect⇥`   | create `useEffect` hook   |\n| `useMemo⇥`     | create `useMemo` hook     |\n| `useReducer⇥`  | create `useReducer` hook  |\n| `useRef⇥`      | create `useRef` hook      |\n| `useRouter⇥`   | create `useRouter` hook   |\n| `useState⇥`    | create `useState` hook    |\n\n## Snippets List for Markdown\n\n| Trigger                   | Content                                      |\n| :------------------------ | :------------------------------------------- |\n| `mdCode⇥`                 | insert a code block                          |\n| `mdImage⇥`                | insert a image                               |\n| `mdImageWithTitle⇥`       | insert a image with a title attribute        |\n| `mdLink⇥`                 | insert a link                                |\n| `mdLinkWithTitle⇥`        | insert a link with a title attribute         |\n| `mdLinkedImage⇥`          | insert a linked image                        |\n| `mdLinkedImageWithTitle⇥` | insert a linked image with a title attribute |\n| `mdTodo⇥`                 | insert a ToDo list item                      |\n\n## Contributing\n\nContributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmheob%2Fvscode-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmheob%2Fvscode-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmheob%2Fvscode-snippets/lists"}