Esri / arcgis-js-vscode-snippets

Collection of Visual Studio Code snippets for common code patterns in the ArcGIS Maps SDK for JavaScript.
https://marketplace.visualstudio.com/items?itemName=Esri.arcgis-maps-sdk-js-snippets
Apache License 2.0
25 stars 8 forks source link

Snippet "prefix" convetions #10

Closed hhkaos closed 11 months ago

hhkaos commented 3 years ago

I see there are many acronyms sms, sls, sfs, ... I think it would be also nice to add the extended version for developers not so familiar with our acronyms, something like SimpleMarkerSymbol (sms):

{
"SimpleMarkerSymbol": {
    "body": [
      "{",
      "\ttype: \"simple-marker\",",
      "\tcolor: [255, 255, 255, 0.25],",
      "\tsize: 12,",
      "\tstyle: \"${1|circle,square,cross,x,diamond,triangle,path|}\",",
      "\toutline: {",
      "\t\twidth: 1,",
      "\t\tcolor: [255, 255, 255, 1]",
      "\t}",
      "}"
    ],
    "description": "Create a SimpleMarkerSymbol",
    "prefix": "SimpleMarkerSymbol (sms)"
  },

This way it still matches with sms, but also with sym, marke, ...:

Screenshot 2021-06-16 at 17 40 33 Screenshot 2021-06-16 at 17 40 42 Screenshot 2021-06-16 at 17 41 07

Update: This has been added to the description I would also add in the name, the path to classes. Instead of just SimpleMarkerSymbol use symbols/SimpleMarkerSymbol: ...

Does any of these ideas make sense to you? 😄

kellyhutchins commented 3 years ago

I understand the bit about changing the prefix to be the full name - that makes sense. But I don't understand the part about adding the path (symbols/SimpleMarkerSymbol)?

hhkaos commented 3 years ago

Update: This has been added to the description Yes, maybe SimpleMarkerSymbols wasn't the best example. I was thinking of snippets like map, webmap, webscene, labeling2d and labeling3d, which return a snippet with a new ClassName:

"CreateWebMap": {
    "body": [
      "var webmap = new WebMap({",
      "\tportalItem: {",
      "\t\tid: \"${1:webmap_id}\"",
      "\t}",
      "});",
      "var view = new MapView({",
      "\tcontainer: \"${2:viewDiv}\",",
      "\tmap: webmap",
      "});"
    ],
    "description": "Create web map and a map view",
    "prefix": "webmap"
  },

On snippets like this, you might need to add an element to the require function to load the class. So in order to save the developer to go to the developer site and search for the path to that class, I was thinking that it might be useful to it somewhere in VS Code. It might be also in the description.

 require(["esri/views/MapView", function(MapView) {     ​

     ​// Instantiate MapView
     ​const view = new MapView({
         ​container: "viewDiv",
         ​map: {
            ​basemap: "topo"
         ​}
     ​});

});

After using the snippet you will also have to add the dependency to therequire:

 require(["esri/views/MapView", "esri/WebMap"], function(MapView, WebMap) {     

     ​// Instantiate WebMap
     ​var webmap = new WebMap({
     ​    portalItem: {
     ​      id: "webmap_id"
     ​    }
     ​});

     ​// Instantiate MapView
     ​const view = new MapView({
         ​container: "viewDiv",
         map: webmap
     ​});

});

Does it make sense to add a suffix to every ArcGIS-related snippet is clearly different from all the other autocompletion

kellyhutchins commented 3 years ago

@hhkaos ok now I see what you mean. Yes I think it might be good to include the path. I'll look into adding it for the existing snippets and play around with it for a day and see how it feels to use the snippets.

kellyhutchins commented 3 years ago

I looked at adding the path but I'm not sure yet where the best spot to add it would be. I did some testing but want to do some more research to see if I can find some best practices info. I did update the prefix to use the longer names.

hhkaos commented 3 years ago

Hi Kelly, thanks for the update!.

I have been thinking about this, and maybe it is enough just to add the path to the module in the description. What do you think about that?

While doing the cheatsheet & snippets builder I realized that having a "Checklist" with all the conventions would be awesome. I have seen quite a bit of heterogeneity in the way snippets are written/named/described, so I think it would be very helpful in order to make this repo grow properly. Does it make sense?

If you think it does, I would open an issue for each field (body conventions, name conventions ...) to brainstorm and discuss the best way to define each one, and have a place refer in the contributing white but also to revisit for enhancements if needed in the future.

I would maybe rename this one to ~Enhance some prefixes~ > prefix conventions

RalucaNicola commented 3 years ago

So I guess with the convention that in JavaScript we use autocasting as much as possible, then the problem of importing is not so dramatic. And in TypeScript you can easily use autoimports...

But I see what you mean, I always have to go to the doc to figure out where that LabelClass is placed :D And I think you said you'd like to add class imports for JavaScript as well, so then people will really have to make a lot of imports.