English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験の記録
  4. 本文

EsLintの入門学習チュートリアル

紹介

ESLintはJavaScriptの赤い本の作者、Nicholas C. Zakasによって書かれています。 2013 年に最初のバージョンをリリースしました。NCZの意図は新しい車輪を作ることではなく、JSHintチームからの対応が得られない状況で、拡張可能、各ルールが独立しており、コーディングスタイルを内蔵しない理念でlintツールを書いた選択でした。

公式アドレス：http://eslint.org/

EsLintはJavaScriptのプログラミング中の構文エラーを確認帮助我们します。例えば、JavaScriptアプリケーションでは、漏れた変数やメソッドを見つけることが難しいです。EsLintはJSコードを分析し、バグを見つけ、ある程度のJS構文の正確性を確保帮助我们します。

EsLintはEsprima（ECMAScriptの解析アーキテクチャ）に基づいています。EsprimaはES5.1それ自体もECMAScriptで書かれており、多目的の分析に使用されます。EsLintはデフォルトのルール（拡張可能）を提供し、書いたJavaScriptコードを制約するユーザー定義ルールも提供します。

EsLintは以下のようなサポートを提供しています：

  • ES6
  • AngularJS
  • JSX
  • スタイルチェック
  • カスタムエラーと通知

EsLintは以下のような確認を提供しています：

  • 構文エラーの確認
  • 重要でないまたは失われた記号、例えば分号
  • 実行されないコードブロック（WebStormを使用したことがある方もいらっしゃるでしょう）
  • 未使用の引数の提醒
  • 終了記号が欠けている場合（WebStormを使用したことがある方もいらっしゃるでしょう）
  • スタイルの一貫性ルールを確保します。例えばsassやless
  • 変数の命名を確認

使用

1、インストール

Npm install gulp-eslint -save-dev

プロジェクトのディレクトリ下で、eslint -initを実行すると.eslintrcのファイルが生成され、ファイルにはいくつかの確認ルールが含まれます。

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

その中で「semi」と「quotes」はルール名です。EsLintはエラーのレベルも提供しており、数字が高いほどエラーの提示が高くなります。例えば、0はコードエラーは提示されません。1警告を提醒しますが、既存のコンパイルに影響を与えません。2エラーはエラーを投げ出します。

"extends": "eslint:recommended"

ExtendsはEsLintのデフォルトで推奨される確認で、必要な確認を選択できる設定を使用できます。ログインしてnpmjs.com確認

二、EsLintのカスタム設定

前述の通り、すべてのEsLintのデフォルトの検証をオフにして、必要な特定の検証ルールを追加することもできます。このため、EsLintは以下を提供しています2以下のような方法で設定できます：

  1. 設定コメント：検証したいファイル内で直接JavaScriptコメントを使用して設定情報を埋め込みます
  2. 設定ファイル：JavaScript、JSON、YAMLファイルを使用して設定を行います、例えば前述の.eslintrcファイルなど、package.jsonファイルにeslintConfigフィールドを追加することもできます、EsLintは自動的に読み取り検証します。

EsLintの使い方を説明します

parserOptions

EsLintはparserOptionsを通じて、検証するECMAのバージョンやECMAの特性を指定することができます

{
 "parserOptions": {
  "ecmaVersion": 6, //ECMAScriptがサポートするバージョンを指定してください6ES6
  "sourceType": "module", //ソースのタイプを指定してください、"script"または"module"があります
  "ecmaFeatures": {
   "jsx": true//JSXを起動
  },
 }
}

Parser

EsLintはデフォルトでesprimaを使用してスクリプトを解析しますが、他のものに切り替えることもできます、例えばbabelに切り替えます-eslintの解析

{
 "parser": "esprima" //デフォルトで、babelに設定できます-eslint、jsxをサポート
}

Environments

Environmentは既に設定された他の環境のグローバル変数、例えばbrowser、nodeの環境変数、es6環境変数、mochaの環境変数など

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

プラグイン内の環境変数を使用したい場合は、以下のようにpluginsで指定できます

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

Globals

使用したいグローバル変数を指定してください、trueはオーバーライズ可能、falseはオーバーライズ不可を意味します

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

Plugins

EsLintはサードパーティープラグインを使用することができます

{
 "plugins": [
  "react" 
  ],
}

Rules

カスタムルール、一般的なフォーマット：”ルール名”:エラーレベル係数。係数0は非通知（off）です。1警告（warn）、}}2エラー（error）を投げ出す場合、範囲を指定できます（例えば、[1,4],

厳密なモード、またはコードの方法で通知することもできます（例えば、シンボルなど）。また、サードパーティの確認（例えば、react）もできます。

デフォルトの確認先http://eslint.org/docs/rules/

{
 "plugins": [
  "react"
 ],
 "rules": {
   //Javascriptコードのデフォルト確認
  "eqeqeq": "off", //off = 0
  "curly": "error", //error = 2
  "quotes": ["warn", "double"], //warn = 1
   //サードパーティプラグインの確認ルールの使用
  "react"/jsx-quotes": 0
 }
}

　　　　　　　　　　　 https://www.npmjs.com/パッケージ/eslint-プラグイン-react、このリンクはreactのeslintの使用方法です

三、Gulpを使用

var eslint = require('gulp',-eslint');
gulp.task('validate',-eslint
 return gulp.src(['app',/**/*.js //指定された確認パス
  .pipe(eslint({configFile: "."));/.eslintrc //あなたのeslintでファイルを確認してください。
  .pipe(eslint.format());
});

まとめ

以上がこの記事の全てです。本文の内容が皆様の学習や仕事に少しでも役立つことを願っています。何かご不明な点があれば、コメントでご意見をお寄せください。

基本教程
おすすめ