Design code editor to create and test scripts
The data integration platform did not have a code editor so I conducted research with developers as well as analyzing existing code editors, particular VS Code to identify all use cases. We then pared down to the most critical ones.
Objectives
- Provide robust code editor in product to keep developers on task, rather than forcing them to use an external code editor.
- Raise awareness of vast array of templates and apps to get users integrating right away.
Challenges
- Developers are used to the robustness of editors like VS Code, so this editor needed to cover a lot of the use cases that were important to them.
Use cases that we implemented
From a huge list of use cases, we pared down to these use cases:
- Provide IntelliSense prompting to reduce errors and frustration. This would bring forward matching fields and descriptions based on what the user typed.
- Handle multiple JSON data formats (single record, array of records, or record batch)
- Automatically format code (auto-indenting, spacing)
- Automatically close tags and handlebar expressions
- Highlight paired parentheses, closing tags, handlebar expressions
- Linting. Shows formatting and code syntax issues.
- Provide built-in help panel for fields, functions, etc.
- Search within code, find and replace
- In-line error indicators with hover over for error messages
- Highlight paired parentheses, closing tags, handlebar expressions
- Code formatting
- Different layouts (vertical, horizontal)