ServiceNow VS Code extension cannot push ES6 to server

[Johan Friedrich]

The ServiceNow VS Code extension is capable of PULLING ES6 code from a Tokyo instance onto a local machine.

Subsequently, the ServiceNow VS Code extension is NOT capable of PUSHING ES6 code from a local machine onto a Tokyo instance.

The scoped application was built in Studio with Javascript Mode set as ECMAScript 2021 (ES12), its script-includes contain es6 code with syntax such as "const" etc.

When modifying code in studio and then doing a "Sync Project" locally in vs code via the official extension, the new code is successfully downloaded.

When modifying code locally in vs code and then doing a "Sync Project" via the official extension, the new code is not sent to the server, and an error pops up in vs code:

Syntax errors detected in filename.js ->
Parsing error: The keyword 'const' is reserved.

Source: ServiceNow® Extension for VS Code (Extension)

In a vague attempt to try and fix this, I only changed the hidden tsconfig.json file to this:

{
  "compilerOptions": {
    "target": "ES6",
    "allowJs": true,
    "outDir": "build"
  }
}

to no avail.

Has anyone else ran into this?
Is the team supporting the extension aware of this issue?

When can we look forward to a permanent fix?

My team would like to be able to rely on the vs code extension for our custom application development cycles. We prefer it over the "source control" feature in studio, as it allows for better files structure in the git repo and most importantly enables us to go through our regular Pull Request process inside our version control tool and not inside studio.

[Rainer Alf_ldi]

No reaction from SN?

The web editor is borderline useless. Anything more complex needs an IDE. The VS Code plugin is so cumbersome that I've put up with the web editor for far to long and now wanted to switch to VS Code and then... nanana only ES5?!

[kenf]

You have to manually edit the extension to get this to work. This has been a known issue for a while now and I don't know if ServiceNow still supports the extension.

It's due to the ESLint configuration that runs before a file is synced.  By default ESLINT is only configured to support ES5. Following is from the extension code:

u = new(0, r.CLIEngine)({
    envs: ["browser", "mocha"],
    useEslintrc: !1
});

The ESLint configuration for the CLIEngine the plugin is using is only configured for ES5, so we need to either be able to specify an ESLint config file, or have that configuration changed to something like below where I've added es2020 to the list of envs:

u = new(0, r.CLIEngine)({
    envs: ["es2020", "browser", "mocha"],
    useEslintrc: !1
});

I've made that update locally to my own version of the extension and it fixes the problem.  I'd like ServiceNow to open source the extension so we could make updates.  It's not fun looking through minified code to find a problem.

If you want to make this change yourself you'll have to find the extension code on your machine. I'm using a Windows machine and the extension code is located at: ${USERPROFILE}/.vscode/extensions/servicenow.now-vscode-1.5.0/out/extension.js

The code is minified. It's easiest to find the part you'll need to update by searching for the string "r.CLIEngine". Then you modify the envs array by adding "es2020" and save the file. Use a plain text editor to do this as the file is very large. If you try to use VS Code it will probably choke on the file due to the size.

More help can be found here:

Re: Using ECMAScript21 in VSCode creates syntax er... - Page 2 - ServiceNow Community

There is also an Idea to get ServiceNow to update the extension but it gets no attention:

View Idea Page - Now Support (servicenow.com)

[brian_rowland]

Here are tips for locating the extensions.js file for MacOS and Windows:

MacOS:

• Open terminal and type: open $HOME/.vscode/extensions
• This will get you to the folder containing your ServiceNow Extension for VS Code
• Navigate to the ./[Your ServiceNow VS Code]/out/extension.js

Windows:

• Navigate to \\Users\[Your User Folder]\.vscode\extensions\[Your ServiceNow VS Code]\out\extension.js

[Rainer Alf_ldi]

If you're really adventurous, build your own and upload directly from whatever IDE to SN.

We're writing code in TypeScript, validating and transpiling it with tsc to JavaScript, replacing some tags (git commit, version, etc.), doing some treeshaking with terser to remove dead code and then uploading it directly to SN without ever touching the browser, UI or any extension.

Building the infrastructure for this to work takes max. one hour. Create a local JS script for the upload, create a API on SN to accept the upload and then write a NPM script.

"scripts": {
  "build-app-x": "tsc --project app-x/tsconfig.json && grunt git-describe:app-x terser:app-x && npx run-func bin/DevToolsLocal.js upload x_scopename.app-x out/app-x.js",

One click on run NPM task and your done.

This works with any IDE. I'm using WebStorm, a colleague is using VS Code. Take your pick.