chore(website): show tsconfig parsing errors in tab (typescript-eslint#10991)

developer-bandi · kirkwaiblinger · web-flow · commit 25728c230968 · 2025-07-07T08:27:47.000-04:00
* WIP

* feat: add tsconfig error

* fix: remove console.log &amp; not use code

* fix: fix code review

---------

Co-authored-by: Kirk Waiblinger &lt;53019676+kirkwaiblinger@users.noreply.github.com&gt;
diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx
@@ -86,7 +86,7 @@ function ErrorBlock({
           </FixButton>
         )}
       </div>
-      {item.suggestions.length > 0 && (
+      {item.suggestions && item.suggestions.length > 0 && (
         <div>
           {item.suggestions.map((fixer, index) => (
             <div
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
@@ -33,7 +33,11 @@ function Playground(): React.JSX.Element {
   const windowSize = useWindowSize();
   const [state, setState] = useHashState(defaultConfig);
   const [astModel, setAstModel] = useState<UpdateModel>();
-  const [markers, setMarkers] = useState<ErrorGroup[]>();
+  const [markers, setMarkers] = useState<Record<TabType, ErrorGroup[]>>({
+    code: [],
+    eslintrc: [],
+    tsconfig: [],
+  });
   const [ruleNames, setRuleNames] = useState<RuleDetails[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [tsVersions, setTSVersion] = useState<readonly string[]>([]);
@@ -165,8 +169,10 @@ function Playground(): React.JSX.Element {
               active={state.showAST ?? false}
               additionalTabsInfo={{
                 Errors:
-                  markers?.reduce((prev, cur) => prev + cur.items.length, 0) ||
-                  0,
+                  markers[activeTab].reduce(
+                    (prev, cur) => prev + cur.items.length,
+                    0,
+                  ) || 0,
               }}
               change={showAST => setState({ showAST })}
               tabs={detailTabs}
@@ -216,7 +222,7 @@ function Playground(): React.JSX.Element {
                 />
               )
             ) : (
-              <ErrorsViewer value={markers} />
+              <ErrorsViewer value={markers[activeTab]} />
             )}
           </div>
         </Panel>
diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
@@ -83,8 +83,23 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
     const markers = monaco.editor.getModelMarkers({
       resource: model.uri,
     });
-    onMarkersChange(parseMarkers(markers, codeActions, editor));
-  }, [codeActions, onMarkersChange, editor, monaco.editor]);
+
+    const errors = parseMarkers(markers, codeActions, editor);
+
+    onMarkersChange(prev => {
+      const tsconfigErrors =
+        activeTab === 'tsconfig' &&
+        !errors.length &&
+        Object.values(prev[activeTab]).filter(
+          error => error.group === 'TypeScript',
+        );
+
+      return {
+        ...prev,
+        [activeTab]: tsconfigErrors || errors,
+      };
+    });
+  }, [activeTab, codeActions, onMarkersChange, editor, monaco.editor]);
 
   useEffect(() => {
     webLinter.updateParserOptions(sourceType);
diff --git a/packages/website/src/components/editor/types.ts b/packages/website/src/components/editor/types.ts
@@ -5,7 +5,9 @@ export interface CommonEditorProps extends ConfigModel {
   readonly activeTab: TabType;
   readonly onASTChange: (value: UpdateModel | undefined) => void;
   readonly onChange: (cfg: Partial<ConfigModel>) => void;
-  readonly onMarkersChange: (value: ErrorGroup[]) => void;
+  readonly onMarkersChange: React.Dispatch<
+    React.SetStateAction<Record<TabType, ErrorGroup[]>>
+  >;
   readonly onSelect: (position?: number) => void;
   readonly selectedRange?: SelectedRange;
 }
diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts
@@ -119,6 +119,7 @@ export const useSandboxServices = (
           system,
           lintUtils,
           sandboxInstance.tsvfs,
+          props.onMarkersChange,
         );
         onModelCreate.register(webLinter.registerFile);
 
diff --git a/packages/website/src/components/linter/createLinter.ts b/packages/website/src/components/linter/createLinter.ts
@@ -7,6 +7,10 @@ import type {
 } from '@typescript-eslint/utils/ts-eslint';
 import type * as ts from 'typescript';
 
+import type {
+  ErrorGroup,
+  TabType,
+} from '../../../../website/src/components/types';
 import type {
   LinterOnLint,
   LinterOnParse,
@@ -44,6 +48,9 @@ export function createLinter(
   system: PlaygroundSystem,
   webLinterModule: WebLinterModule,
   vfs: typeof tsvfs,
+  onMarkersChange: React.Dispatch<
+    React.SetStateAction<Record<TabType, ErrorGroup[]>>
+  >,
 ): CreateLinter {
   const rules: CreateLinter['rules'] = new Map();
   const configs = new Map(Object.entries(webLinterModule.configs));
@@ -155,14 +162,47 @@ export function createLinter(
   };
 
   const applyTSConfig = (fileName: string): void => {
+    let error: ErrorGroup | null = null;
+
     try {
       const file = system.readFile(fileName) ?? '{}';
       const parsed = parseTSConfig(file).compilerOptions;
       compilerOptions = createCompilerOptions(parsed);
       console.log('[Editor] Updating', fileName, compilerOptions);
       parser.updateConfig(compilerOptions);
     } catch (e) {
-      console.error(e);
+      if (e instanceof Error) {
+        error = {
+          group: 'TypeScript',
+          items: e.message
+            .trim()
+            .split('\n')
+            .map((message: string) => {
+              return {
+                message,
+                severity: 8, // MarkerSeverity.Error
+              };
+            }),
+          uri: undefined,
+        };
+      }
+    } finally {
+      onMarkersChange(prev => {
+        const activeTabErrors = Object.fromEntries(
+          prev.tsconfig.map(error => [error.group, error]),
+        );
+
+        if (error) {
+          activeTabErrors.TypeScript = error;
+        } else {
+          delete activeTabErrors.TypeScript;
+        }
+
+        return {
+          ...prev,
+          tsconfig: Object.values(activeTabErrors),
+        };
+      });
     }
   };
 
diff --git a/packages/website/src/components/types.ts b/packages/website/src/components/types.ts
@@ -40,10 +40,10 @@ export type SelectedRange = [number, number];
 
 export interface ErrorItem {
   fixer?: { fix(): void; message: string };
-  location: string;
+  location?: string;
   message: string;
   severity: number;
-  suggestions: { fix(): void; message: string }[];
+  suggestions?: { fix(): void; message: string }[];
 }
 
 export interface ErrorGroup {
