Introducing UI5 linter

[OliverGraeff]

A linter is a static code analysis tool used to find programming bugs, stylistic errors and suspicious constructs. The usage of a linter has many advantages such as

• introducing an agreed level of code quality resulting in fewer errors in production,
• delivering readable and maintainable code,
• using a consistent code style making code reviews more efficient,
• validating code security, and
• ensuring a solid knowledge about code quality for all developers.

The UI5 team introduces UI5 linter to help improve your UI5 code.

A focus of the first version released now are capabilities to validate the compliance to Best Practices for UI5 Developers. Following these best practices for new as well as existing apps has always been … well, … best practice. Going forward, this will be even more relevant as these best practices will be the basis for bringing an app to UI5 2.x. Please refer to Introducing OpenUI5 2.x to understand the approach of removing everything not required to comply with the best practices.

Features

UI5 linter is a static code analysis tool for UI5 projects. It checks JavaScript, XML, JSON, and other files in your project and reports the findings. It lists problematic code, which is not following the UI5 best practices, including

• usage of deprecated APIs / libraries, which are going to be removed
• synchronous loading mechanism negatively affecting overall performance, and
• usage of global variables.

Please note: While the initial version of UI5 linter already provides good value, it is not yet covering all aspects and not all best practices for UI5 2.x. The UI5 team plans more versions in the next weeks, which can reveal more findings.

How To

UI5 linter is installed via the npm package manager and can be used via the CLI. Find details on how to install and use it on https://github.com/SAP/ui5-linter.

Become a UI5 linter hero

1. Use the new UI5 linter today to
   • improve the static code quality of your UI5 code,
   • validate its compliance to UI5 best practices, and
   • prepare your project for UI5 2.x.
     
     
2. Watch out for upcoming versions of the UI5 linter.

[jvanattenhoven]

Interesting. Can we use some kind of ignore file? Currently it checks folders that aren't necessary.

[matthias_osswald]

@jvanattenhoven currently there's no ignore/exclude option, but it's on our backlog. Are you referring to folders with third-party code, or is this about something different? Files outside of the project sources shouldn't be checked.

[jvanattenhoven]

@matthias_osswald The /test folder for example, the /utils/locate-reuse-libs.js file...

[Qualiture]

Very nice!

Just wondering: since the GitHub repo mentions it 'It checks JavaScript, XML, JSON, and other files in your project [..]', does it also check UI5 TypeScript files?

[matthias_osswald]

@jvanattenhoven thanks for your feedback. Please note that the tests should also be checked, but I understand that there may be some files coming from templates or extensions.

@Qualiture currently TypeScript files are not checked, but this is on our roadmap. Luckily TypeScript already provides hints about usage of deprecated functionality in the code, but we still see benefits in UI5 linter, as the TypeScript definitions don't cover every aspect.

I've just created a roadmap issue in the GitHub project that lists both of your features: https://github.com/SAP/ui5-linter/issues/21

[tulio_rossetti]

Really nice. Is it possible to choose the UI5 version when testing? 🙂

[matthias_osswald]

@tulio_rossetti currently, the LTS version 1.120 is used, but in future the version should become configurable.

[jvanattenhoven]

@matthias_osswald "Please note that the tests should also be checked, but I understand that there may be some files coming from templates or extensions"

That is indeed the case. A lot of those files are written/generated by SAP: changes_loader.js, changes_preview.js, locate-reuse-libs.js. These generate a lot of errors (deprecated code, JQuery use etc.).

We have been using another npm module https://github.com/kennyzhangdev/ui5depchk. It seems less accurate recently; it does allow you to specify files/folders to ignore via a .eslintignore file.

[Christoph_G]

@jvanattenhoven We from SAP Fiori tools are aware that some of our helper resources currently generated into the project are not SAPUI5 2 compatible. Instead of persisting files into the projects at generation time, we plan to create all the default and not productive html and js resources based on the yaml configurations on the fly by https://www.npmjs.com/package/@sap/ux-ui5-tooling. In this course the code will be made UI5 2 safe, and projects can benefit without file migration.