Eslintの使用

ESlintは完全に構成可能に設計されています.これは、各ルールを閉じて基本構文検証のみを実行したり、ESLintのデフォルトバインドのルールとカスタムルールを混合してマッチングしたりして、ESLintがプロジェクトに適していることを意味します.ESLintを構成するには、2つの主要な方法があります.
1-eslintのインストール

npm i -g eslint

足場ツールvue-cliまたはdev-cliで構築されたプロジェクトを使用すると、eslintを構成するファイルが自動的に生成されます.名前は.eslintrc.*です.
2-eslintの構成
方法1:コンフィギュレーションComments-JavaScriptコメントを使用して、構成情報をコードソースファイルに直接埋め込みます.
方法2:Configuration Files-JavaScript、JSON、またはYAMLファイルを使用して、ディレクトリ全体(メインディレクトリの処理)とそのサブディレクトリの構成情報を指定します.独立した.eslintrc.*ファイルを構成したり、package.jsonファイルのeslintConfigフィールドで直接構成を指定したりすることができます.ESLintはそれらを検索して自動的に読み取ることができます.また、コマンドラインの実行時に任意の構成ファイルを指定することができます.
単純な例:

    module.exports = {
      extends: 'eslint:recommended',
      env: {
        browser: true,
        node: true,
        commonjs: true,
        es6: true,
        mocha: true
      },
      root: true,
      rules: {
        'no-console': 'off'
      }
    }

3-eslintの解析器の構成
次の解析はESLintと互換性があります.

Esprima

Babel-ESLint-Babel解析器のパッケージで、ESLintと互換性があります.

typescript-eslint-parser(実験)-Type ScriptをESTree互換フォーマットに変換する解析器で、ESLintで使用できます.この目的は、TypeScriptファイルをESLintで解析することです(必ずしもすべてのESLintルールを通過しなければならないわけではありませんが).

たとえば、以前プロジェクトで使用していたbabel-eslint:

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "no-plusplus": [0],
    "no-console": [0],
    "class-methods-use-this": [0],
    "react/forbid-prop-types": [1, { "forbid": ["any"] }],
    "react/no-unused-prop-types": [0],
    "react/prefer-stateless-function": [0],
    "jsx-a11y/no-static-element-interactions": [0]
  },
  "env": {
    "browser": true
  },
  "globals": {
    "fetch": true
  }
}

ESLintのデフォルトでは、Espreeを解析器として使用します.この解析器が次の要件を満たす限り、プロファイルに異なる解析器を指定できます.

ローカルにインストールされているnpmモジュールである必要があります.

Esprima対応インタフェース(parse()メソッドを出力する必要がある)

が必要です.

Esprima対応ASTオブジェクトとtokenオブジェクトを生成する必要があります.

4-環境の指定
環境は、事前定義されたグローバル変数のセットを定義します.使用可能な環境は次のとおりです.

browser -            。

node - Node.js       Node.js    。

commonjs - CommonJS       CommonJS     (   Browserify/WebPack               )。

shared-node-browser - Node.js   Browser       。

es6 -      modules       ECMAScript 6   （         ecmaVersion        6）。

worker - Web Workers     。

amd -   require()   define()      amd        。

mocha -       Mocha       。

jasmine -       Jasmine    1.3   2.0        。

jest - Jest     。

phantomjs - PhantomJS     。

protractor - Protractor     。

qunit - QUnit     。

jquery - jQuery     。

prototypejs - Prototype.js     。

shelljs - ShellJS     。

meteor - Meteor     。

mongo - MongoDB     。

applescript - AppleScript     。

nashorn - Java 8 Nashorn     。

serviceworker - Service Worker     。

atomtest - Atom       。

embertest - Ember       。

webextensions - WebExtensions     。

greasemonkey - GreaseMonkey     。

.eslintrc.*ファイルで設定:
ソースファイル、プロファイル、またはコマンドラインの–envオプションを使用して環境を指定できます.
プロファイルに環境を指定するには、envキーを使用して有効にする環境を指定し、trueに設定します.たとえば、次の例ではbrowserとNode.jsが有効な環境を示します.

{
    "env": {
        "browser": true,
        "node": true
    }
}

package.jsonファイルで設定:

{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "node": true
        }
    }
}

特定のプラグインで環境を使用する場合は、plugins配列にプラグイン名が事前に指定されていることを確認し、env構成で接頭辞のないプラグイン名の後に環境名が続く/を指定します.例:
.eslintrc.*ファイルで設定:

{
    "plugins": ["example"],
    "env": {
        "example/custom": true
    }
}

package.jsonファイル

    {
        "name": "mypackage",
        "version": "0.0.1",
        "eslintConfig": {
            "plugins": ["example"],
            "env": {
                "example/custom": true
            }
        }
    }

5-環境の指定
現在のソースファイル内で定義されていない変数にアクセスすると、no-undefルールが警告します.ソースファイルでグローバル変数を使用したい場合は、ESLintでこれらのグローバル変数を定義することをお勧めします.これにより、ESLintは警告を発行しません.コメントを使用するか、プロファイルでグローバル変数を定義できます.
たとえば、プロファイルでグローバル変数を構成する場合、globalsを使用して使用するグローバル変数を指定します.変数をtrueに設定すると、変数の書き換えが許可されるか、falseは書き換えが許可されません.例:

    {
        "globals": {
            "var1": true,
            "var2": false
        }
    }

6-構成規則
ESLintには多くのルールが付属しています.コメントまたはプロファイルを使用して、プロジェクトで使用するルールを変更できます.ルール設定を変更するには、ルールIDを次のいずれかの値に設定する必要があります.

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

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

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

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}

プラグイン内のルールを定義する場合は、プラグイン名/ルールIDの形式を使用する必要があります.例:

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