Skip to Content
Technical Articles
Author's profile photo SaiNithesh Gajula

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

 

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

 

 

 

 

 

 

 

 

Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Victor Carmona Pale
      Victor Carmona Pale

      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%20for%20star%20project.

      Card for star project.

      In fact, I don't see any option:

      My%20Visual%20Studio%20Code

      My Visual Studio Code

       

      What are you suggesting?

      Best regards, Victor.

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      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.

      Author's profile photo Victor Carmona Pale
      Victor Carmona Pale

      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

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      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-code/

      Author's profile photo SYED KHURRAM
      SYED KHURRAM

      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

      Author's profile photo Yen Shen Lim
      Yen Shen Lim

      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 apps

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

       

      Regards,

      Ben

      Author's profile photo SYED KHURRAM
      SYED KHURRAM

      thank you, it worked

      Author's profile photo Eduardo Linares
      Eduardo Linares

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

      Author's profile photo Luciano Gonzalez
      Luciano Gonzalez

      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.

      Author's profile photo SYED KHURRAM
      SYED KHURRAM

      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?

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      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

      Author's profile photo Eduardo Linares
      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!

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      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

      Author's profile photo Eduardo Linares
      Eduardo Linares

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

      Author's profile photo Jose Ferez
      Jose Ferez

      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 :

       

      NPM%20issue

       

      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 :

       

       

       

       

       

       

      Author's profile photo Noureddine MOUTAA
      Noureddine MOUTAA

      Hello,

       

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

      "npm" is not recognized

      Author's profile photo SaiNithesh Gajula
      SaiNithesh Gajula
      Blog Post Author

      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