Eslint静的コード検出ツール

ESLintは当初、Nicholas C.Zakasが2013年6月に創設したオープンソースプロジェクトである.プラグイン化されたjavascriptコード検出ツールを提供することを目的としています.jshintに比べて顕著な特徴は、プラグインの拡張をサポートすることです.また、jsx構文をサポートすることです(jshintはjsxをサポートしていません.react開発の古いエラーも頭が痛いです.
コマンドライン
具体的には、ここで転送ゲートまたはeslint−hを参照することができ、ここではいくつかの一般的なものが与えられる.
インストール
npmを使ってインストールして、npmの点がここにありませんhttps://www.npmjs.com/

npm i -g eslint

構成の生成

eslint --init
//       eslint  。

eslintの実行

eslint [options] [file|dir|glob]*

//eslint file1.js file2.js
//eslint lib/**
//eslint "lib/**" glob      

Eslint構成
構成には、次の方法があります.

はコードファイルで直接定義され、JavaScript注釈を使用して構成情報を1つのファイルに直接埋め込む.

.eslintrc(jsonまたはYAML)または.eslintrc.yml(YAML)または.eslintrc.js(javascript)または.eslintrc.json(JSON)を使用する.

package.jsonにeslintConfigフィールドを追加します.

jshintと同様に検出ファイルを無視する構成.eslintignoreがあります.Eslintrcは、検出されたファイルの階層からプロファイルを探しますが、検出ファイルに最も近いファイルの優先度が最も高く、親の構成が上書きされます.ルートディレクトリの構成には、次のものが一般的に追加されます.

# YAML
root: true

ESLintは、プロファイルに「root」:trueがあることを発見すると、親ディレクトリでの検索を停止します.プロジェクト内にプロファイルがない場合は、システム~/.eslintrcでカスタマイズしたデフォルトの構成に戻ります.
構成できる情報はたくさんあります.

Environments-スクリプトの実行環境を指定します.各環境には、特定の事前定義されたグローバル変数のセットがあります.

Globals-実行中にスクリプトがアクセスする追加のグローバル変数.

Rules-使用可能なルールおよびそれぞれのエラー・レベル.

簡単な例(.eslintrc.yml):

# YAML 
env:
  browser: true
parserOptions: 
  ecmaVersion: 6
  ecmaFeatures:
    jsx: true
globals :
   angular: true 
rules:
  camelcase: 0
  curly: 2
  brace-style: 
    - 2 
    - 1tbs
  quotes: 
    - 2 
    - single
  semi: 
    - 2 
    - always
  space-in-brackets:
    - 2 
    - never
  space-infix-ops: 2

1.parserOptions解析オプション

#YAML
parserOptions: 
  ecmaVersion: 6
  ecmaFeatures:
    jsx: true

parserOptionsプロパティ解析オプションを設定します.使用可能なオプションは次のとおりです.

ecmaVersion-3,5(デフォルト)、6、7または8に設定して、使用するECMAScriptバージョンを指定します.2015(同6)、2016(同7)、または2017(同8)年ネーミング

に指定することもできます.

sourceType-「script」(デフォルト)または「module」(コードがECMAScriptモジュールの場合)に設定します.

ecmaFeatures-使用したい追加の言語プロパティを示すオブジェクトです.

globalReturn-グローバルな役割ドメインでreturn文

を使用できます.

impliedStrict-ecmaVersionが5以上の場合、グローバルstrict modeを有効にする

jsx-JSX

の有効化

experimentalObjectRestSpread-実験的object rest/spread propertiesのサポートを有効にします.(重要:これは実験的な機能であり、将来的には明らかに変わる可能性があります.この機能に依存しないことをお勧めします.変更が発生した場合、メンテナンスコストを負担しない限り.)

2.env環境グローバル変数

# YAML
env:
  browser: true

環境は、定義済みのグローバル変数を定義します.使用可能な環境は次のとおりです.

browser-browserグローバル変数.

node-Node.jsグローバル変数およびNode.js役割ドメイン.

commonjs-CommonJSグローバル変数およびCommonJS役割ドメイン(Browserify/WebPackで書かれたブラウザのみをサポートするコード).

shared-node-browser-NodeおよびBrowser汎用グローバル変数.

es 6-モジュール以外のすべてのECMAScript 6プロパティをサポートします(ecmaVersion解析オプションは6に自動的に設定されます).

worker-web workersグローバル変数.

amd-amdのようなグローバル変数としてrequire()とdefine()を定義します.

mocha-すべてのMochaテストグローバル変数を追加します.

jasmine-Jasmineバージョン1.3および2.0のすべてのテストグローバル変数を追加します.

jest-Jestグローバル変数.

phantomjs-PhantomJSグローバル変数.

protractor-Protractorグローバル変数.

qunit-QUnitグローバル変数.

jquery-jQueryグローバル変数.

prototypejs-Prototype.jsグローバル変数.

shelljs-ShellJSグローバル変数.

meteor-Metorグローバル変数.

mongo-MongoDBグローバル変数.

applescript-AppleScriptグローバル変数.

nashorn-Java 8 Nashornグローバル変数.

serviceworker-Service Workerグローバル変数.

atomtest-Atomグローバル変数をテストします.

embertest-Emberグローバル変数をテストします.

webextensions-WebExtensionsグローバル変数.

greasemonkey-GreaseMonkeyグローバル変数.

3.globalsグローバル変数

# YAML
globals :
   angular: true 
   var1: true
   var2: false

未定義の変数にアクセスすると、no-undefルールによって警告が発行されます.1つのファイルでグローバル変数を使用する場合は、これらのグローバル変数を定義することを推奨します.これにより、ESLintは警告を発行しません.コメントを使用するか、プロファイルでグローバル変数を定義できます.
4.pluginsプラグイン
ESLintはサードパーティ製プラグインの使用をサポートします.プラグインを使用する前に、npmを使用してインストールする必要があります.プロファイルにプラグインを構成するには、プラグイン名のリストを含むpluginsを使用します.プラグイン名はeslint-plugin-接頭辞を省略できます.

# YAML
plugins:
    - plugin1
    - eslint-plugin-plugin2

注意:グローバルにインストールされているESLintでは、グローバルにインストールされているプラグインしか使用できません.ローカルにインストールされているESLintでは、ローカルにインストールされているプラグインだけでなく、グローバルにインストールされているプラグインも使用できます.
5.Rulesルール

plugins:
  - plugin1
rules:
  curly: 2
  brace-style: 
    - 2 
    - 1tbs
  quotes: 
    - 2 
    - single
  plugin1/rule1 : error
  #                ，         /  ID    

ESLintには多くのルールが付属しています.コメントまたはプロファイルを使用して、プロジェクトで使用するルールを変更できます.ルール設定を変更するには、ルールIDがこれらの値の1つに等しいように設定する必要があります.

「off」または0-クローズルール

「warn」または1-警告レベルのエラーを使用してルールを開きます:warn(プログラムの終了を招くことはありません)

「error」または2-ルールを開き、エラーレベルのエラーを使用します:error(トリガーされるとプログラムが終了します)

具体的なルールが多すぎます.ここを見てください.
6.共有設定

# YAML
settings:
    sharedData: "Hello"

ESLintは、コンフィギュレーション・ファイルに共有設定を追加することをサポートします.settingsオブジェクトをコンフィギュレーション・ファイルに追加できます.これは、実行される各ルールに提供されます.カスタム・ルールを追加し、同じ情報にアクセスできるようにすると便利で、構成が容易になります.
*行内構成
eslint検出の禁止

//1.        
/* eslint-disable */
alert('foo');
/* eslint-enable */

//.2               
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */

//3.               ,  /* eslint-disable */          

//4.                :
/* eslint-disable no-alert */
// Disables no-alert for the rest of the file

//5.    
alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');

*プロファイルの継承
1つのプロファイルは、基本構成の有効なルールによって継承できます.
1 eslint:recommended
値が「eslint:recommended」のextendsプロパティでは、ルールページにマークされている一般的な問題を報告する一連のコア・ルールが有効になります.この推奨サブセットは、ESLintのプライマリ・バージョンでのみ更新できます.

# YAML
extends: eslint:recommended,
rules : 
  #enable additional rules
  indent: 
    - error
    - 4

2 extend npmパッケージ
継承されるnpmパケットは、構成オブジェクトを出力します.このパケットがESLintで要求できるディレクトリにインストールされていることを確認します.extendsプロパティ値は、パケット名の接頭辞eslint-config-を省略できます.

# YAML
extends: standard
rules:
  comma-dangle:
    - error
    - always
  no-empty: warn

3 plugins npmパッケージ
一部のプラグインでは、1つ以上の名前付き構成を出力することもできます.このパッケージがESLintで要求できるディレクトリにインストールされていることを確認します.plugins属性値は、パッケージ名の接頭辞eslint-plugin-を省略できます.extends属性値は、次のように構成できます.

plugin:

パケット名(接頭辞は省略、例えばreact)

/

構成名(recommendedなど)

# JSON
{
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "rules": {
       "no-set-state": "off"
    }
}

4構成ファイルの継承
extendsプロパティ値は、基本プロファイルの絶対パスまたは相対パスです.

{
    "extends": [
        "./node_modules/coding-standard/eslintDefaults.js",
        "./node_modules/coding-standard/.eslintrc-es6",
        "./node_modules/coding-standard/.eslintrc-jsx"
    ],
    "rules": {
        "eqeqeq": "warn"
    }
}

リファレンスhttp://eslint.cn/http://eslint.org/docs https://csspod.com/getting-started-with-eslint/