Build Pipelines and Validation in CodeMix

CodeMix utilizes build pipelines, defined via CodeMix augmented tasks, to produce a single authoritative build of your project. With build pipelines, you can utilize external tools for building and validation, and see the results directly in your editor. By using the same tools you would normally use to build your application for deployment, you are guaranteed to have a consistent development experience in the IDE.

CodeMix simplifies build pipelines by automatically creating a template tasks.json file for Angular and TypeScript projects. For other types of projects you can manually modify the tasks.json file to include build pipeline support.

The CodeMix plugin is compatible with Eclipse-based IDEs and tools—like MyEclipse, Spring Tools Suite, and JBoss Tools—so you can continue working in the environment you are accustomed to.

Validation

CodeMix supports two validation modes: in-editor validation and project validation.

In-Editor Validation

In-editor validation is in effect for all files that are open in CodeMix editors. This validation is backed by validation logic that is provided by VS Code or installed Code extensions. The validation is typically instantaneous, errors appear or disappear in the editor as you type, without having to save the file. In many cases, dependent files that are open are instantaneously validated as well.


In-editor validation example

Project Validation

Project validation updates error and warning markers in your files. These markers appear in the explorer views, as well as the Projects and Markers views. Project validation affects files in the project that are not open in editors. For files open in editors, in-editor validation remains in effect. 

Project validation is enabled by default, but this setting can be changed on the Properties>CodeMix>Linting & Validation page for the project. 


Validation and Build properties

There are multiple modes in which project level validation can be enabled. Select the best mode for your needs:

  • Click the Build icon to start watching (recommended)
    Click the build icon  on the editor toolbar to start monitoring the project— the build icon changes to a watch icon  to indicate that the project is currently being watched. Click the watch icon  to stop watching the project. In this mode, validation is automatically triggered when you save source files being edited.This is the default option, and is the best option for ongoing development. 
  • Always watch for changes when this IDE is running
    This mode is similar to the above mode, but you do not need to click the build icon to initiate watching—your project is watched as long as the IDE is running. The watch icon  in the editor indicates the current watch status. To stop watching the project, change the setting on the Validation and Build property page. This mode is ideal for projects in continual development, including those receiving changes from outside the IDE. Use caution when selecting this option for multiple projects, as more memory is consumed for each watched project. 
  • Click the Build icon to start a one-time build
    In this mode, CodeMix does not watch the project for changes made to files. For a full project build, click the in-editor build icon . Changes made after the build do not update the marker state unless you explicitly initiate the build again. This mode minimizes resources used by the IDE and is ideal for projects that are only periodically in development, or with few modern web changes.
  • Disable build icon; trigger with Project > Build Now with CodeMix
    This mode is the same as the above, but no icon is shown in the editor. To initiate a build, select Project>Build Now with CodeMix.
For a description of the icons that appear in the editor toolbar, refer to the Editor Icons table.

Tasks and Build Pipelines

CodeMix utilizes build pipelines, defined via CodeMix augmented tasks, to produce a single authoritative build of your project. With build pipelines, you can utilize external tools for building and validation, and see the results directly in your editor. By using the same tools you would normally use to build your application for deployment, you are guaranteed to have a consistent development experience in the IDE.

Build Pipelines for Angular and TypeScript Projects

For Angular and TypeScript projects, CodeMix simplifies build pipelines by automatically creating a template tasks.json file when creating a new project, importing an existing project, or upgrading from an earlier version of Webclipse or Angular IDE. If you need to create a tasks.json file,  open any file in the project with a CodeMix editor, click the drop-down arrow on the build icon , and select Add tasks.json for Angular CLI/TypeScript.

  

Advanced tip: The tasks.json file is located at <project_root>/.vscode. If your project already had a tasks.json file before it was accessed with CodeMix 2.0 or later, CodeMix will not automatically add build pipeline integration. You can add the integration manually, or delete your tasks.json file and have CodeMix recreate it as described above.

Build Pipelines for Other Projects

At this time, CodeMix does not have automatic build pipeline integration for other types of projects, but you can manually modify the tasks.json file to use build pipeline support. 

Enabling Build Pipelines

If your tasks in the tasks.json file are configured to work with CodeMix build pipelines, you will have a Use detected tasks from tasks.json checkbox on the project’s CodeMix>Linting & Validation property page. Leave this checkbox selected to ensure that your external tasks are used for building and project validation.

If you clear the checkbox, if you don’t have an augmented tasks.json, or if you don’t have a tasks.json file, CodeMix validates your project with internally available tooling.

Building and Validating

CodeMix has a number of different validation modes. These modes work in exactly the same way when external build tasks are enabled, except the external tasks in tasks.json are executed instead of using internal validation logic.

Based on your validation preferences, a build task or a watch task is executed automatically by the IDE and problem matchers that are configured as part of the task definition are used to parse the output. Issues reported in the output are marked in the IDE, against the corresponding files at the right line numbers—you no longer need to scan the output in detail and manually match errors reported with resources in your workspace.

Editor Icons

If project validation is enabled, the following icons will appear in the top right of your editor window.

Generic Validation

External Tasks EnabledDescription
  Task definitions being validated
  Project needs to be built
  Project being watched
  Build in progress
  No files changed impacting validation since last build
  Cannot be built until prerequisites met
  Cannot be watched until prerequisites met

Augmenting Tasks for Build Pipeline Integration

Sample tasks.json

Observe the properties under the codemix node:

  • The lifecycle property can have one of three values: build, watch, and for Angular projects, serve. The value of this property determines whether the task is run during a watch, one-time build, or serve request, from the IDE.
  • validatedExtensions is a list of extensions that specifies file types that trigger build/watch when saved, and to which markers are added from issues identified by the external tasks.
  • readyChecks ensures the specified condition is met before launching any watch or build tasks.

The lifecycle property determines how CodeMix integrates a task with the build pipeline. There is additional intelligence that automatically integrates certain TypeScript or shell tasks into the build pipeline even without the lifecycle property, but we recommend adding this value for clarity.

For more detail, refer to Tasks in CodeMix with tasks.json.