ServiceNow - VSCodeで書いたスクリプトをServiceNow形式にする

# 目的：
VSCodeを利用するとネットワーク接続されていない場合でもコーディングできる。ServiceNow Extension for VS Codeを利用するとServiceNowと同期することもできる。
但し、このVSCodeで書いたコードのフォーマットはServiceNow上で直接書いたコートと異なり、ソースをgitにpushすると形式による差分がでる。
本記事ではVSCodeのコードをServiceNowと同じ形式にする設定を説明する。

## 現象の例：
入力スクリプト
```
var DateTimeUtilAjax =    Class.create();
DateTimeUtilAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {
 checkSchedAdd: function   ()     {
  var firstDT = this.getParameter('sysparm_fdt'); //Date/Time to check against
      var chkType = this.getParameter('sysparm_chk'); //Either 'before' or 'after'
   var lookVar = this.getParameter('sysparm_add'); //Look ahead value AddType-AddTime
      return;
  },
  type: 'DateTimeUtilAjax'
});
```
ServiceNowでフォーマットした結果
```
var DateTimeUtilAjax = Class.create();
DateTimeUtilAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {
    checkSchedAdd: function() {
        var firstDT = this.getParameter('sysparm_fdt'); //Date/Time to check against
        var chkType = this.getParameter('sysparm_chk'); //Either 'before' or 'after'
        var lookVar = this.getParameter('sysparm_add'); //Look ahead value AddType-AddTime
        return;
    },
    type: 'DateTimeUtilAjax'
});
```
VSCodeでフォーマットした結果。functionの後にスペースがある。
```
var DateTimeUtilAjax = Class.create();
DateTimeUtilAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {
    checkSchedAdd: function () {
        var firstDT = this.getParameter('sysparm_fdt'); //Date/Time to check against
        var chkType = this.getParameter('sysparm_chk'); //Either 'before' or 'after'
        var lookVar = this.getParameter('sysparm_add'); //Look ahead value AddType-AddTime
        return;
    },
    type: 'DateTimeUtilAjax'
});
```

# プラグインのインストール
1. ServiceNowはコードフォーマットにBeautifyを利用している。VSCodeも同じようにフォーマットさせるためにはVSCodeにもBeautifyプラグインをインストールする。
1. Beautifyのデフォルト設定ではServiceNowと異なります。同じようにフォーマットするためにはBeauutifyの設定を変更します。
2.1 VSCodeでCtrl + Shift + Pキーを同時に押下します。
2.2 「Preferences: Open Settings(JSON)」を選択する。 <br/>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698027/e42da4e7-1910-d182-abf2-0255cb5ad363.png)
2.3 次の内容を設定する
```{
    "beautify.config": {
       "js": {
        "allowed_file_extensions": ["js", "jsonc", "jshintrc", "jsbeautifyrc"],
        "brace_style": "collapse", // [collapse|expand|end-expand|none] Put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line, or attempt to keep them where they are
        "break_chained_methods": false, // Break chained method calls across subsequent lines
        "e4x": false, // Pass E4X xml literals through untouched
        "end_with_newline": false, // End output with newline
        "indent_char": " ", // Indentation character
        "indent_level": 0, // Initial indentation level
        "indent_size": 2, // Indentation size
        "indent_with_tabs": false, // Indent with tabs, overrides `indent_size` and `indent_char`
        "jslint_happy": false, // If true, then jslint-stricter mode is enforced
        "keep_array_indentation": false, // Preserve array indentation
        "keep_function_indentation": false, // Preserve function indentation
        "max_preserve_newlines": 0, // Maximum number of line breaks to be preserved in one chunk (0 disables)
        "preserve_newlines": true, // Whether existing line breaks should be preserved
        "space_after_anon_function": false, // Should the space before an anonymous function's parens be added, "function()" vs "function ()"
        "space_before_conditional": true, // Should the space before conditional statement be added, "if(true)" vs "if (true)"
        "space_in_empty_paren": false, // Add padding spaces within empty paren, "f()" vs "f( )"
        "space_in_paren": false, // Add padding spaces within paren, ie. f( a, b )
        "unescape_strings": false, // Should printable characters in strings encoded in \xNN notation be unescaped, "example" vs "\x65\x78\x61\x6d\x70\x6c\x65"
        "wrap_line_length": 0 // Lines should wrap at next opportunity after this number of characters (0 disables)
       },
    },
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    }
}
```
設定を保存した後にフォーマットした結果：
```
var DateTimeUtilAjax = Class.create();
DateTimeUtilAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {
  checkSchedAdd: function() {
    var firstDT = this.getParameter('sysparm_fdt'); //Date/Time to check against
    var chkType = this.getParameter('sysparm_chk'); //Either 'before' or 'after'
    var lookVar = this.getParameter('sysparm_add'); //Look ahead value AddType-AddTime
    return;
  },
  type: 'DateTimeUtilAjax'
});
```

参照リンク：
https://stackoverflow.com/questions/62371396/is-there-any-way-to-change-default-setting-of-beautify-vscode-extension-config
以上