VS Code Setup & SAP Extensions

Download VS Code, install the essential SAP and general-purpose extensions, and configure key settings.

VS Code Setup & SAP Extensions

VS Code is the standard editor for SAPUI5, CAP Node.js, and CAP Java development.

Download & Install

Go to code.visualstudio.com and install the Stable build for your OS.

Essential Extensions

Open VS Code, press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS), and install these:

SAP-specific

Extension	Publisher	Why
SAP Fiori Tools - Application Generator	SAP	Generate SAPUI5 apps in seconds
SAP Fiori Tools - Extension Pack	SAP	Adds page map, service modeler, guided dev
SAP CDS Language Support	SAP	Syntax highlighting and autocomplete for .cds files
SAP Fiori	SAP	Preview Fiori apps locally

General (highly recommended)

Extension	Publisher	Why
ESLint	Microsoft	Catch JS/TS errors as you type
Prettier	Prettier	Auto-format on save
GitLens	GitKraken	Inline git blame and history
REST Client	Huachao Mao	Test your CAP OData endpoints from inside VS Code
XML	Red Hat	Format and validate `manifest.xml`, `xs-app.json`

For CAP Java only

Extension	Publisher	Why
Extension Pack for Java	Microsoft	Java language server, debugger, Maven support
Spring Boot Extension Pack	VMware	Spring Boot dashboard, live beans view

Key settings to configure

Open settings with Ctrl+, and add to settings.json:

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "files.autoSave": "onFocusChange",
  "editor.fontSize": 14,
  "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Verify SAP Fiori tools are working

Press Ctrl+Shift+P → type Fiori: Open Application Generator
If the wizard opens, you're ready for the SAPUI5 module.