Exodus – III: Setting up the environment for VS Code

This post is part of the Exodus series created after the announced closure of the SAP Cloud Platform trial service, in the NEO environment:

• Exodus – I: The End of SCP NEO and SAP WebIDE Full-Stack
• Exodus – II: Is there an alternative to Cloud Foundry’s Business Application Studio?
• Exodus – III: Setting up the environment for VS Code
• Exodus – IV: From SAP Web IDE to Visual Studio Code

I am not going to make a detailed guide on how to configure the work environment for Visual Studio Code because there is already quality information on the net about it.

So I simply tell you the steps, some recommendations and attach the reference links.

Installations

First of all, you need Git on your computer (which you can find here). This will allow you to use Git technology on your work repositories in VS Code.

In order to run your SAPUI5 applications you will need to have a small local server on your computer. There are several alternatives for this, but the standard one is Node. You can download the software here.

And now you can install Visual Studio Code here.

Extensions in VS Code

Once you have the software installed you have to extend VS Code with several extensions.

First of all, you should have the extension of the Git provider you use, in my case I am a GitHub user. I am using the official GitHub Pull Requests and Issues extension. I have also used this other GitHub which also works very well although it’s not officially supported.

If you are going to do some Abap I recommend the unofficial Abap extension by Lars Hvam. And even more important is the ABAP remote filesystem extension by Marcello Urbani, an expert on matter.

Moving on to Fiori, the first extension you need is  SAP Fiori tools – Extension Pack, the official Fiori extension for SAP’s Visual Studio Code. In general, I don’t like installing too many extensions, in the end you don’t even know what you have installed. But in the case of SAP as a provider of extensions for VS Code, I do recommend installing all of them.

Note: A conflict has been detected between the SAP Fiori tools – Extension Pack and the Mobile Development Kit extension for Visual Studio Code. Surely something like this will be adjusted quickly by SAP, but nowadays you cannot create new Fiori Elements applications with the two extensions installed.

And that’s it. This is all you need to work with Fiori locally. In the next post I will tell you the process to migrate a repository from SAP WebIDE, adapt, test and deploy it to an on-premises system.

Recommended extensions for VS Code

The above extensions are the minimum required. But precisely the power of Visual Studio Code is in the ecosystem that has been created around it. There are a huge number of extensions available and many of them are really good. We’re not talking about aesthetic nonsense (which are cool too) but about tools that really increase developer productivity. Despite what I’ve said before about installing extensions like a crazy, here is a list of some highly recommended extensions. But my advice is that you take a look one by one to them and read the page of the extension where you can see well what each one brings.

1. SAPUI5 Extension: SAPUI5 code autocompletion.
2. Prettier – Code formatter: A very cool code formatter. In addition to formatting, it removes unnecessary spaces or corrects basic errors such as the typical semicolon that is always forgotten in JavaScript.
3. ESLint: The same checks of the Lint library on JavaScript that we already had in SAP WebIDE or in Sonar. You can leave as it is or start defining your own rules.
4. EditorConfig for VS Code In a corporate environment, prevent each developer from going on their own by establishing uniform editing settings.
5. Polacode: It’s a nonsense, but it’s cool for taking pretty code screenshots. Useful for sharing and documentation.
6. Dobri Next – Themes and Icons: 23 cool themes for VS Code.
7. Material Icon Theme: This extension places the corresponding icon on each project file depending on its extension.
8. Kite Autocomplete for Python and JavaScript: This extension not only completes the code but also has Machine Learning mechanisms to learn our programming preferences and continuously improve its completion task. Note: Keep in mind for this extension to work, we have to additionally install the Kite software on our computer.

Referral links

Here are several relevant links for the entire startup process with Visual Studio Code as a development environment for SAP.

1. A really great VS Code installation guide: Installing Visual Studio Code and Configuring SAP Extensions in Visual Studio Code Don’t miss the rest of SaiNithesh Gajula posts that appear at the end of this post. He guides you in a simple way through the development of SAPUI5 and HANA applications from VS Code.
   
2. How to install Git and work with it from VS Code: How to Work with Git, Github in Visual Studio Code.
3. Guide how to install Node by operating system (minute 03:09 for Windows): Node.js Tutorial – 2 Instalación 
4. In case you want to find out why you need Node: Node.js Tutorial – 1 Introducción
5. To program in Abap: ABAP Development in VS Code
6. To connect VS Code with SAP: SAP ABAP Development in VS Code | Setup Guide
7. For advanced UI5 users: End-To-End setup of local development environment with UI5 Tooling
8. To work with VS Code and deploy the apps to Cloud Foundry: CloudFoundryFun #7 – Connect VS Code to deployed cloud applications
9. To develop in HANA from VS Code: SAP HANA Express & Cloud Application Programming Model Development Using Only VSCode and CLI.