JavaScript
Linters - コード品質の保証

備考

JSHint

JSHintは、JavaScriptコードのエラーや潜在的な問題を検出するオープンソースのツールです。

JavaScriptをリントするには、2つの方法があります。

1. JSHint.comに移動し、そこにテキストエディタでコードを貼り付けます。
2. IDEにJSHintをインストールします 。
   • Atom： linter-jshint （ Linterプラグインがインストールされている必要があります）
   • 崇高なテキスト： JSHintガターおよび/またはサブライムリンター
   • Vim： jshint.vimまたはjshint2.vim
   • Visual Studio： VSCode JSHint

これをIDEに追加する利点は、プログラムを.jshintrcときに使用される.jshintrcという名前のJSON構成ファイルを作成できることです。これは、プロジェクト間で構成を共有したい場合に便利です。

例.jshintrcファイル

{
    "-W097": false, // Allow "use strict" at document level
    "browser": true, // defines globals exposed by modern browsers http://jshint.com/docs/options/#browser
    "curly": true, // requires you to always put curly braces around blocks in loops and conditionals http://jshint.com/docs/options/#curly
    "devel": true, // defines globals that are usually used for logging poor-man's debugging: console, alert, etc. http://jshint.com/docs/options/#devel
    // List global variables (false means read only)
    "globals": {
        "globalVar": true
    },
    "jquery": true, // This option defines globals exposed by the jQuery JavaScript library.
    "newcap": false,
    // List any global functions or const vars
    "predef": [
        "GlobalFunction",
        "GlobalFunction2"
    ],
    "undef": true, // warn about undefined vars
    "unused": true // warn about unused vars
}

JSHintでは、特定の行/コードブロックの設定も可能です

switch(operation)
{
   case '+'
   {
      result = a + b;
      break;
   }

   // JSHint W086 Expected a 'break' statement
   // JSHint flag to allow cases to not need a break
   /* falls through */
   case '*':
   case 'x':
   {
      result = a * b;
      break;
   }
}

// JSHint disable error for variable not defined, because it is defined in another file
/* jshint -W117 */
globalVariable = 'in-another-file.js';
/* jshint +W117 */

その他の設定オプションについては、 http：//jshint.com/docs/options/を参照してください。

ESLint / JSCS

ESLintはJSHintに よく似たスタイルガイドのコードスタイルのリンターとフォーマッターです。 ESLintは2016年4月にJSCSとマージされました.ESLintはJSHintよりもセットアップに多くの努力を払っていますが、 Webサイトには開始のための明確な指示があります。

ESLintの設定例は次のとおりです。

{
    "rules": {
        "semi": ["error", "always"], // throw an error when semicolons are detected 
        "quotes": ["error", "double"] // throw an error when double quotes are detected
    }
}

すべてのルールがオフに設定されているサンプル構成ファイルと、そのルールの説明がここにあります 。

JSLint

JSLintは、JSHintが分岐したトランクです。 JSLintは、JavaScriptコードを書く方法についてもっと懐疑的な立場をとり、 Douglas Crockfordのパーツを「良い部品」とみなし、 Crockfordがより良いソリューションを提供すると考えているコードから遠ざかるようにします。次のStackOverflowスレッドは、あなたに適したリンターを決定するのに役立ちます 。違いはありますが（ここではJSHint / ESLintとの簡単な比較があります）、各オプションはきわめてカスタマイズ可能です。

JSLintの設定の詳細については、 NPMまたはgithubを参照してください。