zilla-vscode-ext
Zilla extension helps you to configure Zilla Yaml files providing IntelliSense.
What is Zilla?
API Gateway for event-driven microservices
Read more in our docs
How to use?
Create zilla.yml or zilla.yaml file in any folder and press CTRL + space to see suggestions.
Features
- Yaml IntelliSense
- Zilla Diagram
Requirements
We use YAML Extension so if you don't have it installed VSCode will prompt you.
Known Issues
- The first level of many entities, such as
bindings, guards and vaults, requires that you give an arbitrary identifier so in these cases the suggestions are not going to help you.
- If you have
Spell C configured to throw errors in unknown words you can have problems rendering the diagram.
Development
Extension
If you want to send a Pull Request follow these steps to run and test locally:
- Fork and clone the repo locally
- Run
npm run setup
- Open VSCode in the
zilla-vscode-ext folder (make sure you are running latest VSCode)
- Start Debugging (you can press F5)
- A new window will pop-up, this is the
Extension Development Host mode for VSCode
- You can switch back to previous window to see logs
- In the
Extension Development Host the extension will be loaded for you
- If you don't have the YAML extension installed, VSCode will prompt you
- Now you can create
zilla.yml or zilla.yaml file in any folder and enjoy auto-completion of fields
Diagram App
We have a second app embedded in the extension to render the diagram.
When working with the diagram you have two options:
Run as a standalone app
You can run it as a standalone app in the browser, in this case it will render the diagram hard-coded in the DataProvider.tsx file in the yamlString variable.
Use the following command:
npm run start:webview
The benefit of this approach is that you will get Hot Module Replacement work so you can iterate quickly. And the down side is that you don't have the communication with the extension.
Run inside the extension
If you want to test the communication between the extension and the webview, you need to build the website first and then run the extension as usual.
To build the diagram app, use the following command:
npm run build:webview.
For this case, you need to manually re-build the webview and restart the extension after each change.
Enjoy!
