Build Pipelines and Validation in CodeMix

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, and includes linting, if enabled. 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 and Build Pipelines

Project validation updates error and warning markers in your files. These markers appear in editors, explorer views, as well as the Problems and Markers views. Project validation affects files in the project that are not open in editors. If build pipelines are defined for the project, project validation will use these to validate the project, if not defined, internal CodeMix tech will be used.

Note: For files open in editors, in-editor validation remains in effect.

Build Pipelines

Build pipelines are defined via CodeMix augmented tasks, and can be used by CodeMix to produce a single authoritative build of your project. Pipelines allow you to 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.

Building and Validating Your Project

To validate your project, simply click the Validate button in the editor toolbar, or select Project > Build Now with CodeMix.

   
Validating your project

On clicking validate, if a build task is defined in your tasks.json file, you get the option to run this build task. In Angular, you can also choose to run ng lint on project.

Running build tasks defined in your tasks.json file

Errors and warnings reported by the task are parsed, and reported in the IDE in your editors and Problems/Markers view. In addition to running the build task, you also get the option to use CodeMix internal tech to validate all supported file types in the project.

Linting support for other frameworks and technologies will be added to future releases.

Watching Your Project

As opposed to build tasks which run and terminate, watch tasks continuously monitor your project for errors, until explicitly terminated. If a watch task is defined for your project, click the watch link in the Check for Project Issues dialog shown above or select Project > Start Watching with CodeMix to initiate watching.

Icon in editor toolbar indicating a watch task is running

To stop a running watch task, select Project > Stop Watching with CodeMix, or terminate the task in the Terminal+ view. In an Angular project, you can start and stop watching from the control panel.

Angular Control Panel

Linting and Validation Properties

Use the Project Properties > CodeMix > Linting and Validation page to specify defaults for the validation dialog.

Selecting linting and validation preferences

If you check the “Always use the below when clicking Validate” box, the build/validation process will run directly without having the confirmation dialog display.

If a watch task is defined for your project, you can also specify here, whether the project is to be watched automatically, as soon as your IDE starts, or on demand, by clicking the button/actions as described above.

Appendix A—Augmenting Tasks for Build Pipeline Integration

Sample tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "${workspaceFolder}/tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "codemix": {
                "lifecycle": "build",
                "validatedExtensions": [
                    "ts"
                ],
                "readyChecks": [
                    "node_modules_ready"
                ]
            }
        }
}

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.

Appendix B—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.

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 create a tasks.json file manually by following the steps in Appendix A.