Instalar Visual Studio Code

Bienvenidos bibliotecarios, a una nueva sobre el curso de aprende AL desde cero😁. Hoy aunque seas experto, puedes quedarte con nosotros, ya que además de enseñar como instalar VS Code, mostraré algunas de las extensiones que en mi opinión son más útiles para mejorar nuestro entorno de desarrollo al máximo.

Tras realizar las instalaciones anteriores, ya sólo nos queda la instalación de nuestro entorno de desarrollo donde crearemos nuestro maravilloso código. Así que vamos haya😎.

  1. Acceder al siguiente enlace y descargar el ejecutable (En mi caso la versión de Windows x64). https://code.visualstudio.com/download

  1. Ejecutamos el archivo descargado:

  1. Seguimos adelante con la siguiente configuración e instalamos:


Bien, ya tenemos nuestro entorno de desarrollo. Fácil, ¿verdad?😁. Pero si por algo se caracteriza VS Code es por su gran personalización mediante extensiones, algo que personalmente me encanta. Así que vayamos con las instalaciones de las mismas.

Extensiones VS Code

Ahora os mostraré las extensiones que necesitamos instalar para que nuestro entorno sea compatible con el desarrollo de AL. Además os recomendaré algunas que no son necesarias pero si que en mi opinión, son bastante útiles.

Extensiones esenciales

AL Language extension for Microsoft Dynamics 365 Business Central: https://marketplace.visualstudio.com/items?itemName=ms-dynamics-smb.al

La extensión más importante. La responsable de que VS Code soporte nuestro lenguaje(AL).


AL CodeActions: https://marketplace.visualstudio.com/items?itemName=davidfeldhoff.al-codeactions

Nos mostrará una pequeña bombilla con sugerencias sobre nuestro código.


AL Formatter: https://marketplace.visualstudio.com/items?itemName=rasmus.al-formatter

Formatea nuestro código automáticamente al guardar, para que respetemos las tabulaciones y la indentación.


AL Object Designer: https://marketplace.visualstudio.com/items?itemName=martonsagi.al-object-designer

Nos facilitará la creación de objetos.


AL Toolbox: https://marketplace.visualstudio.com/items?itemName=BartPermentier.al-toolbox

Nos ayudará a crear regions y a optimizar código gracias a sus sugerencias.


AL Translation Center: https://marketplace.visualstudio.com/items?itemName=daniel-nt.al-translation-center

AL Translation Snippets: https://marketplace.visualstudio.com/items?itemName=daniel-nt.al-translation-snippets

Estas extensiones se podría decir que van de la mano. Con ellas generaremos las traducciones de nuestros campos, labels, etc.
La primera es la encargada de generar el archivo de traducciones, y la segunda es la que nos proporciona los snippets para poder crear más rápidamente las traducciones.


AL Variable Helper: https://marketplace.visualstudio.com/items?itemName=rasmus.al-var-helper

Nos proporcionará snippets para la declaración de variables.


AZ AL Dev Tools/AL Code Outline: https://marketplace.visualstudio.com/items?itemName=andrzejzwierzchowski.al-code-outline

Tendremos un wizard con el que podremos crear objetos desde cero con un par de clicks.


waldo’s CRS AL Language Extension: https://marketplace.visualstudio.com/items?itemName=waldo.crs-al-language-extension

Tendremos gran cantidad de snippets con los que agilizar el trabajo.

Con estas extensiones sería más que suficiente para comenzar. Personalmente me encantan las extensiones y la gran cantidad de ventajas que nos proporcionan, por lo que os mostraré alguna que yo os recomiendo tener😎.

Extensiones opcionales

Error Lens: https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

Nos muestra los errores y warnings en pantalla para verlos de un vistazo.


vscode-icons: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

Tendremos iconos en los objetos para distinguirlos más rápidamente.


Better Comments: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Podremos personalizar nuestros comentarios según la finalidad que tengan.


