排出されたCreateReactアプリでESLintルールをカスタマイズする方法

序章

スペースまたはタブ、セミコロンまたはなし、一重引用符または二重引用符が好きかどうかにかかわらず、コードベースの一貫性と明確さの重要性については、私たち全員が同意できます。 Linting は、コーディング規則と標準を適用することによって一貫性と明確さを確立するための1つのアプローチです。

Create React Appを使用して作成されたプロジェクトには、ESLintがすでに機能し、適切なデフォルトですぐに構成されたlintingがあります。 ほとんどのシナリオでは、他に何もする必要がなく、すべてが正常に機能することを意味します。 次の記事は、リンティングルールをカスタマイズする場合に役立ちます。

この記事では、ESLintのようなリンターを利用する理由と、ESLintをカスタマイズする方法について説明します。 Create React App 事業。

前提条件

このチュートリアルを完了するには、次のものが必要です。

• Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。

このチュートリアルは、ノードv16.4.2で検証されました。 npm v7.19.1、 react v17.0.2、および eslint v7.11.0。

リンティングを理解する

コーディングは、特にJavaScriptのような緩く型付けされた言語では、常にエラーの余地を残します。 コードエディタとプロジェクトにリンターを実装することで、コードを実行する前にエラーを発見して時間を節約できます。

最も人気のあるコードエディタは、使用している言語のリンターを自動的に含めるか、複数の拡張機能を提供して、ローカルでリントする方法を構成できるようにします。

ローカルでリントすることで時間を節約できますが、さまざまなコードエディタや開発環境のように、常に全体像が見えます。

この記事の焦点は、プロジェクトレベルのリンティングにあります。 ESLint.

プロジェクトの設定

使ってみよう Create React App Reactプロジェクトをすばやく設定します。 慣れておらず、開始するのに少し助けが必要な場合は、 Create ReactAppを快適に使用するを参照してください。

まず、ターミナルで実行します。

npx create-react-app linter-demo

ディレクトリに移動します。

cd linter-demo

次に、アプリケーションを起動します。

npm start

出来上がり！ これで、テストするプロジェクトができました。

CreateReactAppプロジェクトのイジェクト

開発中のほとんどのものと同様に、 Create React App いくつかの本質的なカスタマイズに取り掛かる準備ができるまでは、実質的に魔法です。

Create React Appを使用して作成されたプロジェクトのデフォルトの欠点の1つは、構成できるのは ESLint プロジェクトをイジェクトまたはフォークすることで、ほとんどの上級開発者にとっては多くのことが望まれます。 残念ながら、 Prettyer を統合したり、チームのスタイルに合わせてルールを変更したりすることはできず、バージョンに固定されます。 Create React App どのリリースがあなたの固有の問題を解決するかもしれないにもかかわらず、最も安定したバージョンとみなします。 柔軟性の点で、まだまだ多くの要望があります。 苦情や問題もあります Create React App 以下を提案するルールを無効にします。

新しい構成を適用するには、イジェクトする必要があります。

基本的に、イジェクトすると、プロジェクトの更新は Create React App 芯。 しかし、それは確かに世界の終わりではありません、そしてそれはより多くのリンティングのカスタマイズを可能にします。

ターミナルで実行：

npm run eject

プロンプトを確認すると、スクリプトによってプロジェクトが排出されます。

プロジェクトに追加された依存関係には、次のものがあります。 @babel/core, babel-loader, babel-eslint, eslint,eslint-webpack-plugin、 と eslint-plugin-react.

• eslint コアです JavaScript リンター。
• eslint-loader 使用することをwebpackに通知します eslint 私たちのビルドで
• babel-loader webpackでコードをトランスパイルします
• babel-eslint 有効なES6コードのリンティングを提供します
• eslint-plugin-react ESLintルールを拡張してReactをカバーする

これで、CreateReactAppプロジェクトが排出されました。

ESLintルールの追加

