Visual Studio Code y Salesforce DX

Cómo instalar y usar el paquete de extensiones de Visual Studio Code para Salesforce DX.

Por Randalyn Hill-Coffer·Revisado por el equipo de Blue Canvas·4 de diciembre de 2024·6 min de lectura

Como mencionamos en nuestra publicación anterior, MavensMate dejará de recibir soporte. En su mensaje de despedida, Joe Ferarro, creador de MavensMate, sugirió a los usuarios probar el Paquete de extensiones de Visual Studio Code para Salesforce DX. Al momento de escribir esto, la extensión tiene más de 5,000 instalaciones, pero ninguna reseña, así que pensamos en escribir un breve artículo.

La extensión todavía está en versión preliminar y no tiene disponibilidad general oficial. Dicho esto, funciona bastante bien y puedes usarla. También es de código abierto, por lo que puedes reportar problemas y enviar solicitudes de incorporación de cambios! Es bastante rápido: todo el proceso de instalación y puesta en marcha me tomó unos 20 minutos, y es una excelente introducción a Salesforce DX si aún no has empezado a usarlo.

(Una nota rápida sobre VS Code: es excelente, ligero y lo usamos).

NOTAS IMPORTANTES ANTES DE COMENZAR

Hasta donde sabemos, el paquete de extensiones de Visual Studio Code para Salesforce DX no reemplaza a MavensMate para Visual Studio Code. Ante todo, no funciona con Sandboxes por lo que no funcionará en tu flujo de trabajo de desarrollo habitual. Solo funciona con organizaciones temporales por el momento.

La extensión consta, en realidad, de cuatro miniextensiones:

La primera es, básicamente, una capa de integración de DX/CLI para Visual Studio Code. Lleva muchas de las funciones que puedes ejecutar desde la línea de comandos con la CLI de Salesforce a la paleta de comandos de Visual Studio Code. Esto resulta útil si, por algún motivo, prefieres no usar la línea de comandos. Las demás ofrecen principalmente autocompletado de código y resaltado de sintaxis para distintos tipos de componentes de Salesforce, como clases de Apex y páginas de Visualforce.

IMPORTANTE: Para usar Visual Studio Code con las extensiones de Salesforce DX, debes configurar la CLI de Salesforce e iniciar un proyecto de Salesforce DX.

CÓMO INSTALAR SALESFORCE DX PARA VISUAL STUDIO CODE

Puedes obtener más información sobre los complementos en el marketplace de Visual Studio Code. Finalmente, instalarás el paquete de complementos aquí, pero mientras la herramienta siga en versión preliminar, recomiendan verificar manualmente la autenticidad de la extensión salesforcedx-vscode. Esto permite asegurarte de descargar una versión segura de la extensión. En el enlace anterior encontrarás instrucciones para hacerlo.

Descarga la extensión manualmente aquí. Desde una terminal, ejecuta:

shasum -a 256 <location_of_the_downloaded_file

Verifica que el SHA esté en la lista de valores SHA del archivo proporcionado.

Cambia la extensión del archivo que descargaste de .zip a .vsix.

En Visual Studio Code, ve a Extensiones, haz clic en las opciones y selecciona Instalar desde VSIX:

Es posible que necesites recargar VS Code para completar la instalación.

CREA UNA ORGANIZACIÓN DEV HUB CON SALESFORCE DX HABILITADO

Necesitas habilitar DX para usar la extensión. Puedes hacerlo en tu organización de producción o empresarial. Si solo quieres probarla rápidamente, haz lo mismo que yo y crea un Dev Hub aquí. Al registrarte, obtendrás un entorno donde puedes crear varias organizaciones temporales para hacer pruebas.

Hay un buen módulo de Trailhead sobre cómo configurar Salesforce DX que puede ayudarte con los conceptos básicos.

INSTALA LA CLI DE SALESFORCE Y CONFIGURA DX

A continuación, debes configurar la CLI de Salesforce. Puedes descargarlo para Windows, Mac y Ubuntu aquí. Nota: es posible que puedas configurar esto directamente desde VS Code, pero también es útil tener un buen dominio de la CLI. Para confirmar que funcionó, escribe sfdx en la terminal. Deberías ver algo como esto:

Usage: sfdx COMMAND [command-specific-options]

Help topics, type "sfdx help TOPIC" for more details:

sfdx force # tools for the salesforce developer
sfdx plugins # manage plugins
sfdx update # update sfdx-cli

