View source | Discuss this page | Page history | Printable version   
Toolbox
Main Page
Upload file
What links here
Recent changes
Help

PDF Books
Add page
Show collection (0 pages)
Collections help

Search

How to setup Visual Studio Code IDE

Contents

Prerequisites

Bulbgraph.png   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:

...
  "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"
      }
    ]
  }
...

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):

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

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
   }
}

Retrieved from "http://wiki.openbravo.com/wiki/How_to_setup_Visual_Studio_Code_IDE"

This page has been accessed 78 times. This page was last modified on 3 October 2019, at 08:03. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.