面接で使えるEslintのFix機能に隠されたアルゴリズムの質問

[[422353]]

eslint が修正をサポートしていることはわかっています。--fix パラメータを追加すると、いくつかのルールによって問題が自動的に修正されます。

この機能がどのように実装されているのか疑問に思ったことはありませんか? Babel もコードを変換できます。eslint と同じように動作しますか?

バベル

Babel は解析、変換、生成の 3 つのステップに分かれています。

変換フェーズで AST コードが変換された後、生成フェーズで AST がターゲット コードに再帰的に印刷されます。

生成の原理は、各 AST の情報に基づいて文字列を再帰的に連結することです。

したがって、プラグイン内の AST を変更すると、最終的なコードも変更されます。

エスリント

eslint ルールは AST をチェックし、context.report を通じてエラーを報告し、その修正方法を指定できます。

カスタム ルールの形式は次のとおりです。

モジュール.エクスポート = {
     メタ: {
         修正可能:真 
     },
作成(コンテキスト) {
戻る{
            //ASTの型を指定する
            オブジェクト式(ノード) {
                // 一連のチェック
                コンテキスト.レポート({
                    ノード、
                    メッセージ: 'xxx にエラーがあります' 、
                    場所: node.loc、
                    *fix(フィクサー) {
                        yield fixer.replaceTextRange([rangeStart,rangeEnd], '置換されたテキスト' );
                    }
                });
             }
         };
     }
 };

修正オプションは、修正 API を通じて問題を自動的に修正するために使用されます。

フィクサーには次の API が用意されています。

ノードまたはトークンの後にテキストを挿入します。
範囲の後にテキストを挿入します。
ノードまたはトークンの前にテキストを挿入します。
範囲の前にテキストを挿入します。 
 
ノードまたはトークンを削除します。
範囲を削除します。 
 
ノードまたはトークンのテキストを置き換えます。
 replaceTextRange(範囲、テキスト);

覚えるのはとても簡単です。追加、削除、変更の 3 つのカテゴリがあります。追加は、前方への挿入と後方への挿入に分かれています。各カテゴリは、トークンに基づいて、または範囲 (下付き範囲) に基づいてテキストを変更することをサポートしています。

AST 内の各ノードは範囲情報、つまりソース コード内のどこからどこまでの添え字を保持しているため、範囲に応じてコードを変更したり、AST に従って範囲を見つけた後にコードを変更したりすることができます。

では、範囲に対してどのような操作を実行するかがわかったら、コードを自動的に変更するにはどうすればよいでしょうか?

以下は eslint の修正コードのソース コードです。

 // ソースコード
const オリジナルテキスト = ソースコード.text;
 // 最初の範囲の始まり
const start = fixes[0].range[0];
 // 最後の範囲の終了
const end = fixes[fixes.length - 1].range[1];
 // テキストを置き換える
テキストを""とします。
 lastPos = Number.MIN_SAFE_INTEGER とします。 
 
 for (const修正の修正) {
    （fix.range[0] >= 0）の場合{
        // 範囲の左側の文字列をインターセプトし、現在の範囲と前の範囲の右側から大きい方を取得します
        テキスト += originalText.slice( Math.max (0, start, lastPos), fix.range[0]);
    }
    // 修復したテキストを結合する
    テキスト += 修正.テキスト;
    // 範囲の右側の位置
    最後の位置 = fix.range[1];
 }
 // 範囲内の文字列を連結された文字列に置き換えます
テキスト += originalText.slice( Math.max (0, start, lastPos), end );

最も興味深い点の 1 つは、両端の範囲が交差するときです。

各修正は、線分（範囲）内のテキストの修復です。交差点をどのように処理するかは、実際に候補者を評価するためのアルゴリズムの質問として使用できます。

左から右に修正を適用し、現在の rangeRight を記録します。次のセグメントを適用するときは、rangeLeft の最大値と前の rangeRight を rangeLeft として取得します。

この問題を抽象化した後でも、これは比較的興味深いアルゴリズムの問​​題です。面接に適しており、実際の応用シナリオがあると思います。

話を元に戻すと、fix 関数の実装は、各範囲で変更されたテキストを結合し、ソース コード文字列を置き換えることです。

要約する

babel と eslint はどちらもコードを修正できます。Babel は AST 上で動作し、コードを印刷するときに異なるコードを生成しますが、eslint はいくつかのルールの自動修正をサポートしています。--fix をオンにすると、自動的に修正されます。

babel コード生成の原則は、AST を再帰的に出力して文字列を連結することであるため、AST が変更されると、生成されたコードも変更されます。

eslint のコード修復ロジックは、特定の範囲のテキストを置き換えてから結合することです。これは AST とは関係がないため、eslint の fix 関数はオプションです。

さらに興味深いのは、eslint の複数のルールによって返される複数の範囲に対する変更が、コードの変更にどのように適用されるか、交差があった場合はどうするかです。この質問は、面接対象者をテストするためのアルゴリズムの質問として使用できると思います。