POC: eslint integration poc

app/client/package.json

@@ -131,6 +131,7 @@
     "deep-diff": "^1.0.2",
     "downloadjs": "^1.4.7",
     "echarts": "^5.4.2",
+    "eslint-linter-browserify": "^9.10.0",
     "fast-deep-equal": "^3.1.3",
     "fast-sort": "^3.4.0",
     "fastdom": "^1.0.11",

app/client/src/ce/entities/FeatureFlag.ts

@@ -33,6 +33,7 @@ export const FEATURE_FLAG = {
   release_drag_drop_building_blocks_enabled:
     "release_drag_drop_building_blocks_enabled",
   rollout_side_by_side_enabled: "rollout_side_by_side_enabled",
+  rollout_eslint_enabled: "rollout_eslint_enabled",
   release_layout_conversion_enabled: "release_layout_conversion_enabled",
   release_anvil_toggle_enabled: "release_anvil_toggle_enabled",
   release_git_persist_branch_enabled: "release_git_persist_branch_enabled",
@@ -70,6 +71,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   ab_appsmith_ai_query: false,
   release_actions_redesign_enabled: false,
   rollout_remove_feature_walkthrough_enabled: true,
+  rollout_eslint_enabled: false,
   rollout_side_by_side_enabled: false,
   release_layout_conversion_enabled: false,
   release_anvil_toggle_enabled: false,

app/client/src/components/editorComponents/CodeEditor/lintHelpers.ts

@@ -15,6 +15,7 @@ import {
   INVALID_JSOBJECT_START_STATEMENT,
   INVALID_JSOBJECT_START_STATEMENT_ERROR_CODE,
 } from "plugins/Linting/constants";
+
 export const getIndexOfRegex = (
   str: string,
   regex: RegExp,
@@ -137,6 +138,7 @@ export const getLintAnnotations = (
       line,
       originalBinding,
       severity,
+      variableLength,
       variables,
     } = error;
 
@@ -157,16 +159,18 @@ export const getLintAnnotations = (
       });
     }
 
-    let variableLength = 1;
+    let calculatedVariableLength = 1;
 
     // Find the variable with minimal length
-    if (variables) {
+    if (variableLength && variableLength > 0) {
+      calculatedVariableLength = variableLength;
+    } else if (variables) {
       for (const variable of variables) {
         if (variable) {
-          variableLength =
-            variableLength === 1
+          calculatedVariableLength =
+            calculatedVariableLength === 1
               ? String(variable).length
-              : Math.min(String(variable).length, variableLength);
+              : Math.min(String(variable).length, calculatedVariableLength);
         }
       }
     }
@@ -205,7 +209,7 @@ export const getLintAnnotations = (
         };
         const to = {
           line: from.line,
-          ch: from.ch + variableLength,
+          ch: from.ch + calculatedVariableLength,
         };
 
         annotations.push({

app/client/src/plugins/Linting/constants.ts

@@ -2,32 +2,80 @@ import { ECMA_VERSION } from "@shared/ast";
 import type { LintOptions } from "jshint";
 import isEntityFunction from "./utils/isEntityFunction";
 
-export const lintOptions = (globalData: Record<string, boolean>) =>
-  ({
-    indent: 2,
-    esversion: ECMA_VERSION,
-    eqeqeq: false, // Not necessary to use ===
-    curly: false, // Blocks can be added without {}, eg if (x) return true
-    freeze: true, // Overriding inbuilt classes like Array is not allowed
-    undef: true, // Undefined variables should be reported as error
-    forin: false, // Doesn't require filtering for..in loops with obj.hasOwnProperty()
-    noempty: false, // Empty blocks are allowed
-    strict: false, // We won't force strict mode
-    unused: "strict", // Unused variables are not allowed
-    asi: true, // Tolerate Automatic Semicolon Insertion (no semicolons)
-    boss: true, // Tolerate assignments where comparisons would be expected
-    evil: false, // Use of eval not allowed
-    funcscope: true, // Tolerate variable definition inside control statements
-    sub: true, // Don't force dot notation
-    expr: true, // suppresses warnings about the use of expressions where normally you would expect to see assignments or function calls
-    // environments
-    browser: false,
-    worker: true,
-    mocha: false,
-    // global values
-    globals: globalData,
-    loopfunc: true,
-  }) as LintOptions;
+export const enum LINTER_VERSION {
+  "JSHINT" = "JSHint",
+  "ESLINT" = "ESLint",
+}
+
+export const lintOptions = (
+  globalData: Record<string, boolean>,
+  linterVersion = LINTER_VERSION.JSHINT,
+) => {
+  if (linterVersion === LINTER_VERSION.JSHINT) {
+    return {
+      indent: 2,
+      esversion: ECMA_VERSION,
+      eqeqeq: false, // Not necessary to use ===
+      curly: false, // Blocks can be added without {}, eg if (x) return true
+      freeze: true, // Overriding inbuilt classes like Array is not allowed
+      undef: true, // Undefined variables should be reported as error
+      forin: false, // Doesn't require filtering for..in loops with obj.hasOwnProperty()
+      noempty: false, // Empty blocks are allowed
+      strict: false, // We won't force strict mode
+      unused: "strict", // Unused variables are not allowed
+      asi: true, // Tolerate Automatic Semicolon Insertion (no semicolons)
+      boss: true, // Tolerate assignments where comparisons would be expected
+      evil: false, // Use of eval not allowed
+      funcscope: true, // Tolerate variable definition inside control statements
+      sub: true, // Don't force dot notation
+      expr: true, // suppresses warnings about the use of expressions where normally you would expect to see assignments or function calls
+      // environments
+      browser: false,
+      worker: true,
+      mocha: false,
+      // global values
+      globals: globalData,
+      loopfunc: true,
+    } as LintOptions;
+  } else {
+    const eslintGlobals: Record<string, "writable" | "readonly"> = {};
+
+    for (const key in globalData) {
+      //eslintGlobals[key] = globalData[key] ? "writable" : "readonly";
+      eslintGlobals[key] = "readonly";
+    }
+
+    return {
+      languageOptions: {
+        ecmaVersion: ECMA_VERSION,
+        globals: eslintGlobals,
+        sourceType: "script",
+      },
+      rules: {
+        indent: ["off", "tab"],
+        //indent: "off",
+        eqeqeq: "off",
+        curly: "off",
+        "no-extend-native": "error",
+        "no-undef": "error",
+        "guard-for-in": "off",
+        "no-empty": "off",
+        strict: "off",
+        "no-unused-vars": [
+          "error",
+          { vars: "all", args: "all", ignoreRestSiblings: false },
+        ],
+        //semi: ["error", "never"],
+        "no-cond-assign": "off",
+        "no-eval": "error",
+        "block-scoped-var": "off",
+        "dot-notation": "off",
+        "no-unused-expressions": "off",
+        "no-loop-func": "off",
+      },
+    };
+  }
+};
 export const JS_OBJECT_START_STATEMENT = "export default";
 export const INVALID_JSOBJECT_START_STATEMENT = `JSObject must start with '${JS_OBJECT_START_STATEMENT}'`;
 export const INVALID_JSOBJECT_START_STATEMENT_ERROR_CODE =

app/client/src/plugins/Linting/types.ts

@@ -69,6 +69,7 @@ export interface getLintingErrorsProps {
     isJsObject: boolean;
   };
   webworkerTelemetry: Record<string, WebworkerTelemetryAttribute>;
+  linterVersion?: number;
 }
 
 export interface getLintErrorsFromTreeProps {