Nodejsスタティックテストテクノロジオプション

7566 ワード

実はこれらのツールはすべてのjsコードの静的テストに適しています.ここではnodejsに通じる構成案を提供します.すべてのnodejs開発者に適しています.直接使用できるnodeテストプロファイルがあります.Nodejs静的テストの技術選択も便利です.
JSHint
JSHintはjavascriptコード分析検出ツールであり、jsコードエラーと潜在的な問題を検出するだけでなく、コード開発の規範化にも役立ちます.しかし、コードスタイルを規範化する作業は、私たちの第2部で説明するjscsに任せられています.
スタート

nodeの環境を保証し、npmを直接使用して

npm install -g jshint

をインストールする.
コンフィギュレーション
グローバル構成
3つの異なる構成方法がありますが、2つ目をお勧めします.

は、--config を介して、後に構成値を追加する.

ルートディレクトリの下に.jshintrcファイルを新規作成して構成します.各プロジェクトには異なるプロファイルがあり、どこでもjshintを使用するとディレクトリツリーのプロファイルが使用されます.

package.jsonのjshintConfigパラメータの下に構成を追加します..jshintrcファイルに構成されている効果と一致します.

"jshintConfig": {
    "undef": true,
    "unused": true,
    "predef": [
      "module",
      "console",
      "node"
    ]
},

インラインモード
以上のコンフィギュレーション・スキームは、1つのプロジェクトのすべてのJavaScriptコードについて同じテストを行い、グローバル・コンフィギュレーション・スキームです.もう1つのスキームは、各ファイルをインラインすることで、いくつかの特殊なJavaScriptファイルをカスタマイズすることができます.

ファイルヘッダは、

/* jshint undef:true, unused: true */
/* globals MY_GLOBAL */

にインラインされ、このファイルのみがテストされる.

は、jshint ignore:startとignore:endの間のすべてのコードがJSHintによって無視されることを無視する.

構成&ルール・オプション
多くの文章が配置を分析しているが,ここでは後述しない.

JSHint構成項目説明(中国語)

JSHint Options(英語)

Nodeプロジェクト規則構成

//        
/* jshint ignore:start */
//        
/* jshint ignore:end */

jscs
jscsは使いやすいコードスタイル検出ツールで、すでに構成されているコードスタイルも含まれています.同じように、コードを検出するためにより多くのオプションを自分で拡張することができます.
スタート

nodeの環境を保証し、npmを直接使用して

{
  //              
  "undef": true,
  //              
  "unused": true,
  //           
  "curly": true,
  //    es  
  "esversion": 6,
  //        
  "eqeqeq": true,
  //     typeof  
  "notypeof": true,
  //     var    
  "varstmt": true,
  //            
  "funcscope": true,
  //           （       promise  ，        ）
  "maxdepth": 2,
  //       （  3      ）
  "maxparams": 3,
  //             
  "laxcomma": false,
  //        
  "globals": {
    "node": true,
    "console": true,
    "module": true
  }
}

をインストールする.
コンフィギュレーション
グローバル構成
プロジェクトルートディレクトリに.jscsrcプロファイルを作成して、グローバルな検出構成を行います.たとえば、次のようにします.

npm install -g jscs

共通の構成
今最も完全なのは英語のドキュメントだけで、翻訳する時間があります.一般的な構成項目は、jscs rulesという公式ドキュメントを添付しています.

preset:プリセットルールはルールプリセットを行い、公式プリセットjscs presetsは、もちろんローカルの設定テンプレートを追加することもできます.requireCurlyBraces:nullを設定するだけで、すべてのプリセット規則を無効にすることができます.

fix(true|false):スタイルを自動的に修復するかどうか

additionalRules:追加ルールのファイル

{
    //    jquery        
    "preset": "jquery",
    //    requireCurlyBraces   
    "requireCurlyBraces": null
}

excludeFiles:指定ファイルまたはディレクトリのスタイルチェックを無効にし、node_modulesおよび.gitフォルダ

"additionalRules": ["project-rules/*.js"]

をデフォルトで除外します.

file Extensions:ファイルの接尾辞名を検証します.つまり、これらの接尾辞名ファイルのみを検出します.デフォルトは.js

"excludeFiles": ["folder_to_exclude/**", "src/!(bar|foo)"]

です.

extract:追加の埋め込みjsファイルのフォーマットを設定します.一般的には.html,.html,.html,.xhtml

"fileExtensions": [".js", ".jsx"]

です.

maxErrors:エラーが報告される最大数を設定します.デフォルトは50

です.

verbose(true|false):エラーのある情報にルール名

