Introduction

We all know how tricky it can be to correctly configure the manifest.json. Although the documentation and tooling of the SAP Web IDE Full-Stack has received huge improvements, there are – however – situations where we have to change the manifest.json manually. And often we ask ourself: Is the manifest still valid? The SAP Web IDE Full-Stack provides manifest validation but lots of SAPUI5 developers do their job without using this IDE and do not benefit from this convenience.

Since the build process has been changed and grunt was introduced for this job, SAP provides the @sap/grunt-sapui5-bestpractice-build npm package, which includes json schemas for the manifest. At the time of writing the current version is 1.3.58. With these schemas you will be able to enable manifest validation in Visual Studio Code, since this editor supports json schema out of the box. Let’s take a look which steps are needed to enable this comfort feature in your VS Code (or any other editor that supports json schema).

UI5 Project Preparation

As said before your project needs to be built by grunt. You have different options to reach this. The simplest one is to create a new project in the SAP Web IDE Full-Stack. As a result you have a fully working npm & grunt based project.

If you are still using the old SAP Web IDE, you need to migrate your projects to the fullstack Web IDE. Afterwards your migrated project contains the files needed for the grunt build process.

A third option would be to manually adapt your project. If you choose this way, please consult the developer tutorials page Grunt Build with SAP Web IDE. During this step you have to add a file called .npmrc to your projects root folder. It tells npm where to look for the sap npm package. It contains the following single line of code:

@sap:registry=https://npm.sap.com/

If you are already working locally, everything is fine and you can read the next step. Otherwise export your project in the SAP Web IDE or push your changes into your git repository and pull them locally.

The sap npm package structure

After your npm install has finished, take a friendly look into your node_modules folder.

The manifest validation files are located under node_modules/@sap/di.code-validation.json/src/manifest/utils/schema. You will notice the following things:

• There are different schemas (see folder names) for different UI5 versions.
• There are two different schema files for
  • standard components (schema.json)
  • components inside libraries (schema_cil.json)

In Version 1.3.55 the path to the json schema files is node_modules/@sap/grunt-sapui5-bestpractice-build/node_modules/@sap/di.code-validation.json/src/manifest/utils/schema.

Visual Studio Code Configuration

To enable the manifest validation, open the user settings (File > Preferences > Settings), add the following lines to your configuration and save your settings.

"json.schemas": [{
	"fileMatch": ["/**/webapp/manifest.json"],
	"url": "./node_modules/@sap/di.code-validation.json/src/manifest/utils/schema/1.9.0/schema.json"
}]

I recommend you to point the path to the specific version of your projects. If your projects consist of different versions of UI5, you can override this generell user setting with an entry in your workspace settings.

In the same manner you can configure json schema validation for components in libraries. Just point the path of the schema_cil.json to the subfolder of your componts inside your library.

(Shiny) Results

As a result you can deeply enjoy the full featureset of Visual Studio Codes json schema validation support, as they are:

IntelliSense

Problems View

Jump To Next Problem (F8)

Hovered Documentation

tl;dr

With the new grunt npm package @sap/grunt-sapui5-bestpractice-build, provided by SAP, Visual Studio Code (or any other editor that supports json schema) is able to validate the manifest of your SAPUI5 component (inside a library). After a npm install just set up the path to the specific schema file in your user / workspace settings and enjoy new comfort.