fix(eslint): exclude parsing errors (#4673)

beta/src/components/MDX/Sandpack/Preview.tsx

@@ -7,7 +7,7 @@ import * as React from 'react';
 import {useSandpack, LoadingOverlay} from '@codesandbox/sandpack-react';
 import cn from 'classnames';
 import {Error} from './Error';
-import type {LintDiagnostic} from './utils';
+import type {LintDiagnostic} from './useSandpackLint';
 
 const generateRandomId = (): string =>
   Math.floor(Math.random() * 10000).toString();

beta/src/components/MDX/Sandpack/runESLint.tsx

@@ -41,7 +41,7 @@ const options = {
 
 export const runESLint = (
   doc: Text
-): {errors: any[]; codeMirrorPayload: Diagnostic[]} => {
+): {errors: any[]; codeMirrorErrors: Diagnostic[]} => {
   const codeString = doc.toString();
   const errors = linter.verify(codeString, options) as any[];
 
@@ -50,7 +50,7 @@ export const runESLint = (
     2: 'error',
   };
 
-  const codeMirrorPayload = errors
+  const codeMirrorErrors = errors
     .map((error) => {
       if (!error) return undefined;
 
@@ -65,6 +65,7 @@ export const runESLint = (
       });
 
       return {
+        ruleId: error.ruleId,
         from,
         to,
         severity: severity[error.severity],
@@ -74,7 +75,7 @@ export const runESLint = (
     .filter(Boolean) as Diagnostic[];
 
   return {
-    codeMirrorPayload,
+    codeMirrorErrors,
     errors: errors.map((item) => {
       return {
         ...item,

beta/src/components/MDX/Sandpack/useSandpackLint.tsx

@@ -25,10 +25,11 @@ export const useSandpackLint = () => {
   const onLint = linter(async (props: EditorView) => {
     const {runESLint} = await import('./runESLint');
     const editorState = props.state.doc;
-    let {errors, codeMirrorPayload} = runESLint(editorState);
+    let {errors, codeMirrorErrors} = runESLint(editorState);
-    // Only show errors from rules, not parsing errors etc
+    // Ignore parsing or internal linter errors.
-    setLintErrors(errors.filter((e) => !e.fatal));
+    const isReactRuleError = (error: any) => error.ruleId != null;
-    return codeMirrorPayload;
+    setLintErrors(errors.filter(isReactRuleError));
+    return codeMirrorErrors.filter(isReactRuleError);
   });
 
   return {lintErrors, lintExtensions: [onLint]};