Technical Articles
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.
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
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.
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.
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
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/
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
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
thank you, it worked
Still it’s not working! i am on windows 10 and vs code 1.47.3. you have another suggestion? Thanks!
For newcomers, please note that this package has been deprecated. Now you should run
after setting up the registry as described above.
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?
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
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!
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
Thanks SaiNithesh Gajula, Now it's working! also I read Jose Ferez suggestion below this.
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 :
Hello,
I followed all steps of this blog, but I'm getting this issue :
"npm" is not recognized
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