How to setup Visual Studio Code IDE

Prerequisites

This guide applies to install and use Visual Studio Code for Javascript development in Openbravo. For Java development, refer to How to setup Eclipse IDE

Before anything else, make sure that you have installed and configured in your system all components required to run Openbravo. See Development Stack Setup for more details.

Once completed this initial setup, download and install the latest version of Visual Studio Code available in its webpage: https://code.visualstudio.com/

Setup

Once the editor is installed on your system, some extensions must be installed and configured in order to make development easier.

ESLint and Prettier

VSCode supports both tools by installing Extensions. See [to Setup ESLint and Prettier in your IDE] for details.

Sync WebContent changes to module files

This is a convenient feature that enables us to edit javascript code directly from the WebContent folder, so changes can be reflected just refreshing the page with no need of running 'ant smartbuild' and relaunching Tomcat. The sync is bidirectional: WebContent changes are copied to module original code and viceversa.

To use this feature install the Run on Save extension (emeraldwalk.runonsave) and add the following configuration in settings.json:

<source lang="javascript">...

 "emeraldwalk.runonsave": {
   "commands": [
     {
       "match": "WebContent/web/(?!org.openbravo.userinterface.smartclient|org.openbravo.userinterface.smartclient.dev|userinterface.skin.250to300Comp)",
       "cmd": "dir=$( echo ${file} | sed -r 's#.*WebContent/web/([^/]+)/.*#\\1#') && file_mod=$(echo ${file} | sed -r 's#WebContent/web/'$dir'/#modules/'$dir'/web/'$dir'/#' ) && cp ${file} $file_mod"
     },
     {
       "match": "modules/(?!org.openbravo.userinterface.smartclient|org.openbravo.userinterface.smartclient.dev|userinterface.skin.250to300Comp)",
       "cmd": "dir=$( echo ${file} | sed -r 's#.*modules/([^/]+)/.*#\\1#') && file_mod=$(echo ${file} | sed -r 's#modules/'$dir'/web/'$dir'/#WebContent/web/'$dir'/#' ) && cp ${file} $file_mod"
     }
   ]
 }

... </source>

Integration with Postgresql

To run SQL queries directly in your VSCode instance you need the extension PostgreSQL (ms-ossdata.vscode-postgresql). Once installed, you need to add the database configuration in the workspace file (*.code-workspace):

<source lang="javascript">...

 "settings": {
   "pgsql.connections": [
     {
       "host": "localhost",
       "dbname": "openbravo",
       "user": "tad",
       "password": "tad",
       "emptyPasswordInput": false,
       "port": "5432",
       "profileName": "openbravo_pgsql"
    }
  ],
}

... </source>

Example settings.json

This .json includes all settings mentiones above:

{
   // js format on save
   "[javascript]": {
       "editor.formatOnSave": true,
       "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "prettier.requireConfig": true,   

   // Copy edited files from modules to webContent and from webContent to modules
   "emeraldwalk.runonsave": {
       "commands": [
           {
               "match": "WebContent/web/(?!org.openbravo.userinterface.smartclient|org.openbravo.userinterface.smartclient.dev|userinterface.skin.250to300Comp)",
               "cmd": "dir=$( echo ${file} | sed -r 's#.*WebContent/web/([^/]+)/.*#\\1#') && file_mod=$(echo ${file} | sed -r 's#WebContent/web/'$dir'/#modules/'$dir'/web/'$dir'/#' ) && cp ${file} $file_mod"
           },
           {
               "match": "modules/(?!org.openbravo.userinterface.smartclient|org.openbravo.userinterface.smartclient.dev|userinterface.skin.250to300Comp)",
               "cmd": "dir=$( echo ${file} | sed -r 's#.*modules/([^/]+)/.*#\\1#') && file_mod=$(echo ${file} | sed -r 's#modules/'$dir'/web/'$dir'/#WebContent/web/'$dir'/#' ) && cp ${file} $file_mod"
           }
       ]
   },

   // default vscode config
   "editor.suggestSelection": "first",
   "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",

   // exclude in search window the generated js files (i.e. ab7bbbd81f40d14b3b44c3241ec26a7b.js)
   "files.exclude": {
       "**/WebContent/web/js/gen": true
   }
}