✨ eslint quickfix

Author: CodFrm

build/assets/template/popup.html

@@ -18,8 +18,7 @@
       margin: 0;
       padding: 0;
       border: 0;
-      min-width: 320px;
-      max-width: 640px;
+      width: 320px;
       /* height: 500px; */
       min-height: 150px;
       max-height: 500px;

src/linter.worker.ts

@@ -19,6 +19,52 @@ const severityMap = {
   1: 4, // 1 for ESLint is warning
 };
 
+function getTextBlock(
+  text: string,
+  startPosition: number,
+  endPosition: number
+) {
+  if (
+    startPosition > endPosition ||
+    startPosition < 0 ||
+    endPosition > text.length
+  ) {
+    throw new Error("Invalid positions provided");
+  }
+
+  let startLineNumber = 1;
+  let startColumn = 1;
+  let endLineNumber = 1;
+  let endColumn = 1;
+
+  for (let i = 0, currentLine = 1, currentColumn = 1; i < text.length; i += 1) {
+    if (i === startPosition) {
+      startLineNumber = currentLine;
+      startColumn = currentColumn;
+    }
+
+    if (i === endPosition) {
+      endLineNumber = currentLine;
+      endColumn = currentColumn;
+      break;
+    }
+
+    if (text[i] === "\n") {
+      currentLine += 1;
+      currentColumn = 0;
+    }
+
+    currentColumn += 1;
+  }
+
+  return {
+    startLineNumber,
+    startColumn,
+    endLineNumber,
+    endColumn,
+  };
+}
+
 self.addEventListener("message", (event) => {
   const { code, id, config } = event.data;
   const errs = linter.verify(code, config);
@@ -28,6 +74,14 @@ self.addEventListener("message", (event) => {
     if (rule) {
       target = rule.meta.docs.url;
     }
+    let fix: any;
+    if (err.fix) {
+      fix = {
+        range: getTextBlock(code, err.fix.range[0], err.fix.range[1]),
+        text: err.fix.text,
+      };
+    }
+    console.log(err);
     return {
       code: {
         value: err.ruleId || "",
@@ -42,6 +96,7 @@ self.addEventListener("message", (event) => {
       // @ts-ignore
       severity: severityMap[err.severity],
       source: "ESLint",
+      fix,
     };
   });
   // 发回主进程

src/pages/components/CodeEditor/index.tsx

@@ -1,3 +1,4 @@
+import Cache from "@App/app/cache";
 import IoC from "@App/app/ioc";
 import { SystemConfig } from "@App/pkg/config/config";
 import { LinterWorker } from "@App/pkg/utils/monaco-editor";
@@ -174,6 +175,26 @@ const CodeEditor: React.ForwardRefRenderFunction<
         return;
       }
       editor.setModelMarkers(model, "ESLint", message.markers);
+      const fix = new Map();
+      // 设置fix
+      message.markers.forEach(
+        (val: {
+          code: { value: any };
+          startLineNumber: any;
+          endLineNumber: any;
+          startColumn: any;
+          endColumn: any;
+          fix: any;
+        }) => {
+          if (val.fix) {
+            fix.set(
+              `${val.code.value}|${val.startLineNumber}|${val.endLineNumber}|${val.startColumn}|${val.endColumn}`,
+              val.fix
+            );
+          }
+        }
+      );
+      Cache.getInstance().set("eslint-fix", fix);
 
       // 在行号旁显示ESLint错误/警告图标
       const formatMarkers = message.markers.map(

src/pages/components/ScriptMenuList/index.tsx

@@ -136,7 +136,6 @@ const ScriptMenuList: React.FC<{
                       overflow: "hidden",
                       textOverflow: "ellipsis",
                       whiteSpace: "nowrap",
-                      width: "calc(100% + 1px)",
                       color: item.runNum === 0 ? "rgb(var(--gray-5))" : "",
                     }}
                   >

src/pages/options/index.css

@@ -34,4 +34,8 @@ h6.arco-typography {
   background-repeat: no-repeat;
   background-position: center;
   left: 10px!important;
+}
+
+.actionList{
+  height: auto !important;
 }

src/pkg/utils/monaco-editor.ts

@@ -4,6 +4,7 @@ import dts from "@App/types/scriptcat";
 import Hook from "@App/app/service/hook";
 import { languages } from "monaco-editor";
 import pako from "pako";
+import Cache from "@App/app/cache";
 
 // 注册eslint
 const linterWorker = new Worker("/src/linter.worker.js");
@@ -74,6 +75,73 @@ export default function registerEditor() {
       });
     },
   });
+
+  // 处理quick fix
+  languages.registerCodeActionProvider("javascript", {
+    provideCodeActions: (
+      model /** ITextModel */,
+      range /** Range */,
+      context /** CodeActionContext */
+    ) => {
+      const actions: languages.CodeAction[] = [];
+      const eslintFix = <Map<string, any>>Cache.getInstance().get("eslint-fix");
+      for (let i = 0; i < context.markers.length; i += 1) {
+        // 判断有没有修复方案
+        const val = context.markers[i];
+        const code = typeof val.code === "string" ? val.code : val.code!.value;
+        const fix = eslintFix.get(
+          `${code}|${val.startLineNumber}|${val.endLineNumber}|${val.startColumn}|${val.endColumn}`
+        );
+        console.log(
+          fix,
+          `${code}|${val.startLineNumber}|${val.endLineNumber}|${val.startColumn}|${val.endColumn}`
+        );
+        if (fix) {
+          const edit: languages.IWorkspaceTextEdit = {
+            resource: model.uri,
+            textEdit: {
+              range: fix.range,
+              text: fix.text,
+            },
+            versionId: undefined,
+          };
+          actions.push(<languages.CodeAction>{
+            title: `修复 ${code} 问题`,
+            diagnostics: [val],
+            kind: "quickfix",
+            edit: {
+              edits: [edit],
+            },
+            isPreferred: true,
+          });
+        }
+      }
+
+      // const actions = context.markers.map((error) => {
+      //   const edit: languages.IWorkspaceTextEdit = {
+      //     resource: model.uri,
+      //     textEdit: {
+      //       range,
+      //       text: "console.log(1)",
+      //     },
+      //     versionId: undefined,
+      //   };
+      //   return <languages.CodeAction>{
+      //     title: ``,
+      //     diagnostics: [error],
+      //     kind: "quickfix",
+      //     edit: {
+      //       edits: [edit],
+      //     },
+      //     isPreferred: true,
+      //   };
+      // });
+      return {
+        actions,
+        dispose: () => {},
+      };
+    },
+  });
 }
 
 export class LinterWorker {