JavaScriptコードスタイルチェックツール-JSCS紹介

7868 ワード

validate スタイルガイド qa-tools linter フォーマット

JSCSは時代遅れですので、eslintをおすすめします.
JSHintはJavaScriptコードの中のエラーと潜在的な問題を検出するのに役立ちます.JSCSはJavaScriptのコードスタイルチェックツールです.この2つのQA Toolsを使うことによって、チーム協力の中でコードの正確性、正確性、完全性、簡潔性、統一性及び易読み性を大幅に向上させます.以下、JSCSの基本的な使用を紹介します.
Get Startd
JSCSは150余項検証規則を提供しています.ここでは、jQuery、Airbnb、Googleなどの現在流行しているコードスタイルのガイドを用意しています.プロジェクトに対しても、それを任意に配置してもいいです.使う前に、JSCSをインストールしておきます.
Packages

Atom plugin:https://atom.io/packages/linter-jscs

Brackets Extension:https://github.com/globexdesigns/brackets-jscs

Gunt task:https://github.com/jscs-dev/grunt-jscs/

Glp task:https://github.com/jscs-dev/gulp-jscs/

Overcomit Gigt pre-comit Hook manager:https://github.com/brigade/overcommit/

SublimeText 3 Plugin:https://github.com/SublimeLinter/SublimeLinter-jscs/

Syntic VIM Plugin:https://github.com/scrooloose/syntastic/blob/master/syntax_checkers/javascript/jscs.vim/

Web Essentials for Visual Studio 2013:https://github.com/madskristensen/WebEssentials2013/

IntelliJ IDEA、RubyMine、WebStorm、PyCharm plugin:https://www.jetbrains.com/webstorm/help/jscs.html

プレス
JSCSをインストールしたら、いくつかの設定が必要です.一番簡単な方法は以下の要約の予備オプションを使うことです.

Airbnb—https://github.com/airbnb/javascript

Crockford-http://javascript.crockford.com/code.html

Google-https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

Gunt-http://gruntjs.com/contributing#syntax

jQuery-https://contribute.jquery.org/style-guide/js/

MDCS-https://github.com/mrdoob/three.js/wiki/Mr.doob's-Coode-Style™

node-style-guide-https://github.com/felixge/node-style-guide

Wikimedia-https://www.mediawiki.org/wiki/Manual:Coding_conventions/JavaScript

WordPress-https://make.wordpress.org/core/handbook/coding-standards/javascript/

Yandex-https://github.com/yandex/codestyle/blob/master/javascript.md

プロジェクトのルートディレクトリに.jscsrc構成ファイルを作成して、設定規則を変更または無効にします.

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

Tips:一部のエディタは再起動してから.jscsrcの変更が有効になります.
Options
JSCSはいくつかのオプションを提供しています.必要に応じて設定できます.

additional Rules(追加規則)

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

preset(プリセットルールでルール設定)

            ："airbnb", "crockford", "google", "jquery", "mdcs", "node-style-guide", "wikimedia", "wordpress", "yandex".

                

    "preset": "jquery"
    "preset": "./path-to-your-preset"
    
    // If your preset called "jscs-your-preset-node_modules-path"
    // You can either define full name or omit "jscs-" prefix -
    "preset": "your-preset-node_modules-path"

               null   false      ：

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

exclude Files(指定ファイルまたはディレクトリに対してスタイルチェックを無効にする)

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

     `node_modules`

fileExtensions(検証ファイルの拡張子)

//     '.js'   '.jsx'       ，      '*'          
"fileExtensions": [".js", ".jsx"]

     `.js`

maxErrrors(エラーレポートの最大数設定)

"maxErrors": 10

  ：`50`

esnext(実験的に、babler-jscs解析ES 6+、JSXおよびFlowを使ってみよう)

"esnext": true

es 3(ES 3予約ワードを使う)

"es3": true

verbose(間違った情報のためにルール名を追加)

"verbose": true

  ：`false`

error Filter(エラーを報告するかどうかを判定するフィルタ関数)

"errorFilter": "path/to/my/filter.js"

  ：`false`

    [           。](https://github.com/jscs-dev/node-jscs/wiki/Error-Filters)

Err Suppresion
ある時、JSCSの厳密な検証ルールに耐えられないかもしれません.これらのエラーメッセージをどのように押さえつけますか?
Diabling a Rule.jscsrc構成ファイルで任意のルールを変更または無効にしてもいいです.

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

Inline Comments
JSCSは2つの注釈方式をサポートしています.ルールを無効または再起動します.ファイルの上部にJSCS注釈を置くと、ファイル全体のルールチェックを無効にすることができます.

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

// jscs: disable
// jscs: enable

これらを使って様々な方法で規則を無効にすることもできます.

すべてのルールvar a=bを無効にします./jscs:disable var c=d;/この行およびその後のすべてのエラーは無視されます./jscs:enabale var e=f;/この行およびその後のすべてのエラーが報告されます.

特定の規則/jscsを無効にします.この行およびその後のすべてのrequire Curl yBracesエラーは無視されます./jscs:enable require CuryBraces if(z)a()//この行およびその後のすべてのエラーは、require CuriryBracesエラーを含めて報告されます.

特定のルールを無効にして、単一の行に対して特定のルールを無視します.

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

は特定のルールを無効にした後、すべてのルールを有効にしてもいいです.このルールは再び有効にします.

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

   // jscs:enable
   if (z) a(); //               requireCurlyBraces

複数のルールを同時に無効にして、徐々にそれらを有効にしてもいいです.

   // jscs:disable requireCurlyBraces, requireDotNotation
   if (x['a']) y(); //           requireCurlyBraces   requireDotNotation        

   // jscs:enable requireCurlyBraces
   if (z['a']) a(); //               requireDotNotation        ，  requireCurlyBraces       

   // jscs:enable requireDotNotation
   if (z['a']) a(); //

Javascriptはprototypeを使います.プロト.継承を実現し、簡潔に0汚染する.