ホームページ > 記事 > ウェブフロントエンド > 初心者向け EsLint について知っておくべきこと

初心者向け EsLint について知っておくべきこと

php中世界最好的语言オリジナル: 2018-05-24 14:05:323770ブラウズ

今回は、EsLint の初心者が EsLint を始めるにあたって知っておくべき注意事項をご紹介します。実際の事例をいくつか紹介しますので、一緒に見ていきましょう。

はじめに

ESLintはプラグインjavascriptコード検出ツールで、一般的なJavaScriptコードエラーをチェックするために使用でき、コードスタイルチェックも実行できます。あなたは、一連の ESLint 設定を指定し、作成したプロジェクトにそれらを適用して、補助的なコーディング標準の実行を実現し、プロジェクトコードの品質を効果的に管理したいと考えています。

インストール

ESLint インストール: ローカルインストール、グローバルインストール

1、ローカルインストール

$ npm install eslint --save-dev

設定ファイル

$ ./node_modules/.bin/eslint --init

を生成した後、次のように任意のファイルまたはディレクトリで ESLint を実行できます:

$ ./node_modules/.bin/eslint index.js

index。 js は、テストする必要がある js ファイルです。使用するプラグインまたは共有構成 (ローカルにインストールされた ESLint と連携するには、ローカルにインストールする必要があります)。

2. グローバルインストール

ESLint をすべてのプロジェクトで利用できるようにしたい場合は、ESLint をグローバルにインストールすることをお勧めします。

$ npm install -g eslint

設定ファイル

$ eslint --init

を生成した後、任意のファイルまたはディレクトリでESLintを実行できます

$ eslint index.js

追記: eslint --initは各プロジェクトでeslintのセットアップと設定に使用され、ローカルにインストールされたESLintを実行します。とそのプラグインのディレクトリ。グローバルにインストールされた ESLint を使用する場合は、構成で使用されるすべてのプラグインをグローバルにインストールする必要があります。

使用

1. プロジェクトのルートディレクトリに package.json ファイルを生成します ( ESLint を構成するプロジェクトには package.json ファイルが必要です。ない場合は、npm init -y を使用して生成できます )

$ npm init -y

2. eslint をインストールします (

インストール方法は個人プロジェクトのニーズに応じてインストールされます。ここではグローバルインストールを使用します)

$ npm install -g eslint

3.index.js ファイルを作成し、その中に関数を記述します。

function merge () {
    var ret = {};
    for (var i in arguments) {
        var m = arguments[i];
        for (var j in m) ret[j] = m[j];
    }
    return ret;
}

console.log(merge({a: 123}, {b: 456}));

nodeindex.jsを実行すると出力結果は{ a: 123, b: 456}

$ node index.js
{ a: 123, b: 456 }

eslintを使って確認

$ eslint index.js

Oops! Something went wrong! :(

ESLint: 4.19.1.
ESLint couldn't find a configuration file. To set up a configuration file for this project, please run:

    eslint --init

ESLint looked for configuration files in E:\website\demo5\js and its ancestors. If it found none, it then looked in your home directory.

If you think you already have a configuration file or if you need more help, please stop by the ESLint chat room: https://gitter.im/eslint/eslint

実行結果は該当する設定ファイルが見つからないので失敗となります。この eslint が最も重要だと思います。これは設定の問題です。

新しい構成ファイルを作成します

  $ eslint --init

生成プロセス中に、生成ルール、サポート環境、その他のコンテンツを選択する必要があります。ここでは私の生成オプションの一部を紹介します

? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? Yes
? Do you use JSX? No
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single
? What line endings do you use? Windows
? Do you require semicolons? No
? What format do you want your config file to be in? JavaScript

生成されたコンテンツは .eslintrc.js ファイルにあります。、ファイルの内容は次のとおりです

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
};

ただし、生成されたファイルにはすでにいくつかの設定が含まれているため、内部のほとんどの内容を削除します。拡張部分はそのままにして、残りを自分で埋めてください

 module.exports = {
      "extends": "eslint:recommended"
  };

eslint:推奨設定。これには一連のコアルールが含まれており、いくつかの一般的な問題を報告できます。

eslint Index.jsを再実行すると、出力は次のようになります

  10:1  error  Unexpected console statement  no-console
  10:1  error  'console' is not defined      no-undef

✖ 2 problems (2 errors, 0 warnings)

予期しないコンソールステートメント no-console --- コンソールを使用できません

'console' が定義されていません no-undef --- コンソール変数が定義されていません未定義の変数は使用できません
コンソールプロンプトが使用できない場合は、コンソールなしを無効にして、設定ファイルにルールを追加できます

module.exports = {
    extends: 'eslint:recommended',
    rules: {
        'no-console': 'off',
    },
};

設定ルールはルールオブジェクトに記述され、キーはルールを表します。名前、値はルールの構成を表します。

