+Please ensure that you have completed the following steps before making a PR: + +1. Update the corresponding file in the [snippets folder](./snippets). Depending on the type of snippet, you need to will have to modify: `html.json`, `javascript.json`, `json.json`, `typescript.json`, ... + 1. Make sure your snippet meets [our conventions]((#conventions)). + 2. Make sure snippets are sorted in the alphabetical order, by `name`). Use any [JSON ABC](https://novicelab.org/jsonabc/) **checking "Spare plain Arrays"**. + 3. Validate JSON and indentation with [JSONLint](https://jsonlint.com/). +2. Update the snippets table within the [README.md](./README.md) to reflect the changes. +3. Update the [CHANGELOG.md](./CHANGELOG.md) file to reflect the changes. +4. Commit your changes. + +## Commit message format + +This project do not strictly follows [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/), but we will use the format `
+
* Avoid acronyms (like `sms` for `SimpleMarkerSymbol`)
-* Use camelcase (not [snake_case](https://en.wikipedia.org/wiki/Snake_case), UPPERCASE, etc.)
+* Use camelCase (not [snake_case](https://en.wikipedia.org/wiki/Snake_case), UPPERCASE, etc.)
* Per snippet type:
* **Class properties objects**: add the suffix "Props".
* **Class constructors**: match JS SDK capitalization.
+> **⚠️ Important**: when changing an exist prefix, or backwards compatibility, if the new prefix is totally different, instead of removing the previous prefix, add a new one (`prefix` support `strings` and `arrays`), but new one as the first element in the array.
+
+**Examples**:
+* Class constructors: `SimpleMarkerSymbol`, `MapView`, ...
+* Class properties objects: `popupTemplateProps`, `featureReductionClusterProps`...
+* Common procedures an enumerations: `basemapsWithAPIKeys`, `findLayerByTitle`, ...
+
> If you want to suggest a change, please [check the issue #10](https://github.com/Esri/arcgis-js-vscode-snippets/issues/10).
### `name`
+Name is the short description that follows the prefix:
+
+
+
* Start your sentence with capitals (do not capitalize, uppercase)
* Use plain english using spaces as needed (don't use [camelCase](https://en.wikipedia.org/wiki/Camel_case), [snake_case](https://en.wikipedia.org/wiki/Snake_case), [PascalCase](https://www.freecodecamp.org/news/snake-case-vs-camel-case-vs-pascal-case-vs-kebab-case-whats-the-difference/#pascal-case), or [kebab-case](https://en.wikipedia.org/wiki/Letter_case#Kebab_case)).
-* Keep the name short as possible (< 35 characters) to avoid ellipsis ("...").
+* Keep the name short as possible to avoid ellipsis ("..."). Ideally it should be less than 35 characters, but it also depends on the prefix(es) length, so try and adjust it.
+
+**Examples**:
+* `City scale 3D callout`
+* `Create class breaks renderer`
+* `Create 3D extruded polygon symbol`
+* `Generate icon Point 3D`
> If you want to suggest a change, please [check the issue #20](https://github.com/Esri/arcgis-js-vscode-snippets/issues/20).
### `description`
+Description is a long description that precedes the body:
+
+
+
* It should be a proper description of what the snippet does, and reuse text from the API reference whenever possible.
-* If it is a snippet related to a class/module include the AMD and ESM paths. For example: `Convert a geometry from Web Mercator units (wkid: 3857) to geographic units (wkid: 4326). AMD path: esri/geometry/support/webMercatorUtils | ESM path: @arcgis/core/geometry/support/webMercatorUtils.js`
+* For "Initialization of classes" snippets finish with: `AMD path: 
+
> If you want to suggest a change, please [check the issue #19](https://github.com/Esri/arcgis-js-vscode-snippets/issues/19).
#### 1) Use `\t` for tabs (do not use spaces)
+> **Note:** You don't have to worry about this if you use the [Snippets Builder](https://esri.github.io/arcgis-js-vscode-snippets/builder/).
+
**Example:**
```js
@@ -105,7 +316,24 @@ Consider using the [snippet builder](https://esri.github.io/arcgis-js-vscode-sni
}
```
-#### 2) Don't add comments in your snippets
+#### 2) Style guide conventions
+
+Follow the ArcGIS Maps SDK for JavaScript coding conventions define in [github.com/esri/jsapi-resources/.prettierrc.json](https://github.com/Esri/jsapi-resources/blob/main/.prettierrc.json):
+
+* **Plain JavaScript**:
+ * Print semicolons at the ends of statements.
+ * Always require parentheses around arrow function arguments ([example](https://eslint.org/docs/latest/rules/arrow-parens)).
+ * Print spaces between brackets in object literals: true ([example](https://prettier.io/docs/en/options.html)).
+ * If at least one property in an object requires quotes, quote all properties.
+ * No [trailing commas](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas) (final commas)
+ * Line length: 120
+* **JavaScript React** (JSX):
+ * Put the \> of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements) ([example](https://prettier.io/docs/en/options.html#deprecated-jsx-brackets)).
+ * Line length: 100
+
+We have set [this prettier.io/playground](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEIA0IIAcYEtoDOyoAhgE5kQDuACuQkSiQDZUkCeRGARmSWAGs4MAMokAtnAAyuKHGQAzFgTg8+g4SKz9ZAc2QwyAV1UgV43AeOmCe5nACKRiPEXLTAKwIAPEXcfOrkhKzCoYAI6BcDSUWIzghLgE8IgYhiS4zHoAwhDi4iTIIFDQ8hi2ULr2AIIwhrjcRvA0cGQycm6hpgAWMOLMAOrduPAE2mBwIgwjuABuI+xFYARcILMmAJJQACYIomBkuDjVOyIw7PadYSBYlCoDfFhFt3AqZLNlILJvMDEkugUrqZtGQ3kVuCRuHBmOgbodYANcNsYN1kABGABMAAYMGQ4JFcHi-gDCsF3GlIYjkaikBiMEYVAAVSGMELXODiKHbXbbKQkSpGf5wABiEDIBTqeiKJCaEBAAF95UA) to help you beautify your code.
+
+#### 3) Don't add comments in your snippets
**Example:**
@@ -116,7 +344,7 @@ myLayer.queryFeatures().then(results => {
})
```
-#### 3) Keep snippets small
+#### 4) Keep snippets small
Try not to instantiate more than one class whenever possible. Keeping snippets small helps make them more reusable. So instead of doing this:
@@ -152,9 +380,10 @@ new MapView({
});
```
-#### 4) Conventions for constructor properties
+#### 5) Conventions for constructor properties
* Sort properties by alphabetical order.
+ * For "JS objects with constructor properties" `type` is an exception. It can be set as the first one.
* Include what you think are the most common properties.
* If a property expects another instance of class, add the name of the snippet (if it exists).
* When a property support multiple value types, add just a placeholder.
@@ -173,7 +402,7 @@ new PopupTemplate({
Observe the [PopupTemplate property "content"](https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html#content) include a list of possible values, and `popupContent` will trigger other snippets like:
`popupCustomContent`, `popupMediaContent`, `popupFieldsContent`, `popupTextContent` and `popupAttachmentsContent`.
-#### 5) After a class initialization, don't assign it to a variable
+#### 6) After a class initialization, don't assign it to a variable
Avoid doing this:
@@ -195,7 +424,7 @@ new WebMap({
})
```
-#### 6) For inherited methods, try to make generic snippets.
+#### 7) For inherited methods, try to make generic snippets
For methods like [fromJSON()](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-Renderer.html#methods-summary), which is inherited in many classes, for example: SimpleRenderer, UniqueValueRenderer, HeatmapRenderer, ... do something like this:
@@ -203,40 +432,16 @@ For methods like [fromJSON()](https://developers.arcgis.com/javascript/latest/ap
${1|Simple,UniqueValue,ClassBreaks,Dictionary,DotDensity,Heatmap|}Renderer.fromJSON(json)
```
-## Commit message format
-
-This project do not strictly follows [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/), but we will use the format `+To avoid conflicts and overwrites, we do not recommend editing the local installation of your extension placed in your home folder (`~/.vscode/extensions/esri.arcgis-maps-sdk-js-snippets-VERSION_NO`). -1. Update the file in the [snippets folder](./snippets) (respects the alphabetical order). -2. Add the info to the [snippets table](./README.md). -3. Submit your PR. - * [Link your PR to an issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue) if it exists. Use a supported keyword in the pull request description. Ex."`Closes #10`" or "`Fixes Esri/arcgis-js-vscode-snippets#10`". ## Additional resources diff --git a/README.md b/README.md index 232a6e3..3e31861 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Visual Studio Code extension that contains a collection of snippets for common c To use this extension you will need to install: 1. [Visual Studio Code](https://code.visualstudio.com/download) (version 1.35 or higher). 2. The extension. There are two possibilities: - - From the [Visual Studio Code marketplace](https://marketplace.visualstudio.com/items?itemName=Esri.arcgis-jsapi-snippets). + - From the [Visual Studio Code marketplace](https://marketplace.visualstudio.com/items?itemName=Esri.arcgis-maps-sdk-js-snippets). - Using the ***[Install from VSIX](https://code.visualstudio.com/docs/editor/extension-marketplace#_install-from-a-vsix)*** command in Visual Studio Code then import the [arcgis-jsapi-snippets-1.0.0.vsix](./arcgis-jsapi-snippets-1.0.0.vsix) file. ### Usage @@ -39,12 +39,15 @@ To use this extension you will need to install: After installing, there are two ways to use it: **Option 1**) Using [built-in VS Code Intellisense](https://code.visualstudio.com/docs/languages/javascript#_intellisense): -1. Start typing the prefix for the code snippet. -2. Select the snippet by pressing `Tab` or `Enter` key. +1. Create an empty project with an empty `index.js` file. +2. Start typing one the prefix of one the [available code snippets](#snippets-available). (e.g. `elev`). +3. Select the snippet by pressing `Tab` or `Enter` key. +4. If there are values highlighted in gray, you can move between them using `Tab` (forward) and `Shift+Tab` (backwards).
-> **Notes:**
+> **Troubleshooting:**+> If the Intellisense doesn't work: > - Make sure to have `"editor.tabCompletion": "on"` in the settings (`Preferences` > `Open Settings(JSON)`) > - If pressing Tab doesn't work then you might have several snippets with the same prefix. Press `Ctrl-Space` (`Cmd-Space` on mac) to select the one you need. > @@ -58,12 +61,6 @@ This extension adds a new option to the activity bar that lets you quickly brows
-### Configuration
-
-If you want to create you own custom snippets you can do so. Read [about User defined snippets in Visual Studio official documentation](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets).
-
-If you do so, please consider [contributing to this repository](#contributing) or join [other developers sharing their snippets](#community-snippets).
-
## Snippets available
### [HTML snippets](snippets/html.json)
@@ -77,38 +74,39 @@ If you do so, please consider [contributing to this repository](#contributing) o
| Prefix | Description |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| require | Load the Map and MapView modules using require |
-| map | Create a map and view. Contains placeholders for the basemap, container, zoom and center |
-| scene | Create a scene and view. Contains placeholders to replace the basemap and the container value. |
-| webmap | Create a map from a WebMap. Contains a placeholder for the portal item id and for the container. |
-| webscene | Create a 3D map from a WebScene. Contains a placeholder for the portal item id and for the container. |
+| require | Load the Map and MapView modules using require
+| requireApiKeys | Load the config, Map and MapView modules using require require |
+| MapViewMap | Create 2D MapView using a Map |
+| SceneViewMap | Create 3D SceneView using a Map. |
+| MapViewWebMap | Create 2D map using a WebMap and a portalItem. |
+| SceneViewWebScene | Create 3D map using a WebScene and a portalItem.. |
| addLayerFromPortalItem | Add a new layer to the map using a portal item id. Contains a placeholder for the portal item id. |
-| simpleRenderer | Generate a simple renderer. Contains a placeholder for the symbol. |
-| uniqueValueRenderer | Generate a unique value renderer. Contains a placeholder for the field, the symbol and it generates a uniqueValueInfos array with placeholers for value, symbol and label for the legend. |
-| classBreaksRenderer | Generate a class breaks renderer. Contains a placeholder for the field, the default symbol and it generates a classBreakInfos array with placeholers for minValue, maxValue, symbol and label for the legend. |
-| sizeVar | Creates a SizeVariable with 2 size stops. The axis property is only used in 3D. It contains placeholders for field, normalizationField, the legend title and the size stop values. |
-| colorVar | Creates a ColorVariable with 2 color stops. It contains placeholders for field, normalizationField, the legend title and the color stop values. |
-| clusterConfig | Generates the configuration for clustering in a MapView. This should be set on layers containing point geometry. |
-| labeling2d | Creates the labelingInfo for labels in a MapView. |
-| labeling3d | Creates the labelingInfo for labels in a SceneView. |
-| simpleMarkerSymbol | Creates a SimpleMarkerSymbol in a MapView. Contains placeholder for style. |
-| pictureMarkerSymbol | Creates a PictureMarkerSymbol in a MapView. |
-| simpleLineSymbol | Creates a SimpleLineSymbol in a MapView. Contains placeholder for style, cap and join. |
-| simpleFillSymbol | Creates a SimpleFillSymbol in a MapView. Contains placeholder for style. |
-| pictureFillSymbol | Creates a PictureFillSymbol in a MapView. |
-| icon | Creates a PointSymbol3D with IconSymbol3DLayer in a SceneView. Contains placeholders for primitive, color and size.. |
-| line | Creates a LineSymbol3D with a LineSymbol3DLayer in a SceneView. Contains placeholders for color and size. |
-| path | Creates a LineSymbol3D with a PathSymbol3DLayer in a SceneView. Contains placeholders for profile, color, width, height, join, cap, anchor and profileRotation. |
-| fill | Creates a PolygonSymbol3D with a FillSymbol3DLayer in a SceneView. Contains placeholders for style, material color and outline color. |
-| water | Creates a PolygonSymbol3D with a WaterSymbol3DLayer in a SceneView. Contains placeholder for waterbodySize and waveStrength. |
-| extrude | Creates a PolygonSymbol3D with an ExtrudeSymbol3DLayer in a SceneView. Contains placeholders for material color and size. |
-| mesh | Creates a MeshSymbol3D with a FillSymbol3DLayer in a SceneView. Contains placeholder for color. |
-| edges | Creates an edges object that can be applied to a FillSymbol3DLayer. Contains placeholders for the type of edges (solid or sketch), the color, the size and the extensionLength. |
-| calloutSmall | Generates the verticalOffset for a city scale level and the callout property. They should be set on PointSymbol3D or LabelSymbol3D. Contains placeholders for size, color and border color. |
-| calloutLarge | Generates the verticalOffset for a globe scale level and the callout property. They should be set on PointSymbol3D or LabelSymbol3D. Contains placeholders for size, color and border color. |
-| elevationInfo | Creates an object for elevationInfo to be set on layers. Contains placeholders for mode, offset, arcade driven expression and unit. |
-| background | Creates an environment object for changing the background of a scene. It should be set on a SceneView and it contains a placeholder for color. |
-| basemapStyle | List all basemap strings |
+| simpleRendererProps | Renders all features in a Layer with one Symbol. This snippet is usually used to set the property \"renderer\" of a FeatureLayer, SceneLayer, MapImageLayer, CSVLayer, GeoJSONLayer, OGCFeatureLayer, WFSLayer, or StreamLayer.. |
+| uniqueValueRendererProps | Generate a unique value renderer. This snippet is usually used to set the property \"renderer\" of a FeatureLayer, SceneLayer, MapImageLayer, CSVLayer, GeoJSONLayer, OGCFeatureLayer, WFSLayer, StreamLayer, ImageryLayer, or ImageryTileLayer |
+| classBreaksRendererProps | Generate a ClassBreaksRenderer. This snippet is usually used to set the property \"renderer\" of a FeatureLayer, SceneLayer, MapImageLayer, CSVLayer, GeoJSONLayer, OGCFeatureLayer, WFSLayer, StreamLayer, ImageryLayer, or ImageryTileLayer. |
+| sizeVisualVariableProps | Set size of features based on a numeric value. Creates a SizeVariable with 2 size stops. The axis property is only used in 3D. This snippet is usually used to set the property \"visualVariables[]\" of a renderer. |
+| colorVarProps | Generate a ColorVariable with 2 color stops. Used to visualize features along a continuous color ramp based on the values of a numeric attribute field or an expression. This snippet is usually used to set the property \"visualVariables[]\" of a renderer class. |
+| featureReductionClusterProps | Generates the configuration for clustering in a MapView. This should be set on layers containing point geometry. This snippet is usually used to set the property \"featureReduction\" of a FeatureLayer, CSVLayer, GeoJSONLayer, WFSLayer, or OGCFeatureLayer geometry. |
+| LabelClass2D | Creates the labelingInfo for labels in a layer for 2D maps. It in normally used in the property \"labelingInfo[]\" of a FeatureLayer, CSVLayer, GeoJSONLayer, StreamLayer, OGCFeatureLayer, or WFSLayer in 2D MapViews. |
+| LabelClass3D | Creates the labelingInfo for labels in a layer for 3D maps. It is normally used in the property \"labelingInfo[]\" of a FeatureLayer, SceneLayer or any layyer with that property within a SceneView. |
+| simpleMarkerSymbolProps | Create a SimpleMarkerSymbol for rendering 2D Point geometries with a simple shape and color in either a MapView or a SceneView, but for 3D it is recommended to use PointSymbol3D. This snippet is usually used to set the property \"symbol\" of renderers or individual graphics.. |
+| pictureMarkerSymbolProps | Create a PictureMarkerSymbol, allowing custom image-based markers for points on maps. |
+| simpleLineSymbolProps | Create a SimpleLineSymbol for rendering 2D polyline geometries in a 2D or 3D view, but for 3D it is recommended to use LineSymbol3D. It can be used in several properties like \"symbol\" of renderers or individual graphics, but also \"outline\" of marker and fill symbols. |
+| simpleFillSymbolProps | Create a SimpleFillSymbol for rendering 2D polygon geometries in a 2D or 3D view, but for 3D it is recommended to use PolygonSymbol3D. It can be filled with a solid color, or a pattern. This snippet is usually used to set the property \"symbol\" of renderers or individual graphics.. |
+| pictureFillSymbolProps | CPictureFillSymbol uses an image in a repeating pattern to symbolize polygon features in a 2D MapView. patterns for polygons. This snippet is usually used to set the property \"symbol\" of renderers or individual graphics. |
+| pointSymbol3dIconProps | Generate PointSymbol3D with a IconSymbol3DLayer in a SceneView. Available shapes: circle, square, cross, x, kite, and triangle. This snippet is usually used to set the property \"symbol\" of renderers or individual graphics. |
+| lineSymbol3DProps | Generate LineSymbol3D with a LineSymbol3DLayer in a SceneView. This snippet is usually used to set the property \"symbol\" of renderers or individual graphics. |
+| lineSymbol3DPathProps | Generate LineSymbol3D with a PathSymbol3DLayer. Renders Polyline geometries by extruding a 2D profile along the line. This snippet is usually used to set the property \"symbol\" of renderers or individual graphics. |
+| meshSymbol3DProps | Generate MeshSymbol3D with a FillSymbol3DLayer in a SceneLayer in a SceneView. This snippet is usually used to set the property \"symbol\" of renderers or individual graphics. |
+| waterSymbol3dLayerProps | WaterSymbol3DLayer is used to render Polygon geometries as realistic, animated water surfaces, therefore it can only be used inside a PolygonSymbol3D. This snippet is usually used to set the property \"symbol\" of renderers or individual graphics. |
+| polygonSymbol3DExtrudeProps | Generate PolygonSymbol3D with a ExtrudeSymbol3DLayer to be used in a SceneView. It render polygon geometries by extruding them upward from the ground, creating a 3D volumetric object. This snippet is usually used to set the property \"symbol\" of renderers or individual graphics. | |
+| edges3DProps | Add edge rendering visualization to existing symbols. Can only be applied to \"edges\" property of FillSymbol3DLayer on MeshSymbol3D or ExtrudeSymbol3DLayer on PolygonSymbol3D. |
+| callout3DSmallProps | Generates a Callout3D with a verticalOffset for a city scale level and the callout property. They should be set on the property \"callout\" of PointSymbol3D or LabelSymbol3D. |
+| callout3DLargeProps | Generates a Callout3D with a verticalOffset for a world scale level and the callout property. They should be set on the property \"callout\" of PointSymbol3D or LabelSymbol3D. |
+| elevationInfoProps | Specifies how features are placed on the vertical axis (z). This snippets should be used to set the property \"elevationInfo\" of a FeatureLayer, CSVLayer, WFSLayer, SceneLayer, StreamLayer, GeoJSONLayer, IntegratedMeshLayer, etc. |
+| sceneViewEnvironmentProps | Creates an environment object for changing the background of a scene. This snippet is usually used to set the property \"environment\" of the SceneView. |
+| basemapsWithAPIKeys | List all available map styles to be used without API keys. Use of these basemaps requires an ArcGIS Developer subscription or a valid ArcGIS Online organizational subscription |
+| basemapsWithoutAPIKeys | List all available map styles to be used without API keys. Use of these basemaps requires an ArcGIS Developer subscription or a valid ArcGIS Online organizational subscription |
### [TypeScript snippets](snippets/typescript.json)
@@ -172,14 +170,18 @@ If you do so, please consider [contributing to this repository](#contributing) o
## Issues
-If something isn't working the way you expected, please take a look at [previously logged issues](https://github.com/Esri/arcgis-js-vscode-snippets/issues/) first. Have you found a new bug? Want to request a new feature? [Open a new issue](https://github.com/Esri/arcgis-js-vscode-snippets/issues/), we'd love to hear from you.
-
-If you're looking for help you can also post issues on Stack Overflow with the "[**esri-oss**](https://stackoverflow.com/questions/tagged/esri-oss)" tag.
+If something isn't working the way you expected, please take a look at [previously logged issues](https://github.com/Esri/arcgis-js-vscode-snippets/issues/) first. Have you found a new bug? Want to request an enhancement to an existing snippet? Suggest a new snippet or tool? [Open a new issue](https://github.com/Esri/arcgis-js-vscode-snippets/issues/new/choose), we'd love to hear from you.
## Contributing
Esri welcomes contributions from anyone and everyone. Please see our [guidelines for contributing](./CONTRIBUTING.md).
+### Additional resources
+
+To learn more about **general use of code snippets in Visual Studio Code** read [Visual Studio official documentation](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets).
+
+If you create your own custom code snippets to work with the ArcGIS Maps SDK for JavaScript, please consider [contributing to this repository](#contributing) or join [other developers sharing their snippets](#community-snippets).
+
## License
Copyright 2023 Esri
diff --git a/builder/index.html b/builder/index.html
index d7c7f2b..f152df4 100644
--- a/builder/index.html
+++ b/builder/index.html
@@ -40,7 +40,7 @@ Custom Snippet
Defines one or more trigger words that display the - snippet in IntelliSense. Substring matching is performed on - prefixes, so in this case, "fc" could match "for-const". + snippet in IntelliSense. Approximate string matching (fuzzy search) is performed on + prefixes, so in this case, "fl" could match "FeatureLayer".
- Recomendations
+ Recommendations
Good prefixes are short and easy to remember, so you can
include the name of the method, class or property. Avoid
- using just acronyms.
+ using just acronyms. E.g. MapView, basemapsWithAPIKeys, findLayerByTitle, popupTemplateProps.
Custom Snippet
- Recomendations
- To differentiate from other IntelliSense we recommend you to
- include (Esri JSAPI)
+ Recommendations
+ Use plain English, using spaces as needed (length <35 characters). E.g. "Find layer in a MapView by title"
Custom Snippet
IntelliSense.
- Recomendations
- Explain of what the snippet does, but keep it short.
+ Recommendations
+ Explain of what the snippet does. Reuse text from the API reference whenever possible. Add AMD and ESM paths if it is a class initialization (new ...)
Custom Snippet
>
- Recomendations
+ Recommendations
Use "Placeholders" (${1:foo}) and "Choices" (${1|value1,value2}) when possible.