Background

The trigger for writing this blog is this brilliant blog by Jakob. I will be honest here to accept that i have been working on SAPUI5/OpenUI5 for last 2-3 years but have never used a Linter. Such a shame I feel now, but i believe it’s better to be late than never. I knew about Linter when i started developing and each time when I have tried to get my head around it i failed miserably. It  was irritating, so I uninstalled it. Every time browser was my best friend for finding errors actually i ended up learning developer console more:)

After reading this blog I got motivated to give it one more try, so this blog will talk about my experience which i believe will ABAPer’s transitioning to Javascript.First we will understand what Linting is for ABAPer’s like us, and then eventually how I managed to finally get it up and running. Infact trust me i configured the PHP linter also to find the static defects in the code for which. earlier i was copy pasting my code in the online editor to check for errors

Linting Demystified

Linting is nothing  but doing static checks on our code like we do it in ABAP. These checks can vary from naming convention, to code styling(Pretty printer in ABAP) to complex checks etc.  Linting has a concept of rules which are nothing we can call functions to perform different checks which we want to run as per the organization guidelines. Rules can be compared to kind of Business rule framework in ABAP. So for different languages we have different linters available. ESLint is one of the most famous one for Javascript and that is being used by SAP Web IDE.

                      ESlint.org

Now we understand theoretically that we can run ABAP like checks for our SAPUI5 code in fact for any programming language all we need to do is find the Linter for that language. Lets see them in action.

Using ESLint in our local IDE(VS Code) for Javascript Code

Basic Setup

The basic setup of linting for a project is actually quite straightforward which i thought to be quite tedious earlier. The below mentioned screenshot provide in detail the steps to configure the ESLint for your projects

Customizing message severity from error to warning or switch off.

Since we have the basic setup up and running i wanted to play with the settings of the error being displayed and below mentioned screenshot provides the result for the same.

Using Linting in our Web IDE

SAP Webide already provide us with different set of existing rules from ESLint which we can turn on and off as per the projects need. Let’s check how this set up works in SAP Web IDE. I have created a basic project and shown below how problem severity type changes with the ESLint configurations.

What is next from here?

So far we have covered basic setup, switching/adding existing ESLint rules or message customization,  hopefully it will help the fellow ABAPer’s in getting on the train. I am thinking of writing another blog with some tips and tricks which i have learnt during my learning adventure and another one with my trials with custom ESLint rules.Feel free to provide your feedback.