あなたのプロジェクトのためにeslintをゼロから構成する方法

Elintは、コードの品質を改善し、事前にバグを修正する前に実行時からそれらを避けるために役立つリンターです.また、将来的にデバッグ問題を回避するのに役立ちます.
ほとんどの企業が積極的にそれを使用しているようにeslintを使用する方法を知って非常に重要です.
また、JSlint、Jinintのような利用可能な他のプリンタがありますが、エスリントは最も広く使用され、人気です.
この記事では、我々はeslintとはどのように使用するかを探る.
始めましょう.
ESPINT警告またはエラーメッセージが表示されます

宣言せずに変数を使う

変数を宣言する

我々は、一定の値を変更しようとする

不要な括弧をつける

間違った構文を使うとき

Eslintは、好ましいコードスタイルと間違った構文に基づく提案も提供します.

Note that ESLint just displays warnings or errors so you can fix them but it does not stop the program from running.

ESLint ウェブサイトは非常によく、よく詳細に各部分を説明する様々なルールや情報に関連する文書です.

インストール

名前で新しいフォルダを作成するeslint-setup このフォルダの中から次のコマンドを実行します.

npm init -y

OR

yarn init -y

これはpackage.json ファイル.
さて、インストールeslint パッケージはdevの依存関係として開発されています.

npm install eslint --save-dev

OR

yarn add eslint --dev

これでeslint エントリーdevDependencies セクションpackage.json ファイル.

基本設定

新しいファイルを作るindex.js あなたのeslint-setup フォルダ内に次の変数宣言を追加し、保存します.

var name;

エラーが表示されません.これは2つのことをする必要があるからです.

コードを拡張する

クリエイト.eslintrcファイル

そうしましょう.
以下に示すように、eslint対code拡張モジュールをインストールします.

新しいファイルを作る.eslintrc ( DotesLinTc )次のコードを使用します.

{
 "extends": "eslint:recommended"
}

これは基本的な推奨ESLINT規則のサポートを追加します.ファイルを保存してindex.js , メッセージを持つ変数の赤い下線が表示されます.

それで、eslintはあなたが決して使用されない不必要な変数を作成していないことを確認します.
エラーメッセージの中の括弧の名前(未使用のvarsはありません)は、.eslintrc メッセージを表示または非表示にするファイル.
あなたがその赤い下線を見たくないならば、あなたはそれを無効にすることができます.eslintrc ルールとして追加します.

{
  "extends": "eslint:recommended",
  "rules": {
    "no-unused-vars": "off"
  }
}

この変更では、赤い下線が表示されませんが、一般的に、無効にする必要はありませんno-unused-vars ルールは、未使用の変数の作成を避けるために役立ちます.
今すぐ私たちのいくつかのES 6の機能を使用することができますindex.js ファイル
オープンindex.js ファイル内に次のコードを追加します.

const user = 'Harry';
console.log(user);

さて、constキーワードの赤い下線が表示されます.

これは、デフォルトのESPINTがES 5環境でコードを実行するためです.
ES 6を指定し、コードをブラウザまたはノード環境で実行できるように指定するには、.eslintrc ファイル

{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 6
  },
  "env": {
    "node": true,
    "browser": true,
    "es6": true
  }
}

ヒアインparserOptions , 使用するecmaversionを指定します.
番号6以上の場合は、使用するすべての利用可能なバージョンについての追加情報を見ることができます.

あなたの必要性ごとに値を変更することができます.
すべての利用できる環境を見ることができますHERE .
移動するthis URL そして、規則設定ボタンをクリックして、環境をチェックして、チェックして、textareaでタイプすることによってコードを確かめることができます.

Airbnbスタイルガイドあたりのリンギング

使用"extends": "eslint:recommended" 内部.eslintrc ファイルはすばらしいです、しかし、それはすべてのスタイルガイドラインをカバーしません.あなたがアクセスできるAirbnbによって提供されるすべてのプロジェクトでより利用可能で広く使用されているガイドラインがありますHERE .
これらのガイドラインは

