Este post forma parte de la serie Éxodo creada tras el anunciado cierre del servicio trial de SAP Cloud Platform, en el entorno NEO:

• Éxodo – I: El fin de SCP NEO y de SAP WebIDE Full-Stack
• Éxodo – II: ¿Hay alternativa al Business Application Studio de Cloud Foundry?
• Éxodo – III: Configurando el entorno para VS Code
• Éxodo – IV: De SAP WebIDE a Visual Studio Code

No voy a hacer una guía pormenorizada de cómo configurar el entorno de trabajo para Visual Studio Code porque ya hay en la red información de calidad al respecto.

Así que simplemente te cuento los pasos, algunas recomendaciones y dejo los enlaces de referencia.

Instalaciones

En primer lugar necesitas en tu ordenador Git que puedes encontrar aquí. Esto te permitirá usar la tecnología Git sobre tus repositorios de trabajo en VS Code.

Para poder ejecutar tus aplicaciones SAPUI5 necesitarás tener en tu equipo un pequeño servidor local. Hay varias alternativas para ello, pero la estándar es Node. Puedes descargar el software desde aquí.

Y ahora ya si puedes instalar el Visual Studio Code desde aquí.

Extensiones en VS Code

Una vez que tienes el software instalado tienes que ampliar VS Code con varias extensiones.

En primer lugar, deberías tener la extensión del proveedor de Git que utilices, en mi caso soy usuario de GitHub. Estoy utilizando la extensión oficial GitHub Pull Requests and Issues. También he utilizado esta otra GitHub que también va muy bien aunque no tiene soporte oficial.

Si vas a hacer algo de Abap te recomiendo la extensión no oficial Abap de Lars Hvam. Y más importante aún es la extensión ABAP remote filesystem de Marcello Urbani, una eminencia en el campo.

Pasando ya a Fiori, la primera extensión que necesitas es SAP Fiori tools – Extension Pack, la extensión oficial de Fiori para Visual Studio Code de SAP. En general no me gusta meter demasiadas extensiones, que al final no sabes ni lo que tienes. Pero en el caso de SAP como proveedor de extensiones para VS Code, si que recomiendo poner todas ellas.

Ojo: Se ha detectado un conflicto entre la extensión SAP Fiori tools – Extension Pack y extensión mobile Development Kit extension for Visual Studio Code. Seguro que algo así lo ajustará rápido SAP, pero a día de hoy no se pueden crear nuevas aplicaciones Fiori Elements con las dos extensiones instaladas.

Y ya esta. Esto es todo lo que necesitas para trabajar con Fiori localmente. En la próxima entrada te cuento el proceso para migrar un repositorio desde SAP WebIDE, adaptarlo, probarlo y desplegarlo a un sistema on premise.

Extensiones recomendadas para VS Code

Las anteriores son las extensiones mínimas necesarias. Pero precisamente la potencia de Visual Studio Code está en el ecosistema que se ha creado alrededor suyo. Hay una cantidad enorme de extensiones disponibles y muchas son realmente buenas. No estamos hablando de tontunas estéticas (que también molan) sino de herramientas que realmente aumentan la productividad del desarrollador. A pesar de lo que he dicho sobre instalar extensiones a lo loco, aquí te dejo una lista de algunas extensiones muy recomendables. Pero mi consejo es que las mires una a una y te leas la página de la extensión donde ves bien lo que trae cada una.

1. SAPUI5 Extension: Autocompletado de código SAPUI5
2. Prettier – Code formatter: Un formateador de código muy chulo. Además de formatear te quita espacios innecesario o corrige errores básicos como el típico punto y coma que siempre se olvida en JavaScript.
3. ESLint: Los mismos chequeos de la librería Lint sobre JavaScript que ya teníamos en SAP WebIDE o en Sonar. Puedes dejarlo tal cual o ponerte a definir tus propias reglas.
4. EditorConfig for VS Code: En un entorno corporativo, evita que cada desarrollador haga la guerra por su cuenta estableciendo una configuración de edición  uniforme.
5. Polacode: Es una pijada, pero está chulo para coger pantallazos de código bonitos. Útil para compartir y para la documentación.
6. Dobri Next – Themes and Icons: 23 temas chulos para VS Code.
7. Material Icon Theme: Esta extensión coloca el correspondiente icono a cada fichero del proyecto dependiendo de su extensión.
8. Kite Autocomplete for Python and JavaScript: Esta extensión no solo completa el código sino que tiene mecanismos de Machine Learning para ir aprendiendo nuestras preferencias de programación e ir mejorando continuamente su tarea de completado. Ojo, hay que tener en cuenta que para que funcione esta extensión, tenemos que instalar en nuestro equipo adicionalmente el software de Kite.

Enlaces de referencia

Aquí te dejo varios enlaces relevantes para todo el proceso de arranque con Visual Studio Code como entorno de desarrollo para SAP.

1. Buenísima guía de instalación de VS Code: Installing Visual Studio Code and Configuring SAP Extensions in Visual Studio Code. No te pierdas el resto de posts de SaiNithesh Gajula que aparecen al final de la entrada. Te guía de forma sencilla por el desarrollo de aplicaciones SAPUI5 y HANA desde VS Code.
   
2. Cómo instalar Git y cómo trabajar con Git desde VS Code: Como Trabajar con Git, Github en Visual Studio Code.
3. Guía de cómo instalar Node por sistema operativo (minuto 03:09 para Windows): Node.js Tutorial – 2 Instalación 
4. Por si quieres enterarte de por qué necesitas Node: Node.js Tutorial – 1 Introducción
5. Para programar en Abap: ABAP Development in VS Code
6. Para conectar VS Code con SAP: SAP ABAP Development in VS Code | Setup Guide
7. Para usuarios avanzados de UI5: End-To-End setup of local development environment with UI5 Tooling
8. Para trabajar con VS Code y desplegar las apps en Cloud Foundry: CloudFoundryFun #7 – Connect VS Code to deployed cloud applications
9. Para desarrollar en HANA desde VS Code: SAP HANA Express & Cloud Application Programming Model Development Using Only VSCode and CLI.

.