Once you are starting to write your code in a HTML comment section, it is also difficult to see the typos you make or incorrect use of methods. That is why I took the time to see if there is not a better way to do this.
How can you get intellisense and syntax highlighting inside your templates?
Now the question is, where are you going to write that function?
The function needs to be created in the script section of the HTML display template. As an example I will rewrite the default two lines display template.
Note: there can only be one script section in your HTML display template.
The trick to access that function can be done with the same technique SharePoint uses for calling the generated display template functions. Every display template registers its function on the page, and can then be called by another template of web part. The function that is used for this is Srch.U.registerRenderTemplateByName(“name-to-call-the-function”, function).
So you need to add a function call in the script section:
Note: the name to call your function can best be written in lower case because it gets converted afterwards.
Now that the function is registered, it knows the exact location and can be called within the comment section like this:
The only thing which is necessary in the last code block is the function call. It is not necessary to define the variables, it can be done in the HTML template, but it just makes your code a bit cleaner.
Now all the code can be written in the script section, and there you have your intellisense and syntax highlighting.
Let me know what you think about this solution, and if it can speed up your work.
The example item display template can be found on the following location: display template with intellisense.