Si ves eso, sabrás que funcionó. Luego debes configurar SFDX y crear algunas organizaciones temporales (scratch orgs). Autoriza a la CLI a trabajar con tu DevHub escribiendo:

sfdx force:auth:web:login -h

Esto abrirá automáticamente tu navegador y te pedirá que inicies sesión en el Dev Hub. Usa las credenciales que utilizaste para crear el Dev Hub autorizado para Salesforce DX. En nuestro caso, usamos un hub especial que creamos solo para esta demostración. Haz clic en Permitircuando el flujo de OAuth te lo indique.

Una vez que completes este proceso de autorización, puedes configurar un alias para recordar más fácilmente con qué Dev Hub estás trabajando. Recordar un alias es mucho más fácil que recordar el nombre de usuario con el que iniciaste sesión. En este caso, DevHub es el creativo alias que elegimos:

sfdx force:auth:web:login -d -a DevHub

Deberías ver algo como esto:

Successfully authorized <your-username> with org id 00B1I000000L9r3UCY
Ya puedes cerrar el navegador

Si quieres abrir el Dev Hub, puedes hacerlo aquí:

sfdx force:org:open -u DevHub

Pero todavía no es necesario.

CLONA UN PROYECTO DE EJEMPLO DE SFDX

Salesforce DX tiene algunos proyectos de ejemplo que son perfectos para comenzar. Descargamos sfdx-simple con Git, que contiene dos páginas de Visualforce, una prueba de Apex y un controlador.

git clone https://github.com/forcedotcom/sfdx-simple.git

Luego puedes crear una organización temporal:

sfdx force:org:create -s -f config/project-scratch-def.json

Puede tardar unos minutos, pero es bastante rápido. Te proporciona un nombre de usuario para la organización:

Successfully created scratch org: 00D0v0000000an1EAA, username: <sample-email>

Configura ese nombre de usuario como predeterminado para enviar los cambios a esa organización temporal y no a otro entorno:

force:config:set defaultusername=<sample-email>
=== Set Config
NAME VALUE
───────────────
defaultusername <sample-email>

Envía tu código a la organización temporal (ten en cuenta que el código que clonaste de Git no estará en la organización temporal hasta que lo envíes por primera vez):

sfdx force:source:push
STATE FULL NAME TYPE PROJECT PATH
───── ───── ───── ─────
Add DemoController ApexClass force-app/main/default/classes/DemoController.cls-meta.xml
Add DemoController ApexClass force-app/main/default/classes/DemoController.cls
Add DemoPage ApexPage force-app/main/default/pages/DemoPage.page-meta.xml
Add DemoPage ApexPage force-app/main/default/pages/DemoPage.page
Add DemoControllerTests ApexClass force-app/test/default/classes/DemoControllerTests.cls-meta.xml
Add DemoControllerTests ApexClass force-app/test/default/classes/DemoControllerTests.cls

Abre la aplicación para confirmar:

sfdx force:org:open --path one/one.app
Waiting to resolve the Lightning Experience-enabled custom domain..........

En mi experiencia, esto tarda unos minutos. Al terminar, debería abrir la organización temporal en el navegador. Cuando esté lista, también te proporcionará una URL que puedes usar para abrirla.

Abre la página de Visualforce para confirmar que funciona.

Ahora que tenemos SFDX en funcionamiento con organizaciones temporales, podemos usar la extensión de VS Code en lugar de la línea de comandos.

CÓMO USAR LA EXTENSIÓN DE VS CODE PARA SFDX

Abre el proyecto en VS Code. Ve a la página de Visualforce y realiza algunos cambios. Guarda.

Abre la paleta de comandos de VS Code presionando Cmd+Shift+P en Mac o Ctrl+Shift+P en Windows. Escribe sfdx y verás algunas opciones similares a las de la línea de comandos. Puedes seleccionar Push Source to Default Scratch Org.

Cuando lo hagas, recibirás una notificación cuando el envío a la organización temporal se complete correctamente.

Si haces clic en Mostrar puedes ver la salida.

Actualiza tu página de Visualforce y comprueba que se haya aplicado el cambio.

¡Eso es todo! Vale la pena señalar que no es tan sencillo como guardar en MavensMate. Además, solo funciona con organizaciones temporales, no con sandboxes. Esperamos ver más novedades de Salesforce DX y de la extensión en los próximos meses.

‍