{"id":16149091,"url":"https://github.com/zardoy/vscode-better-snippets","last_synced_at":"2025-03-18T18:33:19.489Z","repository":{"id":41368418,"uuid":"418494898","full_name":"zardoy/vscode-better-snippets","owner":"zardoy","description":"Create most advanced snippets for VSCode in existence","archived":false,"fork":false,"pushed_at":"2023-07-30T10:32:03.000Z","size":931,"stargazers_count":6,"open_issues_count":14,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-11T00:36:16.876Z","etag":null,"topics":["snippets","typescript","visual-studio-code","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=zardoy.better-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/zardoy.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":"CONTRIBUTING.MD","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-18T12:38:36.000Z","updated_at":"2024-01-21T10:05:09.000Z","dependencies_parsed_at":"2023-02-19T07:25:25.563Z","dependency_job_id":null,"html_url":"https://github.com/zardoy/vscode-better-snippets","commit_stats":null,"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zardoy%2Fvscode-better-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zardoy%2Fvscode-better-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zardoy%2Fvscode-better-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zardoy%2Fvscode-better-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zardoy","download_url":"https://codeload.github.com/zardoy/vscode-better-snippets/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221715919,"owners_count":16868642,"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","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":["snippets","typescript","visual-studio-code","vscode","vscode-extension"],"created_at":"2024-10-10T00:36:34.451Z","updated_at":"2024-10-27T18:15:14.421Z","avatar_url":"https://github.com/zardoy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VSCode Better Snippets\n\n## Key Features\n\nIt has only a few TypeScript-oriented features, all other features work with other languages as well.\n\n1. Extremely configurable snippets with stunning number of restricting configurations\n2. [TS] Not suggesting in strings \u0026 comments out of the box\n3. [Typing snippets](#typing-snippets)\n4. View with convenient editor\n\n\u003e Full web support!\n\nSnippets in VSCode are always contextless, they will be suggested in comments, string, everywhere. You can only restrict them showing only in specific languages, however this extension lets you construct snippets just on another level.\n\nI recommend to use this extension instead of builtin snippets. There is `Better Snippets: Migrate Native Snippets to Extension` command for migrating your native snippets to better snippets.\n\n### Configurable Parts\n\nThe main setting for constructing your snippets is `betterSnippets.customSnippets`: **[example usage](./test/snippets.jsonc)**.\n\n#### Filtering\n\n- Snippet Location (e.g. display snippet only in the start of the line or the file). Note that setting location to empty array will make it to display everywhere.\n- Specific NPM dependencies are met (e.g. `react`)\n- Specific files: filtering the path by regex (for example set `when.fileRegex` to `App.tsx?`)\n- Display Snippet only if line the matching the regex (for example set `when.lineRegex` to `\\s*const`)\n- Display Snippet only if some other line the matching the regex (for example line with indent up matches `function App() {`)\n\nJust because snippets are now aware of context, you can configure them to **always** show on top and/or show them only when exact snippet prefix is typed.\n\n#### Construct\n\n- Snippet Icon (with `iconType`, `fileIcon` or `folderIcon`)\n- Snippet Sorting (with `sortText`, you can boost suggestion to top or bottom)\n- Placeholders in body from regex props. See [postfix example](test/examples/postfixes.jsonc).\n\nThis all can give extreme control for your snippets!\n\n## Builtin Snippets\n\nThis extension comes with handy [top-line builtin snippets](src/builtinSnippets.ts) for JS and Markdown languages. They can be disabled.\n\n## Snippet Defaults\n\nThis extension comes with some defaults for your snippets.\n\nThey are set and configurable via `betterSnippets.customSnippetDefaults` setting.\nSome of defaults that important to understand:\n\n- **default location is `code`**. Banned locations:\n\n1. For all languages, location after dot e.g. in `something.mySnippet`.\nThis was done as in most languages, after the dot you access the property and most probably don't want snippets.\n\n1. For JS/TS langs, also snippets withing comments / strings.\n\n## Typing Snippets\n\n\u003e aka hotstrings from [AutoHotkey](https://www.autohotkey.com/)\n\nYou can also define so called typing snippets. Some sequence of *typed letters* will be replaced with snippet, for example:\n\n`cb ` -\u003e `($1) =\u003e $2`\n\nConfiguration:\n\n```json\n\"betterSnippets.typingSnippets\": [\n    {\n        \"sequence\": \"cb \",\n        \"body\":\"($1) =\u003e $2\"\n    }\n],\n```\n\nNote that:\n\n- almost all features from snippets such as `resolveImports` or `when` are supported!\n- any cursor movement (using arrows or mouse) will reset the typing sequence, `\\n` can't be part of sequence\n- they work with multiple selections (in multicursor mode, can be disabled with setting)\n\n## Snippet Features Demo\n\n\u003e Below are demos. See config for these demos above in *example usage*\n\n### Auto Imports\n\n![vscode javascript auto imports](https://user-images.githubusercontent.com/46503702/188254222-64fbf138-de7c-49a0-8237-cf62bf678c57.gif)\n\n## Reuse Snippet Data\n\nYou can use `betterSnippets.extendsGroups` setting to extract common snippet data or even by creating your own snippet pack extension!\n\nExample usage of `betterSnippets.extendsGroups`:\n\n```json\n\"betterSnippets.extendsGroups\": {\n    \"reactUse\": {\n        \"when\": {\n            \"locations\": [\n                \"lineStart\"\n            ],\n            \"languages\": [\n                \"react\"\n            ],\n            \"otherLines\": [\n                {\n                    \"indent\": -1,\n                    \"testRegex\": \"function|=\u003e|React.FC\"\n                }\n            ]\n        }\n    }\n},\n\"betterSnippets.customSnippets\": [\n    {\n        \"extends\": \"reactUse\",\n        \"name\": \"useInitEffect\",\n        \"body\": [\n            \"useEffect(() =\u003e {\",\n            \"\\t$1\",\n            \"}, []);\"\n        ],\n        \"resolveImports\": {\n            \"useEffect\": {\n                \"package\": \"react\"\n            }\n        },\n    },\n]\n```\n\nYou can reuse any custom or typing snippet data in this setting. For reusing name or sequence use `nameOrSequence` property.\n\nWith special variables syntax (notice double `$` in extendsGroups):\n\n```json\n\"betterSnippets.extendsGroups\": {\n    \"reactImport\": {\n        \"resolveImports\": {\n            \"$$FUNC\": {\n                \"package\": \"$$PACKAGE\"\n            }\n        },\n        \"when\":{\n            \"npmDependencies\": [\"$$PACKAGE\"]\n        }\n    }\n},\n\"betterSnippets.customSnippets\": [\n    {\n        \"extends\": \"reactImport\",\n        \"name\": \"useInitEffect\",\n        \"body\": [\n            \"useEffect(() =\u003e {\",\n            \"\\t$1\",\n            \"}, []);\"\n        ],\n        \"$FUNC\": \"useEffect\",\n        \"$PACKAGE\": \"preact\"\n    },\n]\n```\n\n### Experimental TS Snippets\n\nDisabled by default, can be enabled with `betterSnippets.enableExperimentalSnippets` setting.\nHowever will be removed (migrated from here) in future releases.\n\nPostfixes:\n\n- `if`: `something === 'here'.if` -\u003e `if (something === 'here')`\n\nSpecial:\n\n- `useParams` for `react-router`: [demo](https://twitter.com/i/status/1482817282145492993)\n\n## More\n\nMore docs coming soon, for now, you can look at [changelog](https://github.com/zardoy/vscode-better-snippets/releases) to see more about features\n\n## Similar Extensions\n\n- [TS/JS postfix completion](https://marketplace.visualstudio.com/items?itemName=ipatalas.vscode-postfix-ts)\n- [Module Templates](https://marketplace.visualstudio.com/items?itemName=asbjornh.vscode-module-templates) for creating complex files templates with one command\n- Feel free to open PR to add another one!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzardoy%2Fvscode-better-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzardoy%2Fvscode-better-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzardoy%2Fvscode-better-snippets/lists"}