次に、no-undef に対する解決策があります。エラーの理由は、JavaScript にはブラウザや Node.js などの多くの実行環境があるためです。また、PostgreSQL など、JavaScript をスクリプトエンジンとして使用するソフトウェアシステムも数多くあります。 JavaScript を使用してストレージエンジンを作成すると、これらのオペレーティング環境にはコンソールオブジェクトが存在しない可能性があります。さらに、ブラウザ環境には
window オブジェクトがありますが、Node.js にはありません。Node.js にはプロセスオブジェクトがありますが、ブラウザ環境にはありません。そのため、設定ファイルでプログラムのターゲット環境を指定する必要もあります:

module.exports = {
    extends: 'eslint:recommended',
    env: {
        node: true,
    },
    rules: {
        'no-console': 'off',
    }
};

チェックが再度実行されると、index.js がチェックに完全に合格したことを示すプロンプト出力は表示されません。

設定

設定方法には、ファイル設定方法とコードコメント設定方法の2つがあります(

比較的独立していてメンテナンスが容易なファイル設定形式を使用することをお勧めします

)。

ファイル構成を使用する: プロジェクトのルートディレクトリに .eslintrc という名前の新しいファイルを作成し、このファイルにいくつかのチェックルールを追加します。ファイル設定方法

env: スクリプトはどの環境で実行されますか?

環境は、ブラウザー、ノード環境変数、es6 環境変数、mocha 環境変数など、他の環境のグローバル変数を事前設定できます。

'env': {
    'browser': true,
    'commonjs': true,
    'es6': true
},

globals :追加のグローバル変数

globals: {
    vue: true,
    wx: true
},

ルール: オープンルールとエラー発生時に報告されるレベル

ルールには 3 つのエラーレベルがあります:

0或’off’：关闭规则。 
1或’warn’：打开规则，并且作为一个警告（并不会导致检查不通过）。 
2或’error’：打开规则，并且作为一个错误 (退出码为1，检查不通过)。

参数说明： 
参数1 ： 错误等级 
参数2 ： 处理方式

設定コードのコメントメソッド

JavaScript コメントを使用して、設定情報をファイルに直接埋め込みます

例:

忽略 no-undef 检查 
/* eslint-disable no-undef */

忽略 no-new 检查 
/* eslint-disable no-new */

设置检查 
/*eslint eqeqeq: off*/ 
/*eslint eqeqeq: 0*/

多くの設定とルールがあります。興味のある学生はここを参照してください: ルール

使用共享的配置文件

我们使用配置js文件是以extends: 'eslint:recommended'为基础配置，但是大多数时候我们需要制定很多规则，在一个文件中写入会变得很臃肿，管理起来会很麻烦。

新建一个文件比如eslint-config-public.js，在文件内容添加一两个规则。

module.exports = {
    extends: 'eslint:recommended',
    env: {
        node: true,
    },
    rules: {
        'no-console': 'off',
        'indent': [ 'error', 4 ],
        'quotes': [ 'error', 'single' ],
    },
};

然后原来的.eslintrc.js文件内容稍微变化下，删掉所有的配置，留下一个extends。

module.exports = {
    extends: './eslint-config-public.js',
};

这个要测试的是啥呢，就是看看限定缩进是4个空格和使用单引号的字符串等，然后测试下，运行eslint index.js，得到的结果是没有问题的，但是如果在index.js中的var ret = {};前面加个空格啥的，结果就立马不一样了。

2:1  error  Expected indentation of 4 spaces but found 5  indent

✖ 1 problem (1 error, 0 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.

这时候提示第2行的是缩进应该是4个空格，而文件的第2行却发现了5个空格，说明公共配置文件eslint-config-public.js已经生效了。

除了这些基本的配置以外，在npm上有很多已经发布的ESLint配置，也可以通过安装使用。配置名字一般都是eslint-config-为前缀，一般我们用的eslint是全局安装的，那用的eslint-config-模块也必须是全局安装，不然没法载入。

在执行eslint检查的时候，我们会经常看到提示“--flx”选项，在执行eslint检查的时候添加该选项会自动修复部分报错部分（注意这里只是部分，并不是全部）

比如我们在规则中添加一条no-extra-semi: 禁止不必要的分号。

'no-extra-semi':'error'

然后，我们在index.js最后多添加一个分号

function merge () {
    var ret = {};
    for (var i in arguments) {
        var m = arguments[i];
        for (var j in m) ret[j] = m[j];
    }
    return ret;;
}

console.log(merge({a: 123}, {b: 456}));

执行eslint index.js，得到结果如下：

  7:16  error  Unnecessary semicolon  no-extra-semi
  7:16  error  Unreachable code       no-unreachable

✖ 2 problems (2 errors, 0 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.

然后我们在执行eslint index.js --fix就会自动修复，index.js那个多余的分号也就被修复消失不见了。

总结

以上是我在学习eslint整理的一些资料，不算太全面，对于像我这样的新手入门足够了

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！