JavaScript / TypeScript in aider

Background

aider is a powerful AI programming assistant, which brings its own linter system, but advanced JS/TS template languages such as JSX/TSX or Svelte allow multiple different languages in one file, e.g. HTML, CSS and JS/TS, which is a nightmare to parse and lint correctly. It is no surprise that aider's internal linter fails at this task.

Setup

Thankfully it is easy to use custom linting and type checking in aider, especially with the help of the package manager. My recommendation is to setup two scripts inside package.json like this:

1
2
3
4

"scripts": {
   "lint": "eslint",
   "typecheck": "tsc --noEmit"
 },

(This assumes that you use a correctly setup eslint as your linter. In case of a Vercel Next.js project, your lint script might already be set to next lint, leave it at that.)

Usage

Now you can use both easily from inside aider with the /run command. This allows you to automatically send the errors to the context, which in case of type checking with tsc is very powerful, as these error messages are of exceptional high quality, especially good digestible for LLMs (less so for humans).

(of course you can use your favorite package manager/runtime, e.g. npm, yarn or even bun instead of pnpm)

Automation

Run via aider's test-cmd and /test

Create a .aider.conf.yml file in the repository root of your project. Set only the test-cmd option, as lint-cmd gets run for every file and is really slow.

For the test-cmd we can set either

• linting
• type checking
• testing

Or a combination of these options, we can use simple shell logic to concatenate command lines: The && operator will only call the next command when the first one exited without error. Here is an example that combines all three cases:

1

pnpm run lint && pnpm run typecheck && pnpm run test

Leave out the test part if you do not have tests set up, but a typical way to test is via vitest, the package.json script entry would look like this:

1
2
3

"scripts": {
    "test": "vitest",
}

Here is what an example .aider.conf.yml would look like:

1
2
3
4

lint-cmd: 'true'
auto-lint: false
test-cmd: 'pnpm run lint && pnpm run typecheck && pnpm run test'
auto-test: true

(lint-cmd is set to 'true' intentionally to disable the internal linter, you can leave this out if you like)

If you do not like to run the automatically, you can also set auto-test to false and trigger these scripts manually from inside aider with /test.

Run via pre-commit hook using Husky

TDB. For now see the Husky docs

Written by fry69 Comments please in the aider Discord