新規投稿
フォローする

jswatchdog(JavaScript コードチェッカー)の新バージョンを作りました

jswatchdogの新バージョンとして,jswatchdog2を作りました.

特徴

  • ブラウザのみで動作可能.
  • コードレビューのコスト削減.
  • XSS の可能性がある箇所の把握.
  • ES2020およびES5に対応.(右上のドロップダウンで切り替え)

ほぼ,ESLint(JavaScript コードチェッカー)のブラウザ内動作版です.
「ESLintの環境を整えるのがどうしても面倒臭い」という場合などにご利用ください.

利用方法

https://atsushi-eda.github.io/jswatchdog2/

  1. 左側のエディタに JavaScript プログラムを貼り付けます。
  2. 右側に修正が必要な箇所が表示されるので、適宜修正します。

エラーになりやすいポイント

JavaScriptのソースコード

(function() {
  'use strict';

  kintone.events.on('app.record.index.show', function(evt) {
    var unusedVar = undefinedVar;
    var button = 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の設定は下記です.

1

0件のコメント

サインインしてコメントを残してください。