sap-rules for ESLint in VSCode with Fiori Tools

[lisakramer]

Hi,

when enabling ESLint in a generated SAPUI5 freestyle project it has 37 warnings regarding missing definitions for rules provided by SAP.

How can I configure ESLint to also find these rules?

I found this blog https://medium.com/@petr.plenkov/how-to-stay-with-sap-eslint-checks-in-local-development-environment... and the described solution contains 32 of the 37 missing rule definitions but it seems to be a bit of a hack.

Thanks and best regards

Lisa

For further usage, these are the rules, that are missing definitions:

sap-no-global-variable

sap-no-jquery-device-api

sap-no-hardcoded-color

sap-no-hardcoded-url

sap-no-localstorage

sap-no-override-rendering

sap-no-override-storage-prototype

sap-no-sessionstorage

sap-no-ui5base-prop

sap-message-toast

sap-no-ui5-prop-warning

sap-no-localhost

sap-usage-basemastercontroller

sap-no-absolute-component-path

sap-no-encode-file-service

sap-no-dom-insertion

sap-cross-application-navigation

sap-no-location-usage

sap-timeout-usage

sap-no-proprietary-browser-api

sap-no-dom-access

sap-no-history-manipulation

sap-no-global-selection

sap-no-location-reload

sap-no-global-event

sap-no-exec-command

sap-no-br-on-return

sap-no-dynamic-style-insertion

sap-no-element-creation

sap-no-global-define

sap-forbidden-window-property

sap-no-navigator

sap-no-inner-html-write

sap-no-inner-html-access

sap-bookmark-performance

sap-no-commons-usage

sap-browser-api-warning

[quiggs1000]

Hi Lisa,

Many thanks for your detailed response on how to overcome this. I'm embarrassed to say, but the fix for eslint in the Fiori generator wasn't released in version 1.9.4 as I had stated :(. It didn't make it into that release, but it is (I promise) in the 1.9.5 release of the Fiori generator, which is due to be launched in the coming days. I'll update the issue again when it's released. Sorry again for giving you false information above.

Regards,

Ian

[quiggs1000]

Hi Lisa,

You are of course correct, it was annoying to see these errors 🙂 . We have today released a new version of the Fiori generator (1.9.4), and in this version we have included a new version of the Fiori eslint library that resolves this issues. Would it be possible for you to install the latest version of the generator and re-generate your application? This way, the eslint issues you mention will hopefully be resolved.

Regards,

Ian

[lisakramer]

Hi Ian,

thank you for your reply and the recommendation. Projects generated with the new version of the Fiori generator (1.9.4) still have the same problem when using it together with the regular ESLint-Plugin in VS Code.

However, I was able to find a solution for my problem. I am shortly explaining it, in case other community users are also looking for a solution.

You can tell ESLint to also use the provided ruleset of the generated project by including the followin lines in the .eslintrc file which is located in the root folder of the project:

  "eslint.options": { "rulePaths": [ 
    "./node_modules/eslint-plugin-fiori-custom/lib/rules"
    ]
  }

Hint: The .eslintrc file is generated by Fiori applictation generator when you choose "Add Eslint configuration to the project." within the advanced options of Step "Project Attributes".

Regards,
Lisa