Skip to Content

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:

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.

 

 

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

    1. Noël Hendrikx

      I have the same feeling regarding VSCode. I love the UI, but code completion or quick jump to references is way more easier in WebStorm. If there are tips aas well for that in VSCode, I am willing to try it.

      Nice blog post, perhaps you have more tricks for VSCode?

      (0) 
  1. Helmut Tammen

    Hi Christian,

    great blog, thank you.

    VS Code is the only Microsoft tool I really love. Even better to see that it integrates with UI5.

    If you have more tips using UI5 with VS Code please write more blogs about it.

     

    (0) 
  2. Christian Graff Post author

    I’m glad that you enjoy this blog. I’m always curious and as soon as I find out new tipps & tricks I’l let you know :-). As Gregor Wolf mentioned, the path to the json schema files was different in version 1.3.55 of the npm package, so updated my posting.

     

    (1) 

Leave a Reply