ServiceNow Extension for VSCode

Install ServiceNow® Extension for VS Code

Open VS Code and install this extension and follow the instructions how to authenticate and pull application from ServiceNow

Set Custom file types

Policy Rule Action Script (sn_cmp_pol_action_script) & Resource Pool Filter (sn_cmp_rp_filter) are custom file types which you need to explicitly import in your application. This can be done by adding the file config to the application & configuring the file to enable import and sync.

Add the file config in your application

Open command pallette (cmd + shift + p)
Select 'now: Add Custom File Types'
Select required table from drop down
Select the tags required for your use or select all -> Press enter

Enable the file for sync in your application

Open command palette
Select 'now: Configure File Types'
Filter & search for your newly added table
Select the table -> Press enter

You should see files belonging to the table imported in your application under the Miscellaneous folder. Check documentation:

https://docs.servicenow.com/bundle/orlando-application-development/page/build/applications/task/vscode-add-custom-filetypes.html

VSCode - ESLint, Prettier & Airbnb Setup

It's a very good idea to setup a common linting and style guide for all developers that are working on the same code base. This can be done with eslint, prettier and by using the de-facto JavaScript style guide standard from Airbnb (https://github.com/airbnb/javascript). This document lists the steps to setup all this to your JavaScript project when using VS Code IDE.

Prerequisites

Install VS Code (https://code.visualstudio.com/)
Install latest Node.js (https://nodejs.org/en/)

1. Install ESLint & Prettier extensions for VSCode

Open VS Code, go to extensions, search ESlint and prettier and install those. Restart VS Code.
At VS Code settings set format on save and any global prettier options.

1.1 Prettier

What is prettier?

An opinionated code formatter
Supports many languages
Integrates with most editors

Why?

You press save and code is formatted
No need to discuss style in code review
Saves you time and energy

1.2 Eslint

ESLint statically analyzes your code to quickly find problems. ESLint is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

2. Install npm Packages

At your project root run these commands from command line or VS Code terminal window:

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node

npx install-peerdeps --dev eslint-config-airbnb

3. Create `.prettierrc` (project root)

This is for any prettier rules (semicolons, quotes, etc)

.prettierrc Example:

{
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": true,
  "useTabs": false
}

4. `.eslintrc`

Create .eslintrc at your project root if you don't already have one. You can also generate this file with eslint --init if you have installed eslint globally.

Add this content there (first delete all .eslintrc file content if there is any by default):

{
  "parserOptions": {
    "ecmaVersion": 5
  },
  "extends": ["airbnb", "prettier", "plugin:node/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "off",
    "no-unused-vars": "warn",
    "no-console": "off",
    "func-names": "off",
    "no-process-exit": "off",
    "object-shorthand": "off",
    "class-methods-use-this": "off",
    "no-bitwise": "off",
    "no-var": "off",
    "no-restricted-properties": "off",
    "no-plusplus": "off",
    "prefer-destructuring": "off",
    "prefer-template": "off"
  },
  "env": {
    "jest": true,
    "es6": false
  },
  "globals": {
    "gs": "readonly",
    "Class": "readonly",
    "x_int46_fj_cmp": "readonly",
    "sn_cmp": "readonly",
    "GlideRecord": "readonly",
    "FujitsuIPAMUtils": "readonly",
    "sn_cmp_api": "readonly",
    "sn_cloud_api": "readonly",
    "inputAttributes": "readonly",
    "GlideDateTime": "readonly",
    "json": "readonly",
    "AWSCloudAPIBase": "readonly",
    "AzureCloudAPIBase": "readonly",
    "Packages": "readonly"
  }
}

If you want to change, delete or add new rule there you can do it at any time. Try to avoid disabling rules and try to fix the root cause!

5. Install unit testing library Jest (optional)

npm install --save-dev jest

5.1 Writing tests (optional)

Create folder tests under your project root
Create a file main.test.js in tests folder
Put your test there, can be written in ES6+:

const myPackageName = require('../src/some-package');

test('My test name', () => {
  const expectedOutput = 'my Expected output';
  const output = myPackageName.myFunction('Hello');
  expect(output).toStrictEqual(expectedOutput);
});

You need to export your functions from other files so they can be imported to tests and tested. Add this to end of your script file that you want to test module.exports = myPackageName;

6. `package.json`

Your package.json should look something like this:

{
  "name": "now",
  "version": "1.0.0",
  "scripts": {
    "test": "jest"
  },
  "author": "Company Inc",
  "license": "SEE LICENSE IN LICENSE",
  "dependencies": {},
  "devDependencies": {
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-node": "^4.0.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^2.5.0",
    "jest": "^25.1.0",
    "prettier": "^1.19.1"
  }
}

Reference

ESLint Rules - https://eslint.org/docs/rules/
Prettier Options - https://prettier.io/docs/en/options.html
Airbnb Style Guide - https://github.com/airbnb/javascript

Satak/eslint_prettier_airbnb.md