chore: update logic to calculate length of lint (#36548)

## Description

As part of project to migrate linter to eslint, a small dependency we
need to take care of is to update how we calculate the length of the
lint to be shown. Today we use an array of variables and calculate their
char lengths. With eslint, we directly get the length and hence can be
passed down to this function. To ensure backward compatibility till we
are still phasing out JSHint, a conditional check is added to the
linthelper file.

> [!NOTE] > This PR is part of a series of [stacked
diffs](https://newsletter.pragmaticengineer.com/p/stacked-diffs) and
might have changes from it's parent PRs. Untill the blocking parent PRs
are merged, this diff would show more changes than are relevant for this
PR. Blocking PRs: - #36543

Fixes #36546 

## Automation

/test js sanity

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11907265100>
> Commit: 7da61e78bb2dffe41e148aba8a62062234eb59d1
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11907265100&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.JS, @tag.Sanity`
> Spec:
> <hr>Tue, 19 Nov 2024 07:50:17 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a new optional property `lintLength` to enhance lint error
reporting.
- Improved handling of dynamic bindings for better accuracy and
responsiveness to changes.

- **Bug Fixes**
- Enhanced test coverage for lint error annotations to ensure correct
behavior with and without `lintLength`.

- **Documentation**
- Updated comments for clarity regarding new linting logic and error
handling.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -258,6 +258,57 @@ describe("getLintAnnotations()", () => {
       },
     ]);
   });
+
+  it("should use provided lintlength when available", () => {
+    const value = `{{ variable }}`;
+    const errors: LintError[] = [
+      {
+        errorType: PropertyEvaluationErrorType.LINT,
+        raw: "variable",
+        severity: Severity.WARNING,
+        errorMessage: {
+          name: "LintingError",
+          message: "Lint error message.",
+        },
+        errorSegment: "variable",
+        originalBinding: "variable",
+        variables: ["variable"],
+        code: "W001",
+        line: 0,
+        ch: 3,
+        lintLength: 8, // Provided lint length
+      },
+    ];
+
+    const annotations = getLintAnnotations(value, errors, {});
+
+    expect(annotations[0].to?.ch).toBe(13);
+  });
+
+  it("should calculate lintlength when not provided", () => {
+    const value = `{{ variable }}`;
+    const errors: LintError[] = [
+      {
+        errorType: PropertyEvaluationErrorType.LINT,
+        raw: "variable",
+        severity: Severity.WARNING,
+        errorMessage: {
+          name: "LintingError",
+          message: "Lint error message.",
+        },
+        errorSegment: "variable",
+        originalBinding: "variable",
+        variables: ["variable"],
+        code: "W001",
+        line: 0,
+        ch: 3,
+      },
+    ];
+
+    const annotations = getLintAnnotations(value, errors, {});
+
+    expect(annotations[0].to?.ch).toBe(13);
+  });
 });
 
 describe("getFirstNonEmptyPosition", () => {

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

@@ -135,6 +135,7 @@ export const getLintAnnotations = (
       code,
       errorMessage,
       line,
+      lintLength,
       originalBinding,
       severity,
       variables,
@@ -157,16 +158,20 @@ export const getLintAnnotations = (
       });
     }
 
-    let variableLength = 1;
+    let calculatedLintLength = 1;
 
+    // If lint length is provided, then skip the length calculation logic
+    if (lintLength && lintLength > 0) {
+      calculatedLintLength = lintLength;
+    }
     // Find the variable with minimal length
-    if (variables) {
+    else if (variables) {
       for (const variable of variables) {
         if (variable) {
-          variableLength =
-            variableLength === 1
+          calculatedLintLength =
+            calculatedLintLength === 1
               ? String(variable).length
-              : Math.min(String(variable).length, variableLength);
+              : Math.min(String(variable).length, calculatedLintLength);
         }
       }
     }
@@ -205,7 +210,7 @@ export const getLintAnnotations = (
         };
         const to = {
           line: from.line,
-          ch: from.ch + variableLength,
+          ch: from.ch + calculatedLintLength,
         };
 
         annotations.push({

app/client/src/utils/DynamicBindingUtils.ts

@@ -436,6 +436,7 @@ export interface LintError extends DataTreeError {
   line: number;
   ch: number;
   originalPath?: string;
+  lintLength?: number;
 }
 
 export interface DataTreeEvaluationProps {