VSCode has become the world’s most popular source-code editor of all time. This webinar will be demonstrating how you can use WSO2 Enterprise Integrator and VSCode together as the next generation integration tooling experience. The first half of this webinar specifically features the VSCode extension, how to install, and use it with WSO2 Enterprise Integrator. After that, we will discuss how you can effectively use the extension’s built-in support to drastically simplify your daily integration work. This deck covers: - How to get started with VSCode extension - How to create WSO2 ESB projects and artifacts - How to build the deployable .car file - How to use IntelliSense, goto definition, diagnostics for effective development. Watch the webinar on-demand here - https://wso2.com/library/webinars/2019/07/using-the-new-vscode-extension-for-wso2-enterprise-integrator/

1. Using the New VS Code Extension for
WSO2 Enterprise Integrator
Dakshika Jayathilaka and Sajinie Ranasinghe
WSO2 Integration Team
1

2. Agenda
• Introduction
• Install VS Code extension for WSO2 EI
• Useful features for effective development
• Demo
• Roadmap
2

3. Introduction

4. Why Visual Studio Code extension?
• It’s Free and Open source
• Fast and Powerful
• Cross platform
• Lightweight
Download and Install it from:
https://code.visualstudio.com/download

5. VS Code Extension for WSO2 EI Tooling
Pre-requisites
• JDK 8 or later
• Maven 3.3.0 or later
5

6. Installing WSO2 EI Tooling Extension
• Install from VS Code
– Click on “Extension” icon in the Activity bar
– Browse for “WSO2 Enterprise Integrator” and install it
• Install from Visual Studio Marketplace
– Browse for Visual Studio Marketplace
– Search for “WSO2 Enterprise Integrator” and install it
• Install manually
– Open Command Palette
– Type “Install from VSIX…”
– Select and locate VSIX file
After installing Reload VS Code!

7. Great Developing Experience
● Suggestions and
Auto-Completion
● Code snippets
● Goto definition
● Code diagnostics
● Hover over Synapse
elements
Others
● Auto-close tags
● Automatic node indentation
7

8. IntelliSense
Context-aware code completion
8

9. Code Diagnostics
Context-aware diagnostic errors
9

10. Goto Definition
10

11. Hover Over Support
11

12. Command Driven Approach
● To activate the extension
○ WSO2EI: Activate WSO2 EI Tooling
● To create a project
○ WSO2EI: Create New ESB Project
● To create artifacts
○ WSO2EI: Create New API
○ and more . . .
● To create a deployable archive
○ WSO2EI: Build Project
● Change Language mode to SynapseXML
○ WSO2EI: Change Language to SynapseXML
12

13. Demo

14. Roadmap for the Future
Step 2
Getting started guide with
sample templates
Step 1
Debugging support
for source view
Step 3
Integration test
framework
Step 4
& More

15. Your Contributions are Welcome!
Please raise your feature requests and issues in
https://github.com/wso2/ei-tooling-vscode

16. THANK YOU
wso2.com
THANK YOU
wso2.com