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

序章

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

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

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

前提条件

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

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

このチュートリアルは、ノードv16.4.2、npm v7.19.1、react v17.0.2、およびeslintv7.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は、ビルドでeslintを使用することをwebpackに通知します
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に追加します。

package.json

{
  "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"
    ]
  }
}

このコードは、 no-undef（未定義なし）のruleを定義します。

スポッティングエラー

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

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

App.js

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で変更するのを忘れました。

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

App.js

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）にスペースを必要とするまでのすべてが含まれます。

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

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

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

src / App.js

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ファイルを単一のルールで変更しました。ファイルに何が起こるかを観察するために、いくつかのより複雑なルールを追加しましょう。

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"]
    }
  }
  // ...
}

変更を保存します。

注：必ずApp.jsファイルを閉じて再度開くか、エディターウィンドウをリロードして、リンターの変更が反映されていることを確認してください。

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

さらに適用された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つの方法があります。

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

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

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

src / App.js

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

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

結論

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

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

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

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

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