ESLintルールは、さまざまなファイルで構成できます。 .eslintrc.js, .eslintrc.cjs, .eslintrc.yaml, .eslintrc.yml, .eslintrc.json. このデモでは、既存のデモを変更します package.json ファイル。

どこから始めればよいかわからない場合は、次のようなスタイルガイド eslint-config-airbnb Airbnbのような業界リーダーと同様にプロジェクトを構成できるようにします。 スタイルガイドを実装するために必要なのは、対応するパッケージをインストールすることだけです。 彼らのルールは最初は少し厳しいので、もう少し簡単なものから始めましょう。

開ける package.json コードエディタで追加します rules に eslintConfig:

{
  "name": "linter-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    // ...
  },
  "scripts": {
    // ...
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "no-undef": [ 1 ]
    }
  },
  "browserslist": {
    // ...
  },
  "jest": {
    // ...
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}

このコードは、 rule no-undef（未定義なし）の場合。

スポッティングエラー

プロジェクトにリンターが設定されていない場合、コードがコンパイルされるまでエラーを見つけるのは困難です。

以下に追加したエラーを見つけられますか？

import React, { Component } from 'react';
import ReactLogo from './logo.svg';
import './App.css';

class Demo extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p classname="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

• import でロゴの名前を変更しましたが、srcプロパティで変更するのを忘れました。
• class の名前も変更しましたが、exportで変更するのを忘れました。

リンターがないと、問題を特定するのが難しい場合があります。 正しいバージョンは次のようになります。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

リンターを使用すると、エラーがすぐに表示され、大きな問題があることがわかります。 単語のスペルを間違えたときにスペルチェックが波状の赤い線を表示するのと同じように、エラーが存在する場合、リンターは波状の赤い線を表示します。

関連する波線にカーソルを合わせると、リンターは特定のエラーに関する詳細情報を提供し、その特定のルールに関する詳細情報へのリンクも提供します。

特定のルールの構成

のようなリンター ESLint コードの外観に関するルールを作成できるようにします。 これらのルールには、一貫したインデントの強制（indent）から中括弧内のスペースが必要（space-in-brackets).

の駆動原理の1つ ESLint これは、開発者が独自のルールを決定できるようにし、特定の標準を強制したり奨励したりしないことです。

すべてのルールを要求したり、警告として使用したり、変更したり、無効にしたりすることができます。 の ESLint 1つのルールを完全にカスタマイズできるだけでなく、ファイル全体、1行、またはコード内の特定の行に関連するルールだけを無効にすることもできます。

以下の例のようなコードを見たことがあるか、書いたことさえあります。

import React, { Component } from 'react';

import logo from './logo.svg';
import './App.css';

