Tech Tips

  1. プログラミング
  2. 1051 view

[jslint][javascript]jslintをコマンドから使ってコード品質チェック

Contents

概要

Javascriptは利用方法によるけど運用が難しい言語だと思ってる。
jslintを使用するとコードの品質(?)をチェックすることが出来る。
開発時にjslintが通るコードを書くようにすると、経験上いくらか運用がマシになる気がする。
web上でも使えるけど、コマンドから使えるとJenkinsとか何かと便利なのでコマンドから使う方法をメモ。
ここではこれを使う。

環境

  • OS
    • Linux 2.6.32-279.el6.x86_64 #1 SMP Fri Jun 22 12:19:21 UTC 2012 x86_64 x86_64 x86_64 GNU/Linux
  • nvm
    • v0.10.26

インストール

  1. nvmのインストール
  2. npm install jslint
これだけ。

使い方

ここでは
はてなブックマークエントリー情報取得API
叩いて結果を適当に画面に表示するjsのコード品質をjslintでチェックしてみる。

1.hatena.htmlを準備

<!DOCTYPE html>
<html>
  <head>
    <title>jslint test</title>
  </head>
  <body>
    <button id="button1" type="button">Push</button>
    <div id="msg"></div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="hatena.js"></script>
  </body>
</html>

2. hatena.jsを準備

/*
 * hatena.js
 */

/*jslint        browser : true, continue : true,
  devel  : true, indent : 2,      maxerr : 50,
  newcap : true, nomen  : true, plusplus : true,
  regexp : true, sloppy : true,     vars : false,
  white  : true
*/
/*global $ :true */

$("#button1").click(function(){
  $.ajax({
    url: "http://b.hatena.ne.jp/entry/json/?url=http%3A%2F%2Fwww.hatena.ne.jp%2F",
    type: "GET",
    dataType: "jsonp",
    jsonp: "callback",
    timeout: 1000,
    cache: false,
    success: function(data){
      $("#msg").html("");
      $("#msg").append(data.title + "<br/>");
      $("#msg").append(data.entry_url);
    },
    error: function(){
      $("#msg").html("ERROR");
    }
  });
});

最初の方のコメントはjslint用の設定。
ここを見れば、
コマンドラインオプションでとか設定ファイルでjslint設定を書くことができるけど
設定はファイルごとに異なるのが普通だと思うので直接書いた。

3. 実行

まず、この状態でhatena.jsを叩いてみる。
$ ./node_modules/.bin/jslint hatena.js

hatena.js is OK.

通った! じゃあ、駄目な場合で叩いてみる。
/*
 * hatena.js
 */

/*jslint        browser : true, continue : true,
  devel  : true, indent : 2,      maxerr : 50,
  newcap : true, nomen  : true, plusplus : true,
  regexp : true, sloppy : true,     vars : false,
  white  : true
*/

$("#button1").click(function(){
  $.ajax({
    url: "http://b.hatena.ne.jp/entry/json/?url=http%3A%2F%2Fwww.hatena.ne.jp%2F",
    type: "GET",
    dataType: "jsonp",
    jsonp: 'callback',
    timeout: 1000,
    cache: false,
    success: function(data, status){
      $("#msg").html("");
      $("#msg").append(data.title + "<br/>");
      $("#msg").append(data.entry_url);
    },
    error: function(){
      $("#msg").html("ERROR");
    }
  });
});

$はグローバル変数ですというjslintに対する宣言を消して、
successのところに使用していないstatusを引数に入れた。
すると、
hidetomo@www4322gi:~/work/jslint$ ./node_modules/.bin/jslint hatena.js

hatena.js
 #1 '$' was used before it was defined.
    $("#button1").click(function(){ // Line 12, Pos 1
 #2 '$' was used before it was defined.
    $.ajax({ // Line 13, Pos 3
 #3 '$' was used before it was defined.
    $("#msg").html(""); // Line 21, Pos 7
 #4 '$' was used before it was defined.
    $("#msg").append(data.title + "<br/>"); // Line 22, Pos 7
 #5 '$' was used before it was defined.
    $("#msg").append(data.entry_url); // Line 23, Pos 7
 #6 Unused 'status'.
    success: function(data, status){ // Line 20, Pos 29
 #7 '$' was used before it was defined.
    $("#msg").html("ERROR"); // Line 26, Pos 7

こんな感じ。

まとめと参考

jslintでコマンドからjsのコード品質をチェックすることが出来る。
これを使うとgruntでjslintが使える。
jsHintというjslintと似たものもある。

プログラミングの最近記事

  1. PlatformIO IDE for VSCode を使用して VSCode で Ardu…

  2. ROS Docker イメージで発生した GPG error の解消方法

  3. Streamlit で訪れた国を色づけした世界地図を作成できるアプリケーションを作成してみ…

  4. M5Stack Core2 for AWS – ESP32 IoT開発キットで…

  5. D3.js v7 で点・線・テキスト・ツールチップ・ズームを設定する方法

関連記事

PAGE TOP