Javascript筆記(五)のコード規範

前書き:なぜコード仕様が必要ですか?
コード規範の意味
ECMAScriptの中で、すべてのコードは語句で構成されています.ステートメントは、実行中のフロー、限定および約束を示し、形式的には、単一の行のステートメントまたはペアの大拡張された{}の複合文とすることができ、構文記述では、複合文全体は、単一の行のステートメントとして処理することができる.
JavaScriptコード規範検証ツール
1、種類紹介
JavaScriptの中には以下のようなコード規範検証ツールがあります.

JSLint:古くて、配置不可、拡張不可、多くの特性のチェックを無効にしてはいけません.

JSHint:設定可能なJSLintのバージョン.

JSCS:コード・スタイルチェックは、潜在的なバグやエラーではなく、コード・フォーマットに関する問題のみをキャプチャし、ESLINEと

をマージしました.

ESLINE:拡張しやすく、カスタムルールができ、プラグイン形式でより多くのルールをインストールできます.

2、JSLint——JavaScriptの文法規範を検出する
2.1、JSLint概要と設置
先端JavaScriptの中にJSLintといういいツールがあります.コードの規範化、圧縮JS、CSSなどを検出できます.JavaScript検証ツールでもあります.位置を間違えて、基本的なマニュアルが守られていることを確認する時にとても役に立ちます.
NodeJSをインストールすれば、以下のようにJSLintをインストールすることができます.

npm install -g jslint

JSLintを使うjslint spa.jsまたは、GrauntまたはGulpを使用してコマンドラインで直接運転し、package.jsonに追加します.

"devDependencies": {
    "gulp-jslint": "*",
    "gulp": "^3.6.2"
}

JSLintタスクを定義する

var
    jslint = require('gulp-jslint'),
    gulp = require('gulp');

gulp.task('jslint', function () {
    return gulp.src([
        './controllers/*.js',
        './models/*.js',
        './*.js'
    ]).pipe(jslint({
        node: true,
        nomen: true,
        sloppy: true,
        plusplus: true,
        unparam: true,
        stupid: true
    }));
});

gulp.task('default', ['jslint']);

JSLintの特徴

コードに対するルールは厳しいです.

設定可能なオプションは少ない

です.
2.2、JSLint仕様内容

は、文の末尾としてセミコロンを使用しなければなりません.

