ESlint Nibble を使用して、多くの ESlint エラーをクリーンな方法で段階的に修正します

チームが成長するにつれて、コードベースをエラーが発生しにくくし、より一貫性を保つために、より多くの機能的と美的ルールが必要です。 >。幸いなことに、バックエンドとフロントエンドの両方で JavaScript (同じバージョンの TypeScript) を使用しているため、これらの変更はチーム全体の日常業務に大きな影響を与えます。

私たちは通常、この種の改善を、自分たちで選んだタスクに取り組むことができる「技術日」(隔週月曜日) と呼んでいます。私たちは、

維持やレビューが難しい長期にわたるブランチを避けるために、これらを段階的に実行するよう努めています。 最近、私たちは数十の ESlint ルールを含む Unicorn プラグインを追加することにしました。何百ものエラーが発生するため、最初は圧倒されるように感じるかもしれません。幸いなことに、私たちは eslint-nibble を発見しました。これは、グラフィカル インターフェイスでルールを 1 つずつ追加するのに役立つコマンド ライン ツールです。

使い方

最初のステップは、適用する新しいプラグインをインストールすることです。その後、ルールを 1 つずつ有効にするのではなく、.eslintrc.js ですべてのルールを有効にできるようになりました。最後に、eslint を使用してすべてを一度に lint する代わりに、単に次のように eslint-nibble を使用できます。

npx eslint-nibble --fixable-only --no-warnings --cache "./src/**/*.{ts,js,vue}"

最初は --fixable-only ルールを使用してプロセスを高速化します

• 警告で CI を失敗させないため、問題を解決するために --no-warnings を使用します
• --cache オプションは ESlint のオプションと似ており、繰り返されるプロセスを大幅に高速化します
その後、失敗したすべてのルールとそれぞれのエラー数を示す素晴らしいグラフィックが表示されます。

インターフェイスを通じてルールを選択すると、(可能な場合) 自動修正することが提案されます。その後、何かおかしな点があった場合に備えて、通常はコミットする前に手動でレビューします。

もう 1 つの重要なポイントは、コードの 1 行に複数のルール エラーが含まれている場合でも、一度に 1 つのルールのみを修正できることです。コミットがアトミックになるため、デバッグやレビューなどが簡単になります。

コミットする前に追加の変更を行った場合 (たとえば、変更した行に Prettier を適用する必要がある場合があります)、他のすべてのエラーが修正されるため、必ず

ファイルを保存して lint しないでください

。ファイル内の他のルールに関連する。正しい方法は、行に焦点を当てて Quick fix を実行するだけで必要な問題を手動で修正し、その後 VS Code のフォーマットを行わずに Fix コマンドを使用することです。

利点

主な利点は、次に追加するのが最も簡単なルールを簡単に確認できることです。毎日、エラーの多い 1 つのルールを修正するか、数回しか発生しない多数のルールを修正するかを選択できるようになりました。以前は、ルールの影響を事前に知ることなく、ルールを 1 つずつ盲目的に有効にしていました。

ドキュメントを読んでルール自体を理解する機会でもあり、なぜこのようにするのが良いのか (あるいはそうでないのか)、新しいことを学びます。

>

ニーズやコード スタイルに合わないため、ルールをカスタマイズするか完全に無効にするを決定することがあります。たとえば、場合によっては Set の使用を強制するルールを無効にすることにしました。Vue 2 は Map と Set でのリアクティビティをサポートしていないため、バグが発生したり、開発者が予期しない方法で使用することを奨励したりする可能性があると考えました。

最後に、レビュー担当者が一度に 1 つのルールに関するコミットを読むのが簡単になります。このツールは、時々いくつかの ESlint ルールを追加するのに役立ち、段階的な拡張を簡単にします。

以上がESlint Nibble を使用して、多くの ESlint エラーをクリーンな方法で段階的に修正しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。