jswatchdogの新バージョンとして，jswatchdog2を作りました．
特徴
- ブラウザのみで動作可能．
- コードレビューのコスト削減．
- XSS の可能性がある箇所の把握．
- ES2020およびES5に対応．(右上のドロップダウンで切り替え)
ほぼ，ESLint（JavaScript コードチェッカー）のブラウザ内動作版です．
「ESLintの環境を整えるのがどうしても面倒臭い」という場合などにご利用ください．
利用方法
https://atsushi-eda.github.io/jswatchdog2/
- 左側のエディタに JavaScript プログラムを貼り付けます。
- 右側に修正が必要な箇所が表示されるので、適宜修正します。
エラーになりやすいポイント
JavaScriptのソースコード
(function(){'use strict';kintone.events.on('app.record.index.show',function(evt){varunusedVar=undefinedVar;varbutton=document.createElement('button')button.innerHTML=kintone.app.record.get().record['hoge'].value;});})();
チェッカーの解説
latest(ES2020)の場合のチェック結果例です．
// function式ではなく，アロー関数式を使用してください．
Line 4, Unexpected function expression. (prefer-arrow-callback)
kintone.events.on('app.record.index.show', function(evt) {
// var文ではなく，let文かconst文を使用してください．
Line 5, Unexpected var, use let or const instead. (no-var)
var unusedVar = undefinedVar;
// 'unusedVar' には値が割り当てられていますが，使用されていません．
Line 5, 'unusedVar' is assigned a value but never used. (no-unused-vars)
var unusedVar = undefinedVar;
// 'undefinedVar' が定義されていません．
Line 5, 'undefinedVar' is not defined. (no-undef)
var unusedVar = undefinedVar;
// var文ではなく，let文かconst文を使用してください．
Line 6, Unexpected var, use let or const instead. (no-var)
var button = document.createElement('button')
// 文末に";" がありません．
Line 6, Missing semicolon. (semi)
var button = document.createElement('button')
// 脆弱性の警告です．
Line 7, Unencoded input 'kintone.app.record.get().record['hoge'].value' used in HTML context (xss/no-mixed-html)
button.innerHTML = kintone.app.record.get().record['hoge'].value;
// ブラケット記法ではなく，ドット記法を使用した方が良いです．
Line 7, ["hoge"] is better written in dot notation. (dot-notation)
button.innerHTML = kintone.app.record.get().record['hoge'].value;
旧バージョン(jswatchdog)と比較して，アロー関数式やlet・const文の推奨などが追加されています．
ESLint設定
jswatchdog2内でのESLintの設定は下記です．