関数は、"use strict"の厳密なモードを使用して定義されなければならず、)と{の間にはスペースが必要であり、関数の宣言は、ifのようなブロックには置けず、外部関数の上部に置く必要がある.

は、-、+、=、*、\の後ろにスペース

が現れます.

タブとスペースの混用はできません.

行末に余分なスペースがあってはいけません.

文字列は、ダブルクォーテーション

を使用します.

変数は繰り返し定義できません.

は、===の代わりに==

を使用する.

debugger文

を削除してください.

は、caseまたはbreakの前にbreak

が必要です.

はできるだけ使わないでください.eval()

3、JSHint仕様
3.1、JSHint概要
JSLintは文法的に厳しいので、そんなに厳しくする必要はないと思っている人が多いです.JSLintをベースに、新しいコードチェックツールJSHintを構築してきました.
JSHintの長所は以下の通りです.

構成可能規則

コミュニティの支持度は高いです.

カスタム結果テーブル

3.2、JSHintの配置区分

Engforcing(強調):これらの属性がtrueに設定されている場合、JSHintはコードを厳格にチェックします.例えば、厳格なモードに使うかどうか、変数猫峰式の命名、for-innサイクルにはhashOwnPropertyなどが必要です.

Relaxing(緩和):これらの属性がtrueに設定されていると、JSHintはルールの定義を容認するなど、セミコロンを使用するかどうか、次世代ES文法をサポートするかどうかなどのような場合があります.

Evironments(環境):これらの属性がtrueに設定されている場合、コードが置かれている環境を表します.

globals(グローバル変数):カスタムグローバル変数

3.3、強化

bitwise                     
camelcase                   (camelCase)         (UPPER_CASE)
curly                            {}      
eqeqeq                  === !==  == !=
es3                       ECMAScript 3  
es5                       ECMAScript 5  
forin                  for in     Object.prototype.hasOwnProperty()          
freeze                        ( Array, Date)   
immed                         (function() {}());   (function() {})();
indent                      
latedef                        
newcap                            
noarg                     arguments.caller arguments.callee
noempty                        
nonew                        
plusplus                  ++ –-
quotemark                        
undef                                     
unused                          
strict                    ES5     
trailing                    
maxparams                          
maxdepth                      {}     
maxstatement                  
maxcomplexity                  
maxlen                        

3.4、たるみ

asi          　　　　　      
boss        　　　　　    if，for，while       
debug        　　　　　  debugger  
eqnull       　　　　　  ==null
esnext       　　　     ECMAScript 6
evil            　　　     eval
expr                                           
funcscope                              
globalstrict                    
iterator           　      __iterator__
lastsemic                         
laxbreak                         
laxcomma        　             
loopfunc                         
maxerr        　　　JSHint             
multistr        　　         
notypeof        　　     typeof  
proto                        proto
smarttabs        　      tab space  
shadow            　     shadow
sub            　　　    person[‘name’]
supernew        　      new function() {…} new Object
validthis        　　                  this
noyield        　　　        yield  

3.5、環境

browser              Web Browser (window, document, etc)
browserify           Browserify (node.js code in the browser)
jquery               jQuery
node                 Node.js
qunit                QUnit
typed                Globals for typed array constructions
worker               Web Workers
wsh                  Windows Scripting Host

3.6、グローバル変数

globals: {
      jQuery: true,
      console: true,
      module: true
    }

4、ESLint——ECMAScript文法規範を検出する(重点把握)
1、ESLINEの哲学

ESLINEでは、すべて挿入可能であり、ルールの間で独立しています.

各ルールがゼロでないとオン、ゼロはオフとなります.

ESLintは任意のコードスタイルに傾いていません.デフォルトではすべての設定をオフにします.バンドルされた規則は全部普遍的な

です.
2、どうやって使うか

直接npmを使ってインストールして

を使います.

npm install -g eslint
eslint -init

実行後、いくつかの質問をして、一つを作成します.eslintrcファイルの問題は以下の通りです.what style of indentation do you use?Spaces what quot;tes do you use for strigs?Double What line endings doyou use?Unix Dou require semicolons?No Aree you using ECMAScript 6 feature?Yes Wree will your code run?Node?Browser
検出ファイルは以下のように使います.

eslint xxx.js

glp-eslint方式1を使用して、glp-eslint

をインストールします.

npm install gulp-eslint

2、gulpfile.jsでeslintを呼び出します.

const {src, task} = require('gulp');
const eslint = require('gulp-eslint');

task('default', () => {
    return src(['scripts/*.js'])
        // eslint() attaches the lint output to the "eslint" property
        // of the file object so it can be used by other modules.
        .pipe(eslint())
        // eslint.format() outputs the lint results to the console.
        // Alternatively use eslint.formatEach() (see Docs).
        .pipe(eslint.format())
        // To have the process exit with an error code (1) on
        // lint error, return the stream and pipe to failAfterError last.
        .pipe(eslint.failAfterError());
});

//   
gulp.src(['**/*.js','!node_modules/**'])
	.pipe(eslint({
		rules: {
			'my-custom-rule': 1,
			'strict': 2
		},
		globals: [
			'jQuery',
			'$'
		],
		envs: [
			'browser'
		]
	}))
	.pipe(eslint.formatEach('compact', process.stderr));

ESListの配置
ESLintの配置は全部.eslintrcファイルに書いてあります.
1、指定環境
1.1、ES 6構文とJSXをサポートするように言語を指定します.ecmaFeatures属性のすべての構文解析器はparser包で、デフォルトの使用はnpmです.公式の推奨はEspree、Esprima、Esprima-FB、Babel-ESLint、Babel-ESLint.env:{es6:true}は自動的にES 6をサポートしてもいいです.Babel-ESLintを専用に書く必要はありません.ecmaFeaturesはコードを先にES 6に変更しますので、ES 5にないすべての属性は依然としてenv属性に1.3を設定してください.指定環境は.eslintrc属性に書いてもいいし、必要なすべての特定ファイルに書いてもいいです.1.4、カスタムプラグインpluginファイルの中の.eslintrc属性に書いてあります.第三者プラグインを使用する前にインストールしてください.標準プラグインはインストールする必要がありません.
2、グローバル変数を指定するglobalファイルに書かれている.eslintrc属性のうち、no-undefによってエラーが発生しないようにします.
3、指定ルール
3.1、ルールの値
値
意味
0
ルールを閉じる
1
失敗しました.警告します.
2
失敗に戻ります.
ルールがあります.値以外に、もっと多く注文できます.
3.2、プラグインを設定したい自分のルール

{
    "plugins": [
        "plugin1"
    ],
    "rules": {
        "eqeqeq": 0,
        "curly": 2,
        "quotes": [2, "double"],
        "plugin1/rule1": 2
    }
}

4、プロファイルについて
4.1、配置が整いましたら、どのように方法を使いますか?一:コマンドラインを使います.

eslint -c myconfig.json mytest.js

方法2:package,jsonと.eslintrcファイルを通して、lintが必要なフォルダの中で、eslintはこの二つのファイルを探して、それから上級ディレクトリに等級をつけて、プロジェクトのルートディレクトリまで探します.
4.2、配置ファイルの積層と等級は、ルートフォルダのpackage.jsonまたはeslintConfigの中の.eslintrcを利用して、内部の.eslintrcと検査されたフォルダの近い構成を利用すると、優先度が高い.同レベルではpackage.jsonの優先度が.eslintrcより高い.
4.3、eslintはどうやって"root": trueを見つけますか?
デフォルトでは、eslintはすべての親フォルダの中に配置ファイルを探して、ルートディレクトリを見つけるまでです.eslintが構成ファイルを探し続けないことを望むなら、このように構成される:.eslintrc4.4、プロファイルの優先度
値
意味
0
行の中に、コメントで書いてあります.
1
コマンドラインの
2
ファイル
4.5、構成ファイルはextendsファイルのextends属性に拡張して書くことができ、同様のモジュール化の効果を達成することができる.たとえば、いくつかの基礎設定は拡張ファイルに書いてもいいです..eslintrcの値は、複数の.eslintrcファイルパスであっても良い.npmをeslintパケットにしても良いし、友達に拡張ファイルを共有してもいいです.拡張機能を書き込みます.
4.6、どのように構成に注釈を書くかpackage.jsonは注釈を書けません.
4.7、検査を無視したファイルとディレクトリはルートディレクトリの下に書いてあります..eslintrcファイルの中で、フォーマットは純粋なテキストのESLINEのために実行する前に、まず.eslintignoreを確認します.最初のグローバル変数だけを見て.eslintignoreとマッチします.
4.8、具体的なルールについて、ここでは多くの関連参考資料を以下のように説明しました.https://eslint.org/docs/user-guide/getting-started https://github.com/adametry/gulp-eslint