https://github.com/abp6318/calcite-snippets
(Unofficial) A small VSCode extension for assisting those develop using the Calcite Design System
https://github.com/abp6318/calcite-snippets
calcite calcite-components esri vscode vscode-extension web
Last synced: 27 days ago
JSON representation
(Unofficial) A small VSCode extension for assisting those develop using the Calcite Design System
- Host: GitHub
- URL: https://github.com/abp6318/calcite-snippets
- Owner: abp6318
- Created: 2023-10-21T22:29:02.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-03T19:04:30.000Z (over 2 years ago)
- Last Synced: 2023-11-04T17:41:02.288Z (over 2 years ago)
- Topics: calcite, calcite-components, esri, vscode, vscode-extension, web
- Language: JavaScript
- Homepage: https://github.com/Esri/calcite-design-system
- Size: 46.9 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Calcite Snippets (Unofficial)
### Calcite Design System
"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/).
This 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.
### Installation
#### Prerequisites
| Technology Name | Version | Description | Download
|-------------------|----------|---------------------------------------------------|-------------
| Node.js | Latest | Needed for building and running the extension. | https://nodejs.org/en/download
| VSCode | Latest | Platform the extension is used on! | https://code.visualstudio.com/download
| 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
#### Finding the Extension in the Store
The extension has not been published in the VSCode extension store yet.
#### Local Installation
See notes here: https://github.com/abp6318/calcite-snippets/blob/main/vsc-extension-quickstart.md#install-your-extension
### Adding New Snippets
#### Formatting the Snippet
- Name (string, required) = Name of Calcite component; capital case with spaces
- Prefix (string, required) = See formatting options below.
- `calcite-alert` = Component tags
- `calcite-alert_required-attributes` = Component with only required attributes
- `calcite-alert_default-attributes` = Component with all default and required attributes
- `calcite-alert_example` = Component example (can include sub-components)
- Description (string, required) = Description of Calcite component; sentence case
- Body (string, required) = Code block; add to snippet.html
#### Creating the Snippet
First, 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.
```
npm run snippify
```
#### Testing Your Changes
Testing 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`.
Open 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.
Press 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.
To 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).
### How To Use
- For testing your changes: https://github.com/abp6318/calcite-snippets/edit/main/README.md#testing-your-changes
- For finding the app in the store: (TBD upon publication)
Using 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.
### Resources
- Extensions
- Create your own: https://code.visualstudio.com/api/get-started/your-first-extension
- Snippets: https://code.visualstudio.com/docs/editor/userdefinedsnippets
- Publishing: https://code.visualstudio.com/api/working-with-extensions/publishing-extension
- Esri & Calcite
- Calcite Design System: https://developers.arcgis.com/calcite-design-system/
- Esri Home: https://www.esri.com/en-us/home
- ArcGIS Hub: https://hub.arcgis.com/
### Contact
If you are not a part of Esri, but are interested in contributing, please contact me.
- Aaron Putterman
- aputterman@esri.com
- https://www.linkedin.com/in/aaron-putterman/