ENV Variables in request highlighting

[NicOfNoomers]

Is your feature request related to a problem? Please describe.
Trying to use environment variables is pretty difficult, and we never know if a variable is successfully attached to the request

Describe the solution you'd like
If there was some kind of checking with underline or changing text color it would be much easier to identify wrong env. variables

Describe alternatives you've considered
Insomnia Rest does smth like this, as shown in the screenshot

Additional context
Attached Screenshots

[sukheja-varun]

I totally agree, in Insomnia it hardly took any time to figure out how env variables work but in postwoman, it is a bit difficult.
I have created an env with few variables but still not able to figure out how to make any env active.

[liyasthomas]

Got it. Since envs are used inline inside an input box (URL field), it's quite hard to list / highlight registered envs from input. I tried to parse URL input with some regex to show registered envs in a tooltip but had no luck with it. Will try another method. Let me know if there's any UI wise implementation that could tackle this. May be like auto-complete for envs?

[gordolio]

Auto-complete is a start, but a custom component that allows you to choose more than just environment variables would be better, I think. Here is an example from the program "Paw".

It auto-completes known environment variables and places them as a "badge".

Here's an example of it grabbing the a jwt token from a login response using a jq filter.

I know how I'd create something like this in React. I'd have a special input component that would have a dual renderer. One function would render how it should appear in the user-interface. The second render function would render how it should be used in a request. The underlying storable data would be an array of different types of blocks (RawStringBlock, EnvironmentVariableBlock, ResponseParsedBodyBlock, etc...). Then when you click the badge you'd have a popover for changing that particular block.

I think it could be done in a similar way in vue.

[liyasthomas]

That's great input. Visually, this is something I'd in mind. Let me dig deep into this approach. Will ping you in need of any help ;)

[AndrewBastin]

Umm, I am actually working on the implementation of this. Along with a overhaul of the URL parsing system. Just that all new feature work is paused for a while to work on tests and improving the stability and reliability until the Teams feature has rolled out.

[AndrewBastin]

Update: Environment variable highlighting is now implemented in the URL field as an Experiment. You can enable the experiment in the settings page. It is not stable yet, but it is on track to be stable soon.

Closing this issue meanwhile.

[yoerriwalstra]

I feel a bit dumb for having to ask this, but what is the syntax for using environment variables in your URLs?

I have an environment with variable base_url in it, but I can't get my requests to work with it... I couldn't find any examples showcasing this feature, so I had to guess how it should work. I read the discussion in #147 which suggested that Hoppscotch would, like Postman, support nunchucks syntax for environment variables. I've tried different variations, but without success.

Example:

GET {{ environment.base_url }}/companies
GET {{ variables.base_url }}/companies
GET {{ base_url }}/companies

[liyasthomas]

@yoerriwalstra

Ex: <<variable_name>>

Use environment variables enclosed in double angular brackets (<<>>) anywhere in request section.

[yoerriwalstra]

Thanks for the quick reply! And the awesome work you guys are doing :D