Webpack での eslint 構成の使用 (詳細なチュートリアル)

この記事では、webpack によって導入された eslint 設定の詳細な説明を主に紹介します。

webpack で eslint を使用する

まず、webpack で eslint をサポートするには、eslint-loader をインストールする必要があります。コマンドは次のとおりです:

npm install --save-dev eslint-loader

webpack.config.js に次のコードを追加します:

{
  test: /\.js$/,
  loader: 'eslint-loader',
  enforce: "pre",
  include: [path.resolve(__dirname, 'src')], // 指定检查的目录
  options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine 
    formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
  }
}

注: フォーマッタのデフォルトはスタイリッシュです。サードパーティのプラグインを使用したい場合は、上記の例の eslint-friends-formatter などのプラグインをインストールできます。

次に、webpack に eslint 機能を持たせたい場合は、eslint をインストールする必要があります。コマンドは次のとおりです:

npm install --save-dev eslint

最後に、プロジェクトでこれらの eslin ルールを使用したい場合は、構成ファイル '.eslintrc.js を作成できます。 '

module.exports = {
  root: true,  
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  rules: {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "no-console": "error",
    "arrow-parens": 0
  }
}

このようにして、eslint への簡単な Webpack 入門が完成しました。

ここでは、eslintrc.js の設定と使用方法について説明します。詳細については、http://eslint.cn/docs/user-guide を参照してください。

eslint の設定項目

1. root は、次の範囲を制限します。設定ファイルの使用

2. parser は eslint パーサーを指定します

3. parserOptions はパーサーのオプションを設定します

4. extends は eslint の仕様を指定します

5. plugins はサードパーティのプラグインを指します

6. 環境コードが実行されるホスト環境を指定します

7. rules 追加のルールを有効にするか、デフォルトのルールをオーバーライドします

8. globals コード内で宣言されたカスタム グローバル変数

eslint を使用する場合、設定内のルール設定項目はファイルは必須ですか？

答えは「はい」です。ただし、ルールをカスタマイズする必要はなく、サードパーティのルールを使用できます。ここでは extends 設定項目を使用します。

拡張

eslint が公式に推奨しているものを使用することも、aribnb、google、standard などの大手企業が提供するものを使用することもできます。

通常、開発にはサードパーティを使用します。

公式推奨

.eslintrc.jsに次のコードを追加するだけです:

extends: 'eslint:recommended',
extends: 'eslint:all',

詳細については、公式ルール表を参照してください

サードパーティ共有

サードパーティ共有を使用する場合は、通常、関連するプラグイン コードをインストールするには、次のようにします。

npm install --save-dev eslint-config-airbnb // bnb
npm install --save-dev eslint-config-standard // standard

.eslintrc.js に次のコードを追加します。

extends: 'eslint:google',
// or
extends: 'eslint:standard',

これらのサードパーティ拡張機能を使用すると、標準の eslint- などのいくつかのプラグインを更新する必要がある場合があります。 plugin-import

パニックにならないでください。エラー プロンプトに従ってください。これらのプラグインを段階的にインストールします。

これらのサードパーティの拡張機能は非常に優れていますが、場合によっては、よりパーソナライズされたルールを定義したり、ルール構成項目を追加したりする必要があります。

設定ルール

.eslintrc.js ファイルにルールを追加します。コードは次のとおりです:

{
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

「semi」と「quotes」は ESLint のルールの名前です。最初の値はエラー レベルで、次の値のいずれかになります:

1. "off" または 0 - ルールをオフにする

2. "warn" または 1 - ルールを警告として扱います (ルールを警告しません)終了コードに影響を与える)

3. "error" または 2 - ルールをエラーとして扱います (終了コードは 1)

これらのルールは通常 2 つのカテゴリに分類されます:

1. デフォルトに見つからないものを追加しますまたはサードパーティのライブラリ

2. デフォルトまたはサードパーティのライブラリをオーバーライドします

プロジェクトには、html、vue、react などの形式指定が必要な他のファイルがいくつかある場合があります。これらのファイルについては、サードパーティのプラグインを導入する必要があります。

plugins (html)

次のコマンドを使用して eslint-plugin-html をインストールします:

npm install --save-dev eslint-plugin-html

このプラグインは、ブラウザ共有グローバル変数の動作をシミュレートするようにモジュール スクリプトに通知します。これはモジュール スクリプトには適用されないためです。

このプラグインは、.vue、.jsx

.eslintrc.js などのファイルを拡張することもできます。次の構成項目を追加します:

settings: {
  'html/html-extensions': ['.html', '.vue'],
  'html/indent': '+2',
},

eslint-pulgin-html で拡張されたそのようなファイルの場合、eslint を使用できます--ext .html,.vue src を検出用に記述します。開発中に書き込み中に検出したい場合は、対応するファイルのローダーを使用して処理できます。次に、npm run dev を実行して機能を実現します。書き込み中にチェックする機能。

開発中に、必要に応じて同じプロジェクトの異なるディレクトリにある異なる .eslintrc.js ファイルを使用することがあります。この場合、構成アイテムのルートを使用する必要があります。

使用範囲が制限されています (root: true)

異なるディレクトリで異なる .eslintrc を使用したい場合は、ディレクトリに次の設定項目を追加する必要があります:

{
  "root": true
}

設定しない場合は、更新されたディレクトリに到達するまで検索が続行されます。更新されたディレクトリに設定ファイルがある場合は、ルート ディレクトリが使用されます。これにより、現在の設定ディレクトリの設定が機能しなくなります。

開発では、状況に応じて異なるパーサーを使用する必要がありますが、私たちがよく使用するのは babel-eslint です。

パーサー (パーサーを指定)

babel-eslint 解析器是一种使用频率很高的解析器，因为现在很多公司的很多项目目前都使用了es6，为了兼容性考虑基本都使用babel插件对代码进行编译。而用babel编译后的代码使用 babel-eslint 这款解析器可以避免不必要的麻烦。

babel-eslint 安装命令：

npm install --save-dev babel-eslint

在 .eslintrc.js 配置文件中添加如下配置项代码：

parser: 'babel-eslint',

如果你使用的默认解析器的话，且在代码中使用了浏览器有兼容性的问题的js新特性，使用webpack编译就会出现问题，这时我们一般装最新的eslint或者安装是使用 babel-eslint 来解决问题。

env（环境）

在 .eslintrc.js 中添加如下代码：

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

指定了环境，你就可以放心的使用它们的全局变量和属性。

global

指定全局变量。

在 .eslintrc.js 中添加如下代码：

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在JS中如何改变单物体透明度

在JS中如何实现通过拖拽改变物体大小

在vue中使用cli如何实现重构多页面脚手架

以上がWebpack での eslint 構成の使用 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。