{"id":50420613,"url":"https://github.com/abp6318/calcite-snippets","last_synced_at":"2026-05-31T08:02:30.051Z","repository":{"id":202959986,"uuid":"708223116","full_name":"abp6318/calcite-snippets","owner":"abp6318","description":"(Unofficial) A small VSCode extension for assisting those develop using the Calcite Design System","archived":false,"fork":false,"pushed_at":"2023-11-03T19:04:30.000Z","size":48,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2023-11-04T17:41:02.288Z","etag":null,"topics":["calcite","calcite-components","esri","vscode","vscode-extension","web"],"latest_commit_sha":null,"homepage":"https://github.com/Esri/calcite-design-system","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abp6318.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-21T22:29:02.000Z","updated_at":"2023-11-03T19:15:11.000Z","dependencies_parsed_at":"2023-10-26T17:39:32.530Z","dependency_job_id":null,"html_url":"https://github.com/abp6318/calcite-snippets","commit_stats":null,"previous_names":["abp6318/calcite-snippets"],"tags_count":0,"template":null,"template_full_name":null,"purl":"pkg:github/abp6318/calcite-snippets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abp6318%2Fcalcite-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abp6318%2Fcalcite-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abp6318%2Fcalcite-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abp6318%2Fcalcite-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abp6318","download_url":"https://codeload.github.com/abp6318/calcite-snippets/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abp6318%2Fcalcite-snippets/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33723550,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-31T02:00:06.040Z","response_time":95,"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":["calcite","calcite-components","esri","vscode","vscode-extension","web"],"created_at":"2026-05-31T08:02:28.321Z","updated_at":"2026-05-31T08:02:30.032Z","avatar_url":"https://github.com/abp6318.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Calcite Snippets (Unofficial)\n\n### Calcite Design System\n\u003c!-- Section on CDS --\u003e\n\"Calcite Design System is a collection of design and development resources for creating beautiful, easy to use, cohesive experiences across apps with minimal effort. It includes a UI kit, icons, color schemes, and a web component library with UI elements such as buttons, panels, accordions, alerts, and many more\" ([Calcite Design System](https://developers.arcgis.com/calcite-design-system/). \n\nThis is an unofficial extension for the Calcite Design System components created as a part of Esri's monthly First Friday Hack from October and November 2023. \n\n### Installation\n#### Prerequisites\n| Technology Name   | Version  | Description                                       | Download\n|-------------------|----------|---------------------------------------------------|-------------\n| Node.js | Latest | Needed for building and running the extension. | https://nodejs.org/en/download\n| VSCode | Latest | Platform the extension is used on! | https://code.visualstudio.com/download\n| git | Latest | Only needed if you'd like to contribute. You can just download the zip if you just want to run it. | https://git-scm.com/downloads\n\n#### Finding the Extension in the Store\n\u003c!-- Section on how to find extension in VSCode extension store* --\u003e\nThe extension has not been published in the VSCode extension store yet.\n\n#### Local Installation\nSee notes here: https://github.com/abp6318/calcite-snippets/blob/main/vsc-extension-quickstart.md#install-your-extension\n\n### Adding New Snippets\n#### Formatting the Snippet\n\u003c!-- Section about formatting name, prefix, description, etc. --\u003e\n - Name (string, required) = Name of Calcite component; capital case with spaces\n - Prefix (string, required) = See formatting options below.\n   - `calcite-alert` = Component tags\n   - `calcite-alert_required-attributes` = Component with only required attributes\n   - `calcite-alert_default-attributes` = Component with all default and required attributes\n   - `calcite-alert_example` = Component example (can include sub-components)\n - Description (string, required) = Description of Calcite component; sentence case\n - Body (string, required) = Code block; add to snippet.html\n\n#### Creating the Snippet\n\u003c!-- Section about using the snippify script --\u003e\nFirst, add your snippet to `snippet.html`, then once formatted the way you want, run the `snippify.js` script by using the following. You will then be prompted for the name, prefix, and description.\n```\nnpm run snippify\n```\n\n#### Testing Your Changes\n\u003c!-- Section about testing your new additions locally --\u003e\nTesting your changes is relatively simple once you've run `npm run snippify` and completed the prompts. Inside the `.vscode` directory are two essential files for testing: `launch.json` and `tasks.json`.\n\nOpen up the debug tab (using `shift + command + D` on Mac or `shift + windows + D` on Windows). You should see a small dropdown at the top; select the option that says `~Launch Extension~`. This label may change in the future if the `launch.json` file is updated.\n\n\u003cimg width=\"600\" alt=\"Screenshot 2023-10-22 at 2 35 09 PM\" src=\"https://github.com/abp6318/calcite-snippets/assets/60486980/4ac0481a-f8e1-4ed8-9073-cdd38616bda3\"\u003e\n\nPress the run button (a green triangle in the same area) and a new Extension Development Host (EDH) window will open; it will look similar to an empty/repo-less VSCode window. Create a new file in this EDH and begin typing out a prefix for a calcite component. It should appear as an option.\n\n\u003cimg width=\"600\" alt=\"Screenshot 2023-10-22 at 2 36 00 PM\" src=\"https://github.com/abp6318/calcite-snippets/assets/60486980/ad64593a-8a0a-41e1-9af0-a29344948a48\"\u003e\n\nTo clean up your testing environment, close your EDH by either hitting the red 'x' or going back to the VSCode window you started the debugger from and hit the stop button (a red square).\n\n\u003cimg width=\"600\" alt=\"Screenshot 2023-10-22 at 2 37 08 PM\" src=\"https://github.com/abp6318/calcite-snippets/assets/60486980/5abc58c5-abc0-46d5-859f-c1c9ce0deea6\"\u003e\n\n### How To Use\n  \u003c!-- Reference section on testing locally --\u003e\n- For testing your changes: https://github.com/abp6318/calcite-snippets/edit/main/README.md#testing-your-changes\n  \u003c!-- Reference section on finding in store --\u003e\n- For finding the app in the store: (TBD upon publication)\n\u003c!-- Section on how to use extension in editor --\u003e\nUsing a snippets extension in VSCode is relatively simple, considering they are meant to assist users in development. Once you have the extension installed (or you are in the Extension Development Host mentioned in the testing section), all you need to do is begin typing out the prefix and the snippet should appear as an option.\n\n\u003cimg width=\"600\" alt=\"Screenshot 2023-10-22 at 2 36 00 PM\" src=\"https://github.com/abp6318/calcite-snippets/assets/60486980/ad64593a-8a0a-41e1-9af0-a29344948a48\"\u003e\n\n### Resources\n- Extensions\n  - Create your own: https://code.visualstudio.com/api/get-started/your-first-extension\n  - Snippets: https://code.visualstudio.com/docs/editor/userdefinedsnippets\n  - Publishing: https://code.visualstudio.com/api/working-with-extensions/publishing-extension\n- Esri \u0026 Calcite\n  - Calcite Design System: https://developers.arcgis.com/calcite-design-system/\n  - Esri Home: https://www.esri.com/en-us/home\n  - ArcGIS Hub: https://hub.arcgis.com/\n\n### Contact\nIf you are not a part of Esri, but are interested in contributing, please contact me.\n- Aaron Putterman\n- aputterman@esri.com\n- https://www.linkedin.com/in/aaron-putterman/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabp6318%2Fcalcite-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabp6318%2Fcalcite-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabp6318%2Fcalcite-snippets/lists"}