Struggles to find errors.

[Jedward23]

Issue

The way it shares errors with the AI looks like this:

Fix any errors below, if possible.

See relevant lines below marked with █.

src/components/Dashboard/MonthlyConfig/FinancialOverview.tsx: 1█import React, { useState, useEffect, useCallback, useMemo } from 'react'; 2│import { MonthlyConfig, GlobalAgencyData, Expense, MonthlyExpense, GlobalCategory, HealthMetrics } from '../../../types/types'; 3│import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip, LineChart, Line, XAxis, YAxis, CartesianGrid } from 'recharts'; 4│import { useAgencyCalculations } from '../../../hooks/useAgencyCalculations'; ...⋮... 279│ const renderMetric = useCallback((label: string, value: number, previousValue?: number) => { 280│ const change = calculateChange(value, previousValue); 281│ return ( 282█

283█ {label}: 284█

285█

{formatCurrency(value)}

286│ {showComparison && change !== null && previousValue !== undefined && ( 287█ <div className={text-sm ${getColorClass(value - previousValue)}}> 288│ {change} 289│

290│ )} 291│

292│

[tdobson]

I'm writing React, and I've had the linter utterly fail me in usefulness in this same way.

when I provide the lines and the linting errors, the llm's generally have quite a good approach to resolving it.

I think it'd even do quite a good job if the linters provided the liste of errors at the top of the file - but that's not what happens - the LLM's just are told to guess what's wrong on specific lines, and fail... hard. :(

[Jedward23]

Agreed, I think if Aider could just find a way to provide the errors from REACT in a clearer way that the LLM can understand. It could accomplish far more without any supervision.

--

Thank you,

Jason Edward Nicoll Director of Marketing & Operations

On Fri, Aug 23, 2024 at 6:56 AM Tim Dobson @.***> wrote:

I'm writing React, and I've had the linter utterly fail me in usefulness in this same way.

when I provide the lines and the linting errors, the llm's generally have quite a good approach to resolving it.

I think it'd even do quite a good job if the linters provided the liste of errors at the top of the file - but that's not what happens - the LLM's just are told to guess what's wrong on specific lines, and fail... hard. :(

— Reply to this email directly, view it on GitHub https://github.com/paul-gauthier/aider/issues/1132#issuecomment-2305882367, or unsubscribe https://github.com/notifications/unsubscribe-auth/AU5VA7A5R4YZZXPNTCIQXBLZSZUCLAVCNFSM6AAAAABMZCFRBCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBVHA4DEMZWG4 . You are receiving this because you authored the thread.Message ID: @.***>

[tdobson]

A thought @Jedward23 : do we have any idea where/how React's linter thing works?

Eg is it possible to call it and get a list of these errors?

eg

$ findMyErrors.exe.sh src/ts ERROR in src/components/Dashboard/MonthlyConfig/FinancialOverview.tsx:440:91 TS2304: Cannot find name 'previousFinancials'. 438 | {renderMetric('Gross Profit', currentFinancials.grossProfit, showComparison ? previousFinancials?.grossProfit : undefined)} 439 | {renderMetric('Tax Amount', currentFinancials.tax, showComparison ? previousFinancials?.tax : undefined)} ERROR in src/components/Dashboard/MonthlyConfig/FinancialOverview.tsx:439:85 TS2304: Cannot find name 'previousFinancials'. 437 | 438 | {renderMetric('Gross Profit', currentFinancials.grossProfit, showComparison ? previousFinancials?.grossProfit : undefined)}

[paul-gauthier]

Thanks for trying aider and filing this issue.

You can specify your preferred linter with --lind-cmd.

This doc may be helpful: https://aider.chat/docs/usage/lint-test.html

[tdobson]

@Jedward23 try something like

$ aider --lint-cmd "typescript:npx tsc --noEmit --skipLibCheck --skipDefaultLibCheck "

It's not perfect, but I suspect with a bit of tweaking we can find something that works well for typescript projects like React often is. :)

[paul-gauthier]

I'm going to close this issue for now, but feel free to add a comment here and I will re-open or file a new issue any time.

[paul-gauthier]

FYI, aider will no longer attempt to use the built in linter for typescript. It appears to not be useful.

The change is available in the main branch. You can get it by installing the latest version from github:

aider --install-main-branch

# or...

python -m pip install --upgrade git+https://github.com/paul-gauthier/aider.git