Installing Visual Studio Code and Configuring SAP Extensions in Visual Studio Code

[Sai_Nithesh_G]

 

Hi everyone.

Hope everyone doing well. This Blogs will helps you in installing Visual Studio Code and configuring SAP Extensions in Visual Studio Code.

Before installing Visual Studio Code, we need to have basic requirements like OS version, RAM and other details. Refer below for requirements

https://code.visualstudio.com/docs/supporting/requirements

 

Now, let us install Visual Studio Code downloaded from the Visual Studio Code site using below path. (Preferable to download latest version)

https://code.visualstudio.com/download

 

Click on the downloaded Visual Studio executable file

 

Accept the agreement and Click on Next

 

Make sure Add to Path has checked and click on Next

 

Click on Install

 

Preparing to install

 

During installation process

 

On successful installation, we can see below screen. Check Launch Visual Studio Code and click on Finish.

 

We can see the initial screen of Visual Studio Code.



 

To install SAP Extensions (SAP Fiori Tools) in Visual Studio Code. Go to Extensions Tab

and search for “SAP SE” which are provided by SAP. Choose “SAP Fiori tools – Extensions Pack” which are pack of

• SAP Fiori tools - Application Modeler


• SAP Fiori tools - Guided Development


• SAP Fiori tools - Service Modeler


• SAP Fiori tools - XML Annotation Language Server

 

 

In addition, we should also install XML Toolkit and Application Wizard from SAP OSS and SAP OS publishers, which are helpful in creating SAP Fiori Apps.

 

Install XML Toolkit

 

Install Application Wizard

 

We can also install other extensions like SAP Cloud Mobile Services extension from SAP in the same way.

We can view the installed extensions in Visual Studio Code as below

 

Conclusion : In this blog post, we have installed Visual Studio Code and provided set up for SAP Fiori apps through Visual Studio Code using SAP Fiori Tools

Hope you guys like this blog post.

Feel free to comment 🙂

 

 

Refer my blogs on VS Code

Developing SAP Fiori App using SAP Fiori Tools in Visual Studio Code

Develop SAP UI5 Apps using Visual Studio Code

Access SAP HANA records from VS (Visual Studio) Code

 

 

Regards,

Sai Nithesh Gajula

 

 

 

 

 

 

 

 

[victorpale]

Thank you so much for the article.

I installed SAP Friori tools extension on my Visual Studio Code.

I try to star a project with SAP Fiori tools - Application Generator, and I can not see the card for go ahead to the next step:

Card for star project.

In fact, I don't see any option:

My Visual Studio Code

 

What are you suggesting?

Best regards, Victor.

[Sai_Nithesh_G]

Hi Victor,

Even I was also faced similar issue in the beginning, Later I have uninstalled and re-installed SAP Fiori Tools extensions and Application Wizard once again then it started working.

[victorpale]

Thank you so much SaiNithesh for your reply.

I forgot to mentioned, I use MacOS.

I was able to solve my issue. I executed: npm i @sap/generator-fiori-elements

[Sai_Nithesh_G]

Happy to hear

You can also refer my blog

Developing SAP Fiori App using SAP Fiori Tools in Visual Studio Code

https://blogs.sap.com/2020/07/16/developing-sap-fiori-app-using-sap-fiori-tools-in-visual-studio-cod...

[syed_khurram2]

I am also getting same issue, dont see any tile, screen is empty. i installed and uninstalled many times. i am using windows, can you please explain where to execute that command npm which you mentioned, sorry i am using studio firsttime

regards

[benlim]

Try run below command in Visual Studio terminal.

Reference from blog: SAP Fiori tools is generally available. Increase the efficiency of developing SAP Fiori elements app...

npm i -g @sap/generator-fiori-elements 

 

Regards,

Ben

[syed_khurram2]

thank you, it worked

[syed_khurram2]

Is this tools is only for FIORI Element, how can create general SAP FIORI application. we are still using sapui5 1.52 older version and backend is still on abap 7.4. so far I was using webide personal edition but i like this tool a lot. can you please guide how i can start with SAPUI5 Application template?

[Sai_Nithesh_G]

Thanks Syed for your interest.

We can also use Visual Studio Code for SAP UI5 App development but as per my understanding we can deploy them only on SAP Cloud Foundry. Hope this wont restrict you in exploring on Visual Studio Code.

You can also refer to my blog to start with SAP UI5 app with Visual Studio Code

Develop SAP UI5 Apps using Visual Studio Code

[eduardo_linares]

Still it’s not working! i am on  windows 10  and vs code 1.47.3. you have another suggestion? Thanks!

[eduardo_linares]

Hi sainithesh.gajula:

Does not working for me! I don’t see any option from Yeoman generator! you have another suggestion? i am on  windows 10 and this it´s my vs code version! Thanks!

[Sai_Nithesh_G]

Hi Eduardo,

Make sure you have installed Application Wizard as mentioned in the above blog post and fiori elements as well

Windows

npm install -g @sap/generator-fiori-elements

MacOS

npm i @sap/generator-fiori-elements

 

 

Regards,

Sai Nithesh Gajula

[former_member295662]

Hi i saw a lot of people complaining about they couldn´t install the Yeoman Generator .

Seems like there is some type of issue with the NPM Package :

 

 

My recommendation is to wait i couldn´t find  place to get the package that is not official NPM of SAP .

 

Maybe you can try again tomorrow .

The solution once is the NPM  up is to run the following commando on the cmd :npm install -g https://npm.sap.com/@sap/generator-fiori-elements

 

You can do the same also from Yeoman Generator :

 

 

 

 

 

 

[eduardo_linares]

Thanks SaiNithesh Gajula, Now it's working! also I read Jose Ferez  suggestion below this.

[noureddine_moutaa]

Hello,

 

I followed all steps of this blog, but I'm getting this issue :

"npm" is not recognized

[Sai_Nithesh_G]

Hi Noureddine,

This error is because of Node js and npm configuration. Make sure you have configured Nodejs path in the environment variables.

 

Regards,

SaiNithesh

[lgonzalezc]

For newcomers, please note that this package has been deprecated. Now you should run

npm install -g @sap/generator-fiori

after setting up the registry as described above.