必要に応じて新しい演算子を使用してオブジェクトを作成しないでください.

変数が変更されない場合、constの代わりにletを使用するときに警告も表示されます.

演算子や関数を使用して余分な間隔を追加し、避けるために役立ちます.
とはるかに.

AirbnbはJavaScriptを提供し、リンギングをサポートします.
JavaScriptだけを使用するには、以下の依存関係をインストールできます.

npm install eslint-config-airbnb-base@latest eslint-plugin-import --save-dev

OR

yarn add eslint-config-airbnb-base@latest eslint-plugin-import --dev

あなたはそれについての詳細情報を見つけることができますHERE .
JavaScriptの反応を設定するには、次の依存関係をインストールします.

npm install eslint-config-airbnb@latest eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --save-dev

OR

yarn add eslint-config-airbnb@latest eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --dev

あなたはそれについての詳細情報を見つけることができますHERE .
と.eslintrc ファイルチェンジ

"extends": "eslint:recommended",

to

"extends": "airbnb",

さて、いくつかの反応コードを書きましょう.
さて、オープンindex.js ファイル内に次のコードを追加します.

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => <h1>This is some JSX</h1>;

ReactDOM.render(<App />, document.getElementById('root'));

ファイルを保存すると、以下のような赤い下線が表示されます.

パッケージを見つけられない

'アプリ'は再契約されません.代わりに' const 'を使う

拡張子「. js」ファイルを使用しないでください

最初のエラーを修正するにはreact and react-dom パッケージ

npm install react react-dom

OR

yarn add react react-dom

今、2番目のエラーのために変更する必要がありますlet to const 決して変化しないので.
だから、常に使用することをお勧めしますconst 値が変更されない場合.
ご覧の通り、リンギングはより良いコードを書くのに役立つ提案を与えます.
任意のエラーの意味についての詳細情報を知りたい場合は、赤いアンダーラインとGoogleの検索の上にマウスをホバーで表示されるルール名をコピーするだけです.ライクprefer-const eslint そしてそれはどのように修正し、それが原因の問題についてのすべての情報が表示されます.
任意のルールと無効にする方法についての詳細情報を見つけるには、ルールのページにそのルールを検索することができますHERE .
行番号6のJSX RED Underlineの上でマウスを使うと、そのルール名は「反応/JSXファイル名拡張子」を見ることができます.
あなたが規則ページの規則を見つけることができないならばHERE , あなたはそれをGoogleで検索することができますreact/jsx-filename-extension eslintと表示される結果を表示する方法を示すように表示されますHERE .
ですから、このチェックを無効にするには、.eslintrc ファイル

"rules": {
    "react/jsx-filename-extension": "off"
}

この値は、一般的に次のいずれかです.

警告:警告として示す

エラーとして表示する

オフ:赤い下線を表示しないように

時々、エラーコードが文書で使用されるかもしれません.
0はoff、1はwarn、2はエラーです.
今、あなたは.eslintrc ファイルが表示されます.index.js ファイル.
それがこの記事についてです.あなたが新しい何かを学んだという望み.

読書ありがとう！

この記事の完全なGitHubソースコードを追加の設定で見つけることができます.より良いリンギングのためのESPINTRCHERE .
最近公開したチェックMastering Redux コース.
このコースでは、食品の注文アプリと一緒に3つのアプリを構築し、あなたが学びます

基礎と先進

配列とオブジェクトの複雑な状態を管理する方法

複雑なRedux状態を管理するために複数の減速器を使う方法

Reduxアプリケーションをデバッグする方法

どのように反応するReduxライブラリを使用して反応のReduxを使用してあなたのアプリを無効にする.

非同期API呼び出しと多くを扱うためにRedux Thunkライブラリを使う方法

そして、最終的に我々は支払いを受け入れるためのストライプの統合とゼロから完全なビルドし、生産に展開します.

したい定期的にコンテンツをJavaScriptに関連する日まで滞在するには、反応する、ノード.ジェイ.