Use eslint v9 flat config

[plbstl]

Priority*

• High: This PR needs to be merged first for other tasks.
• Middle: This PR should be merged quickly to prevent conflicts due to common changes. (default)
• Low: This PR does not affect other tasks, so it can be merged later.

Purpose of the PR*

Use eslint version 9 flat config.

Changes*

This PR upgrades eslint to version 9 and uses the flat config.

How to check the feature

Add code that warns or errors when eslint is set up correctly.

Reference

• Closes Use eslint 9 #465

[github-actions]

Thank you for your contribution. We will check and reply to you as soon as possible.

[PatrykKuniczak]

Let's remove also:

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore

from packages/i18n and

// eslint-disable-next-line
// @ts-ignore

from pages/content-runtime/lib

and check all // eslint-disable-next-line e.g. for refresh and reload because the most of it isn't necessary probably 😄

[plbstl]

Okay, I'll make those changes now

[PatrykKuniczak]

@plbstl Let's rebase ASAP, you'll avoid more conflicts, because i'm working on other new things 😄

[plbstl]

For the recent changes in #697, I was thinking pnpm exec may be better than pnpx (pnpm dlx) since it uses the locally installed packages.

https://pnpm.io/cli/exec#examples

[PatrykKuniczak]

@plbstl Are you able to set this --flag unstable_ts_config inside config file, instead of the flag in each script?

[plbstl]

I checked the source code, the option is only available as a CLI flag

[plbstl]

Replaced eslint-plugin-import with eslint-plugin-import-x as it supports eslint v9.

It also has an additional rule no-rename-default under Helpful warnings section.

[PatrykKuniczak]

@plbstl You've merge main wrongly, because i see unnecessary files(which shouldn't be shown as change here) in Files changed

And you have a lot of conflicts, let's solve it

[plbstl]

@PatrykKuniczak The conflicts have now been resolved

[PatrykKuniczak]

It doesn't work at all

First of all, eslint config wasn't found be IDE
Second thing, when i've added
tsconfig for this eslint:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Chrome Extension Utils",
  "extends": "./packages/tsconfig/base.json",
  "compilerOptions": {
    "noEmit": false
  },
  "include": ["eslint.config.ts"]
}

and "ready": "tsc -p eslint.tsconfig.json && turbo ready" for package.json and i've run it.
But it still doesn't work because of the lack of types.

And after all we have this warns, which are the problem, why we not decide to bump eslint to version 9:

I think this PR is overkill for that simply solution as eslint is.
IDN what to do with it, maybe @Jonghakseo have sth to say about it.
IMO the best idea is wait a little, when this libs start to support eslint 9

PS: After bundle this eslint.config.js file still isn't detected, maybe change this .ts to .js hymm maybe let's try to do workaround for this.

[plbstl]

Can you tell me the name of the IDE? The repo does not contain any config files for IDEs. You have to instruct the specific IDE eslint plugin to load the config. Just as discussed in #699 (comment)

@typescript-eslint/eslint-plugin and @typescript-eslint/parser are no longer needed, a mistake on my part for not removing the dependencies. See https://typescript-eslint.io/packages/typescript-eslint/#migrating-from-legacy-config-setups

Same goes for eslint-plugin-jsx-a11y. Updating https://github.com/jsx-eslint/eslint-plugin-jsx-a11y to 6.10 fixes the peer dependency issue, as it nows supports eslint version 9 and flat config.

I don't know where the eslint-plugin-import issue is coming from. eslint-import-resolver-typescript has correct peer dependencies (https://github.com/import-js/eslint-import-resolver-typescript/blob/01902942c42292ab3cd266c2d6855c76a2ab5d7e/package.json#L64) and eslint-plugin-import-x is used and it is not depending on eslint-plugin-import.

