How to stay with SAP eslint checks in local development environment

Hi folks,

Today I solved an interesting task and I just want to share this thing to you.

During long time I was working in SAP Web IDE. Nice idea, no installation is needed, can be accessed from almost any device. However, having more-less complicated task this tool is not enough for many reasons and we decide to shift to local development side.

Using SAP Web IDE I always switch to Fiori JavaScript validator which includes along with standard eslint checks also specific sap rules.

Fiori JS validator

example of sap rules

You can also notice that after applying these settings you will have two more files in the project:

Now let’s go back to local IDE. I use VS Code.

So if you didn’t do this yet install Node.js, download VS Code and run it.

If we want to use eslint the first thing you do — you run a command

npm install -g eslint

Also for the better experience of using eslint I advise you to install the following extension: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

OK, everything is installed and we clone our project into a local repository and open it. If we did everything correct on the problems tab we should see some problems. But the first thing you see is something like this:

I apologize for this long context, but to make this workaround searchable I have to insert the source messages as a text:

"Definition for rule 'sap-no-ui5base-prop' was not found (sap-no-ui5base-prop)
Definition for rule 'sap-no-global-define' was not found (sap-no-global-define)
Definition for rule 'sap-no-location-reload' was not found (sap-no-location-reload)
Definition for rule 'sap-no-hardcoded-color' was not found (sap-no-hardcoded-color)
Definition for rule 'sap-no-sessionstorage' was not found (sap-no-sessionstorage)
Definition for rule 'sap-no-absolute-component-path' was not found (sap-no-absolute-component-path)
Definition for rule 'sap-no-br-on-return' was not found (sap-no-br-on-return)
Definition for rule 'sap-no-override-rendering' was not found (sap-no-override-rendering)
Definition for rule 'sap-no-override-storage-prototype' was not found (sap-no-override-storage-prototype)
Definition for rule 'sap-no-exec-command' was not found (sap-no-exec-command)
Definition for rule 'sap-no-element-creation' was not found (sap-no-element-creation)
Definition for rule 'sap-no-dynamic-style-insertion' was not found (sap-no-dynamic-style-insertion)
Definition for rule 'sap-no-global-variable' was not found (sap-no-global-variable)
Definition for rule 'sap-no-hardcoded-url' was not found (sap-no-hardcoded-url)
Definition for rule 'sap-no-jquery-device-api' was not found (sap-no-jquery-device-api)
Definition for rule 'sap-no-navigator' was not found (sap-no-navigator)
Definition for rule 'sap-no-localstorage' was not found (sap-no-localstorage)
Definition for rule 'sap-no-global-event' was not found (sap-no-global-event)
Definition for rule 'sap-ui5-no-private-prop' was not found (sap-ui5-no-private-prop)
Definition for rule 'sap-no-encode-file-service' was not found (sap-no-encode-file-service)
Definition for rule 'sap-timeout-usage' was not found (sap-timeout-usage)
Definition for rule 'sap-no-history-manipulation' was not found (sap-no-history-manipulation)
Definition for rule 'sap-no-dom-insertion' was not found (sap-no-dom-insertion)"

OK, what’s happening. Eslint module being installed globally basically doesn’t know about these SAP rules. Unfortunately there is no available eslint plugin exists to use them easily. Meanwhile there is not a big issue to fix this problem.

I found these rules in one of sap node modules. To make the visible for eslint first of all let’s install this module:

npm install -g @sap/di.code-validation.js

In the case if this module was not found your npm most probably doesn’t know about sap npm registry. You can declare it by creating .npmrc file in you workplace folder with the following content:

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

After installing validation module let’s then go to VS code settings and make some additional settings, correspondingly substituting npm folder path with your user:

"eslint.options": {"rulePaths": [
"C:\\Users\\pplenkov\\AppData\\Roaming\\npm\\node_modules\\@sap\\di.code-validation.js\\src\\defaultConfig\\fioriCustomRules\\.eslintrules"
]}

Reloading VS Code you must see that these error messages are gone and you see the rest of the messages making Problems tab really informative and useful:

I guess if you found this article you might possibly were looking for exact same problem I faced today. In this case please try to repeat and leave some clubs if it helped.

Cheers!