Manifest.json validation in Visual Studio Code

[former_member88235]

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 @Sisn/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 @Sisn/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.

 

 

[rsletta]

Thank you for this excellent blog post. I love Visual Studio Code, despite its shortcomings on the UI5 side compared to Webstorm, and this made my day. 🙂

 

[Noel_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?

[htammen]

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.

 

[Margot]

I just learnt about the UI Explorer extension. I am not using VS Code (yet) but could imagine that this is also quite handy ...

[daniel_rothmund]

Also a tip is to use jsconfig.json.

with content:

{

    "typeAcquisition": {

        "include": [

            "openui5"

        ]

    }

}

then it use the types from here :

https://www.npmjs.com/package/@types/openui5

 

 

 

 

[former_member88235]

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 gregorw mentioned, the path to the json schema files was different in version 1.3.55 of the npm package, so updated my posting.

 

[its_marcos_posser]

Hi, there's a way to use the destinations created in WebIDE in vscode?

[former_member88235]

Hi Marcos,

please apology my late reply. I'm back from parental leave now 🙂

If you mean the destinations of the neo-app.json, then the answer is: yes 🙂

Inside the code-validation.json folder you'll find a folder with the name neoApp laying next to the manifest folder. Inside this folder there is a json schema for the neo-app.json file. Simply insert it into your VS Code Settings as you did it for the manifest.json validation and enjoy :-).

[gregorw]

In the meantime there is an official project from SAP at GitHub: @ui5/manifest. It's also published via JSON Schema Store.