Editing JavaScript in Visual Studio Code

callas pdfToolbox contains a full JavaScript editor that supports syntax coloring, code completion, theme support and more. Sometimes it is preferable to:

  • Edit JavaScript in an editor with more possibilities (such as the inclusion of syntax-checking, linting or prettify-ing tools.
  • Be able to edit all JavaScripts used in a Process Plan at the same time, with easy switching between the different scripts.

This is not possible in pdfToolbox Desktop itself, but is possible through a link with Microsoft Visual Studio Code. Because of the support necessary to link with an external editor, the fact that Microsoft Visual Studio Code can be used freely and is available on both Windows and macOS, this feature only works with this editor.

Configuration

In order for this type of editing to work, your system needs to be correctly configured. Specifically you need to install:

  • Microsoft Visual Studio Code.
    You can install the software from the Microsoft web site.
  • Microsoft Visual Studio Code command-line tools.
    On Windows and Linux this should be automatically available after installing Visual Studio Code. On macOS, you need to follow some extra steps: open "View" -> "Command Palette…" and select  "Shell Command: Install 'code' command in PATH" (further information on this can be found here).

After installing Visual Studio Code, it is highly advised to read the documentation on the Microsoft web site and install some of the optional plug-ins that can help with JavaScript syntax coloring, syntax checking and prettify-ing your code.

Starting the editor

There are two possible ways to open a script inside Visual Studio Code for editing.

Editing one script

Open the script in the JavaScript editor, and click the "Edit in external editor" button.

If you want to know how to debug your Java Script Variables in MS Visual Studio Code, read the following article: Debugging JavaScript Variables with Visual Studio Code

Editing all scripts

Open a Process Plan and click the "Edit scripts..." button at the bottom of the Process Plan editor.

Editing your scripts

When you opened a single script or configuration file, Visual Studio Code opens just that file. If you opened multiple scripts, you'll find all of them in the Visual Studio Code editor that opens.

Remark the following features of the Visual Studio Code editor:

  1. The ".vscode" folder is inserted automatically by callas pdfToolbox. You should not modify or delete it.
  2. All of your scripts and configuration files appear in the "vars" folder. Click any of them to open it in the editor, ready for editing.
  3. At the top of the Visual Studio Code editor, you have a tab for each script file you have opened. If the file was changed, there is a filled circle marker at the end of the name of the script.
  4. Even though you are not editing in pdfToolbox, you still get auto-completion. In this example typing "app.doc" brought up all properties of the document pdfToolbox gives access to through JavaScript.

Saving your changes

You do not have to copy and paste your changes in the Visual Studio Code editor to your Process Plan, simply use the "Save" menu command or use "Ctrl+S" on Windows, or "Command+S" on macOS to save your changes.

callas pdfToolbox detects you made a change and automatically updates your Process Plan scripts as necessary.