面接で使える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 );