を追加
node-style-guide
もちろんnodeエンジニアとして、最も関心を持っているのはnodeのコードスタイルで、実は公式に推薦されたpresetにはnode_style_guideがありますが、3.0.7バージョンでnode_style_guideを使用したとき、このテンプレートはもう存在しないと間違えて報告しましたので、以下に詳細な書類を提供します.

"extract": ["*.html", "*.htm"]

インライン構成

すべての規則を無効にする

{
    "disallowKeywords": ["with"],
    "disallowKeywordsOnNewLine": ["else"],
    "disallowMixedSpacesAndTabs": true,
    "disallowMultipleVarDecl": "exceptUndefined",
    "disallowNewlineBeforeBlockStatements": true,
    "disallowQuotedKeysInObjects": true,
    "disallowSpaceAfterObjectKeys": true,
    "disallowSpaceAfterPrefixUnaryOperators": true,
    "disallowSpacesInFunction": {
        "beforeOpeningRoundBrace": true
    },
    "disallowSpacesInsideParentheses": true,
    "disallowTrailingWhitespace": true,
    "maximumLineLength": 80,
    "requireCamelCaseOrUpperCaseIdentifiers": true,
    "requireCapitalizedComments": true,
    "requireCapitalizedConstructors": true,
    "requireCurlyBraces": true,
    "requireSpaceAfterKeywords": [
        "if",
        "else",
        "for",
        "while",
        "do",
        "switch",
        "case",
        "return",
        "try",
        "catch",
        "typeof"
    ],
    "requireSpaceAfterLineComment": true,
    "requireSpaceAfterBinaryOperators": true,
    "requireSpaceBeforeBinaryOperators": true,
    "requireSpaceBeforeBlockStatements": true,
    "requireSpaceBeforeObjectValues": true,
    "requireSpacesInFunction": {
        "beforeOpeningCurlyBrace": true
    },
    "requireTrailingComma": {
        "ignoreSingleLine": true
    },
    "requireEarlyReturn": true,
    "validateIndentation": 2,
    "validateLineBreaks": "LF",
    "validateQuoteMarks": "'"
}

特定のルールを無効にする

// jscs:disable
//               
// jscs:enable

単一行に対する特定の規則無視

// jscs:disable requireCurlyBraces
//         requireCurlyBraces        
// jscs:enable requreCurlyBraces

ESLint
では、上の2つのそれぞれの長所のあるツールを紹介した後、発売されて間もなく、彼らの長所を集めたツールを紹介します.
スタート

nodeの環境を保証し、npmを直接使用して

if (x) y(); // jscs: ignore requireCurlyBraces

をインストールする.
コンフィギュレーション
新規構成

npm install -g eslint

ここでは、自分で構成するか、流行のコードスタイルモジュールを使用するかを選択できます.
共通の構成
ESLintの公式サイトは配置の紹介があって、こちらはいくつかのよく使う配置だけを紹介して、詳しいのはESLint Configurationを見ることができます

env:jsコードの実行環境を指定し、esバージョン

$ eslint --init

extends:一連のコアモジュールを含み、よくある問題を報告することができ、一般的には下のように

env: {
   node: true,
   es6: true
}

を設定します.

rules:有効なルールとそれぞれのエラーレベル

globals:使用するグローバル変数を示します.設定変数はtrueが書き換えを許可するか、falseが書き換えを許可しないかに等しいです.

extends: 'eslint: recommended'

インライン構成
前の2つのツールと同様に、ESLintもインライン構成をサポートしており、使用方法も非常に似ています.ここでは、Disabling Rules with Inline Commentsを参照してください.
ルール＃ルール＃
多くの前人がルールドキュメントの大部分を翻訳していますが、ここでは説明しません.詳細についてはEslintルールの説明を参照してください.
ルールは一般的にフォーマットrule: [{error-level, error-option}]を使用し、最初のパラメータはルールのエラーレベルを表します.offまたは0は閉じたルールを表します.warnまたは1はオープンルールを表し、警告レベルのエラーを使用して、プログラムの終了を招くことはありません.Errorまたは2はオープンルールを表し、エラーレベルのエラーを使用すると、プログラムが終了します.
node構成

globals: {
    var1: true,
    var2: false
}

最後に書く
これらのツールをテストするのに1日かかりましたが、生態環境からでも使用体験からでもESLintをお勧めします.例えばReactコードの検出サポートでは、ESLintはプラグインテストを使用することができ、非常に便利です.また、カスタマイズの度合いや拡張性にも優れています.他のツールより運転速度がやや遅いですが、このような一体化の体験は素晴らしいです.だから思う存分使いましょう.後でgulp対ESLintの統合を更新します.

Three.js-100行javascriptコードで都市を作成

pythonの5つの異常処理メカニズム