ESLint: 何を、なぜ、いつ、どのように


ESLintとは何ですか?



ESLint は、2013 年 6 月に Nicholas C. Zakas によって最初に作成されたオープンソースの Javascript リンティング ユーティリティです.特定のスタイル ガイドラインに準拠していない問題のあるパターンやコードを見つけるためによく使用されます. ESLint は Node.js を使用して記述され、高速なランタイム環境と npm による簡単なインストールを提供します.
ESLint を使用すると、特定の一連のスタンドアロン ルールを使用してコーディング標準を課すことができます.はい、これらのルールのオンとオフを切り替えることができます.これらのルールは完全にプラグ可能です.

ESLint を使用する理由



動的で型付けの緩い言語である JavaScript は、特に開発者のエラーが発生しやすい傾向があります. ESLint を使用すると、コーディング標準にガイドラインを適用し、それらのエラーを最小限に抑えることができます.これらのガイドを課す主な理由は、すべての開発者が独自の書き方 (命名規則/タブ/文字列の一重引用符または二重引用符など) を持っているためです.また、さまざまなスタイリング手法を使用すると、コードベースが奇妙に見え、エラーが発生しやすく、脆弱になる可能性があります.特に Javascript を扱っている場合、これは対処したくない落とし穴を引き起こす可能性があります.

いつ使用するのですか?



正直なところ、プロジェクトの規模やチームに関係なく、私はそれを使用することを好みます.ただし、中規模から大規模で自明でない Javascript/Typescript プロジェクト、または対応する開発者チームがかなり多い場合は、これを使用することを検討する必要があります.どちらの場合でも、共通の標準コーディング プラクティス/ガイドラインを課す必要があります.
ESLint のようなリンティング ツールを使用すると、開発者は JavaScript コードを実行せずに問題を発見できます. ESLint が作成された主な理由の 1 つは、開発者が独自のリンティング ルールを作成できるようにすることでした. Javascript/Typescript で実行される任意のアプリケーションで ESLint を使用できます.
  • React/React ネイティブ
  • 角度
  • ノード.

  • それの使い方?



    十分な話ですよね?インストール方法は次のとおりです.

    インストールする



    前提条件: Node.js (^10.12.0, or >=12.0.0)npm または yarn を使用して ESLint をインストールできます.

    $ npm install eslint --save-dev
    # or
    $ yarn add eslint --dev
    


    注: ESLint をローカルではなくグローバルにインストールすることもできます ( npm install eslint --global を使用).ただし、これは推奨されません.使用するプラグインまたは共有可能な構成は、いずれの場合もローカルにインストールする必要があります.

    初期化する



    インストール後、次のコマンドで初期化します.

    $ npx eslint --init
    # or
    $ yarn run eslint --init
    


    注: — init は、package.json ファイルが既にあることを前提としています.そうでない場合は、事前に npm init または yarn init を実行してください.

    構成する



    インストールと初期化が完了すると、ディレクトリに .eslintrc.{js,yml,json} ファイルが作成されます.その中に、次のように構成されたいくつかのルールが表示されます.

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


    これを使って



    ここにいる場合は、ESLint の構成が成功したことを意味します.使用方法は次のとおりです.

    $ npx elinst <your file>.js
    # or 
    $ npx eslint <folder containing js files>
    


    package.json ファイルに lint を追加することもできます (まだ追加されていない場合).

    "scripts": {
      ...
      "lint": "eslint .",
      ...
    }
    


    おめでとう!



    ほんの数ステップで、コードベースをこれまで以上にすっきりと見栄え良くすることに成功しました.