✨ 支持自定义eslint

Author: CodFrm

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scriptcat",
-  "version": "0.11.0-beta",
+  "version": "0.11.0-beta.1",
   "description": "脚本猫,一个可以执行用户脚本的浏览器扩展,万物皆可脚本化,让你的浏览器可以做更多的事情!",
   "author": "CodFrm",
   "license": "GPLv3",

src/linter.worker.ts

@@ -13,7 +13,9 @@ const config = {
   parserOptions: {
     ecmaVersion: "latest",
     sourceType: "script",
-    ecmaFeatures: { globalReturn: true },
+    ecmaFeatures: {
+      globalReturn: true,
+    },
   },
   rules: {
     "constructor-super": ["error"],

src/pages/components/CodeEditor/index.tsx

@@ -1,3 +1,5 @@
+import IoC from "@App/app/ioc";
+import { SystemConfig } from "@App/pkg/config/config";
 import { LinterWorker } from "@App/pkg/utils/monaco-editor";
 import { editor } from "monaco-editor";
 import React, { useEffect, useImperativeHandle, useState } from "react";
@@ -78,6 +80,10 @@ const CodeEditor: React.ForwardRefRenderFunction<
   }, [code, diffCode]);
 
   useEffect(() => {
+    const config = IoC.instance(SystemConfig) as SystemConfig;
+    if (!config.enableEslint) {
+      return () => {};
+    }
     if (!monacoEditor) {
       return () => {};
     }

src/pages/options/routes/Setting.tsx

@@ -3,6 +3,7 @@ import {
   Button,
   Card,
   Checkbox,
+  Input,
   Message,
   Select,
   Space,
@@ -11,6 +12,8 @@ import FileSystemParams from "@App/pages/components/FileSystemParams";
 import { SystemConfig } from "@App/pkg/config/config";
 import IoC from "@App/app/ioc";
 import FileSystemFactory, { FileSystemType } from "@Pkg/filesystem/factory";
+import Title from "@arco-design/web-react/es/Typography/title";
+import { IconQuestionCircleFill } from "@arco-design/web-react/icon";
 
 function Setting() {
   const systemConfig = IoC.instance(SystemConfig) as SystemConfig;
@@ -32,6 +35,9 @@ function Setting() {
       direction="vertical"
       style={{
         width: "100%",
+        height: "100%",
+        overflow: "auto",
+        position: "relative",
       }}
     >
       <Card title="脚本同步" bordered={false}>
@@ -137,6 +143,48 @@ function Setting() {
           </Checkbox>
         </Space>
       </Card>
+      <Card title="ESLint" bordered={false}>
+        <Space direction="vertical" className="w-full">
+          <Checkbox
+            onChange={(checked) => {
+              systemConfig.enableEslint = checked;
+            }}
+            defaultChecked={systemConfig.enableEslint}
+          >
+            开启ESLint
+          </Checkbox>
+          <Title heading={5}>
+            ESLint规则{" "}
+            <Button
+              type="text"
+              style={{
+                height: 24,
+              }}
+              icon={
+                <IconQuestionCircleFill
+                  style={{
+                    margin: 0,
+                  }}
+                />
+              }
+              href="https://eslint.org/play/"
+              target="_blank"
+              iconOnly
+            />
+          </Title>
+          <Input.TextArea
+            placeholder="请输入eslint规则,可以从https://eslint.org/play/下载配置"
+            autoSize={{
+              minRows: 4,
+              maxRows: 8,
+            }}
+            defaultValue={systemConfig.eslintConfig}
+            onBlur={(v) => {
+              systemConfig.eslintConfig = v.target.value;
+            }}
+          />
+        </Space>
+      </Card>
     </Space>
   );
 }

src/pkg/config/config.ts

@@ -178,4 +178,20 @@ export class SystemConfig {
   set scriptCatFlag(val: string) {
     this.set("script_cat_flag", val);
   }
+
+  get enableEslint() {
+    return <boolean>this.cache.get("enable_eslint");
+  }
+
+  set enableEslint(val: boolean) {
+    this.set("enable_eslint", val);
+  }
+
+  get eslintConfig() {
+    return <string>this.cache.get("eslint_config") || "";
+  }
+
+  set eslintConfig(v: string) {
+    this.set("eslint_config", v);
+  }
 }

webpack/webpack.dev.ts

@@ -4,6 +4,7 @@ import CompressionPlugin from "compression-webpack-plugin";
 import common from "../webpack.config";
 
 const src = `${__dirname}/../src`;
+const dist = `${__dirname}/../dist`;
 
 common.entry = {
   // @ts-ignore
@@ -14,14 +15,16 @@ common.entry = {
   "ts.worker": "monaco-editor/esm/vs/language/typescript/ts.worker.js",
 };
 
+common.output = {
+  path: `${dist}/ext/src`,
+  filename: "[name].js",
+  clean: false,
+};
+
 // 取消splitChunks
 common.optimization = {};
 
-common.optimization = {};
 export default merge(common, {
-  output: {
-    clean: false,
-  },
   watch: true,
   devtool: "inline-source-map",
   plugins: [