目的：
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'
});
プラグインのインストール
- ServiceNowはコードフォーマットにBeautifyを利用している。VSCodeも同じようにフォーマットさせるためにはVSCodeにもBeautifyプラグインをインストールする。
- Beautifyのデフォルト設定ではServiceNowと異なります。同じようにフォーマットするためにはBeauutifyの設定を変更します。
2.1 VSCodeでCtrl + Shift + Pキーを同時に押下します。
2.2 「Preferences: Open Settings(JSON)」を選択する。
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'
});