google-search: https://marketplace.visualstudio.com/items?itemName=kameshkotwani.google-search

Podremos buscar el texto seleccionado rápidamente en Google.


GitLens — Git supercharged: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Contaremos con el control de versiones de Git.

Si no disponéis de Git, y no sabéis instalarlo y configurarlo, no dudes en dejar un comentario o escribir a alvaro.castro@labibliotecadebc.com y te ayudaremos a tenerlo😜. Aunque también podríamos traer una entrada sobre ese tema🤔.

Por último os enseñaré dos configuraciones de VS Code las cuales uso todos los días.

La primera es para que las líneas que contienen los bloques de código tengan colores distintos dependiendo del bloque al que nos refiramos.


Y la otra es una configuración que pondremos en el User Settings (JSON). Con esta configuración podremos declarar variables directamente escribiendo el nombre del objeto.

Además os dejo mi UserSetting(JSON) por aquí por si queréis coger alguna configuración😁

{
  "al.codeAnalyzers": [
    "${CodeCop}",
    "${UICop}"
  ],
  "editor.formatOnSave": true,
  "CRS.FileNamePattern": "<ObjectNameShort>.<ObjectTypeShortPascalCase>.al",
  "CRS.FileNamePatternExtensions": "<ObjectNameShort>.<ObjectTypeShortPascalCase>.al",
  "CRS.FileNamePatternPageCustomizations": "<ObjectNameShort>.<ObjectTypeShortPascalCase>.al",
  "git.confirmSync": false,
  "git.autofetch": true,
  "editor.acceptSuggestionOnCommitCharacter": false,
  "al.enableCodeAnalysis": true,
  "git.enableSmartCommit": true,
  "al.assemblyProbingPaths": [
    "./.netpackages",
    "C:/Windows/Microsoft.NET/assembly"
  ],
  "CRS.OnSaveAlFileAction": "Reorganize",
  "extensions.ignoreRecommendations": true,
  "files.autoSave": "afterDelay",
  "terminal.integrated.env.windows": {},
  "workbench.productIconTheme": "fluent-icons",
  "errorLens.enabledDiagnosticLevels": [
    "error",
    "warning",
    "info",
    "hint"
  ],
  "files.autoSaveDelay": 60000,
  "errorLens.excludeBySource": [
    "AL(AA0241)",
    "AL(AA0218)",
    "AA0218"
  ],
  "alOutline.completionProviders": [
    "VariableNamesWithType",
    "VariableDataTypes"
  ],
  "workbench.iconTheme": "vscode-icons",
  "powermode.enabled": true,
  "powermode.combo.counterEnabled": "hide",
  "powermode.combo.timeout": 2,
  "powermode.shake.intensity": 0,
  "powermode.combo.timerEnabled": "hide",
  "security.workspace.trust.untrustedFiles": "open",
  "editor.renderWhitespace": "none",
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "html-template.tag.html",
        "settings": {
          "foreground": "#83D4FF"
        }
      },
      {
        "scope": "html-template.tag.custom",
        "settings": {
          "foreground": "#83D4FF"
        }
      },
      {
        "scope": "html-template.ng.attribute.doctype",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.exclamation.doctype",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.doctype",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.entities.ampersand",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.entities.semicolon",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.attributes.generic",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.attributes.events",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "punctuation.separator.key-value.html-template.ng",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.style.language.identifier",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.script.language.identifier",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.link.myme-type",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.aria-attribute.prefix",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.aria-attribute.suffix",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.data-attribute.prefix",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.data-attribute.suffix",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.interpolation.begin",
        "settings": {
          "foreground": "#A5D6FF"
        }
      },
      {
        "scope": "html-template.ng.interpolation.end",
        "settings": {
          "foreground": "#A5D6FF"
        }
      },
      {
        "scope": "html-template.ng.expression.operator.logical",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.expression.operator.compound",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.expression.operator.bitwise",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.expression.operator.comparison",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.expression.operator.relational",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.expression.operator.arithmetic",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.expression.operator.navigator",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "entity.name.tag.html.ng",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.attributes.animationtrigger.prefix",
        "settings": {
          "foreground": "#A5D6FF"
        }
      },
      {
        "scope": "html-template.ng.attributes.animationtrigger.variable",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "punctuation.definition.ng-binding-name.begin.html",
        "settings": {
          "foreground": "#A5D6FF"
        }
      },
      {
        "scope": "punctuation.definition.ng-binding-name.end.html",
        "settings": {
          "foreground": "#A5D6FF"
        }
      },
      {
        "scope": "html-template.ng.attributes.event-handler",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.attributes.input-binding.animationTrigger.prefix",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.attributes.input-binding.first-level",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.attributes.input-binding.second-level",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.attributes.input-binding.third-level",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.attributes.prefix.let",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.attributes.prefix.ref",
        "settings": {
          "foreground": "#A5D6FF"
        }
      },
      {
        "scope": "html-template.ng.attributes.suffix.name",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.attributes.suffix.rxjs",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.attributes.prefix.sugar",
        "settings": {
          "foreground": "#A5D6FF"
        }
      },
      {
        "scope": "html-template.ng.attributes.suffix.sugar",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.attributes.template.prefix",
        "settings": {
          "foreground": "#A5D6FF"
        }
      },
      {
        "scope": "html-template.ng.attributes.template.variable",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "entity.name.tag.html.primeng",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.tag.svg",
        "settings": {
          "foreground": "#83D4FF"
        }
      },
      {
        "scope": "html-template.ng.svg.path.commands",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.tag.colon",
        "settings": {
          "foreground": "#A5D6FF"
        }
      },
      {
        "scope": "html-template.ng.tag.suffix",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.attributes.colon",
        "settings": {
          "foreground": "#A5D6FF"
        }
      },
      {
        "scope": "html-template.ng.attributes.suffix",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.xmlStylesheet.language.identifier",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.exclamation.dtd",
        "settings": {
          "foreground": "#D69A00"
        }
      },
      {
        "scope": "html-template.ng.dtd",
        "settings": {
          "foreground": "#79C0FF"
        }
      },
      {
        "scope": "html-template.ng.qualifier.dtd",
        "settings": {
          "foreground": "#83D4FF"
        }
      },
      {
        "scope": "html-template.ng.occurrence.dtd",
        "settings": {
          "foreground": "#A5D6FF"
        }
      }
    ]
  },
  "editor.accessibilitySupport": "off",
  "task.slowProviderWarning": true,
  "alOutline.enableCodeCopFixes": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.mouseWheelZoom": true,
  "alVarHelper.ignoreALPrefix": "BBC",
  "alOutline.addToolTipsToPageFields": false,
  "al.publisher": "La Biblioteca de BC",
  "ALTB.CheckCommentTranslations": true,
  "ALTB.snippetTargetLanguage": "ENU",
  "ALTB.snippetTargetLanguage2": "ESP",
  "notebook.stickyScroll.enabled": true,
  "al.outputAnalyzerStatistics": true,
  "codeium.enableConfig": {
    "*": true,
    "al": true
  },
  "editor.guides.bracketPairs": true
}

Y hasta aquí las extensiones y configuraciones de VS Code.

Espero que os haya resultado útil, y alguna de estas configuraciones os acompañe en vuestro día a día.

Si algo no os ha quedado claro, no dudéis en dejar un comentario o en escribirnos a info@labibliotecadebc.com.😜

¡Ahora te toca a ti!😎

¡Hasta la próxima bibliotecarios!

LA BIBLIOTECA DE BC

Hola bibliotecario, 👋
Encantados de conocerte.

Déjanos tu correo para enviarte nuestro boletín con todas las novedades! 😁
(Domingos 18:00)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

4 comentarios en “Instalar VS Code”

Translate »