Since eslint-config-airbnb-typescript is archived (https://github.com/iamturns/eslint-config-airbnb-typescript), I don't think it'll ever support eslint version 9, flat config or even update its peer dependencies.

[PatrykKuniczak]

Can you tell me the name of the IDE? The repo does not contain any config files for IDEs. You have to instruct the specific IDE eslint plugin to load the config. Just as discussed in #699

@typescript-eslint/eslint-plugin and @typescript-eslint/parser are no longer needed, a mistake on my part for not removing the dependencies. See https://typescript-eslint.io/packages/typescript-eslint/#migrating-from-legacy-config-setups

Same goes for eslint-plugin-jsx-a11y. Updating eslint-plugin-jsx-a11y to 6.10 fixes the peer dependency issue.

I don't know where the eslint-plugin-import issue is coming from. eslint-import-resolver-typescript has correct peer dependencies (https://github.com/import-js/eslint-import-resolver-typescript/blob/01902942c42292ab3cd266c2d6855c76a2ab5d7e/package.json#L64) and eslint-plugin-import-x is used and it is not depending on eslint-plugin-import.

Since eslint-config-airbnb-typescript is archived (https://github.com/iamturns/eslint-config-airbnb-typescript), I don't think it'll ever support version 9 or even update its peer dependencies.

You've pinned This PR in Just as discussed in https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/699 it's correct?

I have been using WebStorm

[plbstl]

You've pinned This PR in Just as discussed in https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/699 it's correct?

This is what I meant to link to: Just as discussed in https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/699#discussion_r1747710475

[PatrykKuniczak]

@plbstl In the future, you can Copy link

It's easier to navigate by everybody, because it creates clickable link 😄

[PatrykKuniczak]

@plbstl Let's rebase branch

[plbstl]

@plbstl In the future, you can Copy link

It's easier to navigate by everybody, because it creates clickable link 😄

Thank you, that's what I did but for some reason it added a search param for a notification_referrer_id before the URL hash

https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/699?notification_referrer_id=id#discussion_r1747710475

[PatrykKuniczak]

All your imports:
import * as anything from "anything"

should be:
import anything from "anything"

If it doesn't work you don't include or set types in tsconfig properly

[plbstl]

All your imports: import * as anything from "anything"

should be: import anything from "anything"

If it doesn't work you don't include or set types in tsconfig properly

It works. Its just that eslint shows a warning for the import-x/no-named-as-default-member rule.

Should I change it back and turn off the rule? Or change the imports to named imports? Or something else?

[PatrykKuniczak]

All your imports: import * as anything from "anything"
should be: import anything from "anything"
If it doesn't work you don't include or set types in tsconfig properly

It works. Its just that eslint shows a warning for the import-x/no-named-as-default-member rule.

Should I change it back and turn off the rule? Or change the imports to named imports? Or something else?

Maybe set it off, because we're using default imports

[plbstl]

The change works for import * as ts from 'typescript-eslint'. However, the remaining import * as anything from "anything" statements are for esbuild imports which shows eslint error:

Going through the esbuild docs, the examples I see uses a import * as esbuild from 'esbuild' import.

• https://esbuild.github.io/getting-started/#build-scripts
• https://esbuild.github.io/plugins/#http-plugin
• https://esbuild.github.io/plugins/#using-plugins

[PatrykKuniczak]

@plbstl You're right, because no default is exported from there :)

Leave it, in the way you've done it

But there's greater problem. my IDE still can't find config, because of .ts i think this should be .js because it works.

Or use .ts but build this file on postinstall and IDE will be using bundled version of this, let's check if it will be working 😄

If yes, then add .js to .gitignore and it will work perfect :)

PS: With second approach, we can have 100% ts coverage, maybe it's worth efford 😄

[PatrykKuniczak]

I've resolve conflicts, and add 1 missing types, but theres still some work:
As you can see, there's a bunch of warns:

Let's fix it, but:
https://github.com/iamturns/eslint-config-airbnb-typescript
Isn't longer supported, you need to find sth else, which supporting eslint v9
eslint-config-airbnb-base is also have last update 3 years ago
eslint-plugin-import is still as a peer deps
And there's missing types:

Let's try to find solution, because we don't want to merge it, becasue of potential problems with deps, we want to avoid it, that's why we don't decided to implement it for now, but i hope you're able to fix it.

PS: For reproduce that error try e.g. pnpm add -D nodemon -w

[PatrykKuniczak]

@plbstl Are you working on it?

[PatrykKuniczak]

@plbstl Are you eager to go on?