class App extends Component {
      render() {
return (
      <div className="App">

        <header className='App-header'>
          <img src={logo}
          className="App-logo"
          alt="logo" />
                    <h1
                    className="App-title">
            Welcome to React</h1>
        </header>
              <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

このコードには矛盾がたくさんあります。 ワイルドなインデントと間隔により、読みにくく、理解しにくくなっています。 コードベースが大きい場合を想像してみてください。 コードを掘り下げることは、気が遠くなるような、イライラするように思われ、病気で電話をかけたくなるかもしれません。

これを防ぐためにリンティングルールを使用している場合、リンターはこれが受け入れられないことをすぐに知らせます。

以前に変更しました package.json 単一のルールを持つファイル。 ファイルに何が起こるかを観察するために、いくつかのより複雑なルールを追加しましょう。

{
  // ...
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "space-in-parens": [ 0, "always" ],
      "template-curly-spacing": [ 2, "always" ],
      "array-bracket-spacing": [ 2, "always" ],
      "object-curly-spacing": [ 2, "always" ],
      "computed-property-spacing": [ 2, "always" ],
      "no-multiple-empty-lines": [ 2, { "max": 1, "maxEOF": 0, "maxBOF": 0 } ],
      "quotes": [ 1, "single", "avoid-escape" ],
      "no-use-before-define": [ 2, { "functions": false } ],
      "semi": [0, "never"],
      "prefer-const": 1,
      "react/prefer-es6-class": 0,
      "react/jsx-filename-extension": 0,
      "react/jsx-curly-spacing": [ 2, "always" ],
      "react/jsx-indent": [ 2, 4 ],
      "react/prop-types": [ 1 ],
      "react/no-array-index-key": [ 1 ],
      "class-methods-use-this": [ 1 ],
      "no-undef": [ 1 ],
      "no-case-declarations": [ 1 ],
      "no-return-assign": [ 1 ],
      "no-param-reassign": [ 1 ],
      "no-shadow": [ 1 ],
      "camelcase": [ 1 ],
      "no-underscore-dangle" : [0, "always"]
    }
  }
  // ...
}

変更を保存します。

ファイルを再度開くと、次のエラーが表示されます。

さらに適用された5つのルールを調査してください。

• quotes ：一重引用符、二重引用符、またはバッククォートの3つの方法のいずれかで文字列を定義できます。
• semi ：セミコロンを強制または禁止します
• react / jsx-curly-spacing ：JSX小道具と式の中括弧内のスペースを強制または禁止します
• react / jsx-indent ：インデント（スペース、タブ）を検証します
• no-undef ：未定義の変数を禁止します

ルールとその変更方法の詳細については、eslintとeslint-plugin-reactのルールを確認してください。

複数のエラーの修正

だからあなたは巨大なプロジェクトを持っていて、 ESLint、え？ 今、あなたはリンティングしていて、あなたが見ている何百、あるいは何千ものエラーに幾分おびえていますか？ 恐れることはありません！ ESLint ファイルパスを入力して eslint --fix また、プロジェクトでゴミ箱の火災を引き起こさない単純なエラーをすべて自動的に修正します。

現在のプロジェクトでこれを試すには、ターミナルから次のコマンドを実行します。

./node_modules/eslint/bin/eslint.js --fix src/App.js

このコマンドは、エラーが1つ残っていることを示しています。

私たちはしたいのに eslint --fix 私たちのファイルのすべてを修正できるようにするために、それはいくつかの損傷を与える能力を持っています。 すべてのプロジェクトが同じように作成されるわけではないので ESLint いくつかの修正で軽く踏みます。

最後のエラー、 class-methods-use-this 良い点を言えば、クラスメソッドはこれを使用して現在のクラスを参照する必要があります。 後で変更したいと思うかもしれませんが、私たちのプロジェクトはまったく新しいので、今は無視します。

これを無視するには、次の3つの方法があります。

• プロジェクト全体でルールを無効にする
• そのファイルのルールを無効にする
• コードブロックの上の行のルールを無効にする

これはおそらく他のファイルで必要なものなので、プロジェクト全体で無効にしたくはありません。また、簡単に見つけられるようにしたいので、この特定のファイルで無効にします。

ファイルのルールを無効にするには、最初の行に次のコメントを追加します。

/* eslint-disable class-methods-use-this */

コマンドを再実行すると、このルールは無視されます。

結論

この記事では、ESLintのようなリンターを使用する理由と、ESLintをカスタマイズする方法について説明しました。 Create React App 事業。

数人の開発者とブレインストーミングを行いました ESLint 彼らの時間を節約しました。これが私たちが思いついたものの短いリストです：

• エラーが検出された場合は、ビルドを停止します。
• 良い習慣を強化します。 使用しましたか var あなたが使用できた場所 let また const?
• 未使用または不要なコードを特定するのに役立ち、パッケージがスリム化されます。
• オブジェクト破壊を使用することを忘れないでください。
• 防ぐ undefined 変数。
• 不足しているファイルまたはパッケージを特定できる可能性があります。

プロジェクトのESLintルールをカスタマイズしたので、タブとスペースについて再度議論する必要はありません。

また、この記事では、Create React Appからイジェクトすることでリンティングルールをカスタマイズする方法について説明しますが、react-app-rewiredとreact-app-rewire-eslintを使用する代替ソリューションもあります。