Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to eslint v9 and update all dependencies #2

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

stefanmaric
Copy link
Member

@stefanmaric stefanmaric commented Jan 22, 2025

Flat Config

This major release requires a complete rewrite of your projects' ESLint config file as we moved to the new Flat Config format.

Start by reading ESLint's migration guide: https://eslint.org/docs/latest/use/configure/migration-guide

ESM-only

This release moves forward and assumes ESM-only projects, so if you're still using CommonJS, you'll need to update your project to use ESM first.

Peer-dependencies

Some peer dependencies have been changed:

  • @typescript-eslint/eslint-plugin -> typescript-eslint
  • eslint-plugin-import -> eslint-plugin-import-x
  • eslint-plugin-node -> eslint-plugin-n
  • @typescript-eslint/parser is now packaged into typescript-eslint
  • The resolver has changed to eslint-import-resolver-typescript

Packages to remove:

eslint-plugin-import eslint-plugin-node @typescript-eslint/eslint-plugin @typescript-eslint/parser

Packages to add:

@eslint/js eslint-plugin-import-x eslint-plugin-n typescript-eslint eslint-import-resolver-typescript

Packages to update:

eslint eslint-plugin-jsx-a11y eslint-plugin-react-hooks eslint-plugin-react

Prettier

The prettier entry has been changed from .cjs to .js, as we are now using ESM-only.

-  "prettier": "@masterworks/eslint-config-masterworks/prettier",
+  "prettier": "@masterworks/eslint-config-masterworks/prettier/prettier.js",

TypeScript

The minimum compatible TypeScript version is now 5.7.3.

React PropTypes

Rules related to PropTypes have been removed, as they have been deprecated and removed by the React Core Team. You should ideally remove PropTypes from your project and use TypeScript instead.

Improved detection of deprecated APIs

Most presets have warnings for the usage of deprecated rules. With the different upgrades this detection has improved and you most probably will get new warnings.

@stefanmaric stefanmaric force-pushed the eslint-v9 branch 2 times, most recently from 4ee037b to 3cd313a Compare January 22, 2025 16:55
Copy link

@kadza kadza left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you might want to review rules, so to be 100% that you didn't delete too much

@@ -2,6 +2,67 @@

## Unreleased
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we have this file in our repo?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't follow. What's your concern?

@@ -30,9 +37,11 @@ module.exports = {
'@typescript-eslint/prefer-readonly': 'error',
'@typescript-eslint/prefer-reduce-type-parameter': 'error',
'@typescript-eslint/prefer-string-starts-ends-with': 'error',
'@typescript-eslint/sort-type-constituents': 'error',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this on purpose?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kadza was intended as the rule has been deprecated: https://typescript-eslint.io/rules/sort-type-constituents/

But I actually forgot to add it back via the Perfectionist package. Good catch.

'prefer-arrow-callback': 'error',
'prefer-destructuring': 'error',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one I intentionally disabled because in practice it produces more harm than good.

One clear example is that it forces you to change:

let thing

if (otherThing.length) {
  thing = otherThing[0]
}

To this:

let thing

if (otherThing.length) {
  ;[thing] = otherThing
}

Which is absurd.

The other thing is that destructing, even tho implemented in all engines almost a decade ago and optimized the hell of it, is still slower than direct property access. It will usually be negligible for most of the kind of stuff we write at Masterworks, but still one less reason to force it.

**Flat Config**

This major release requires a complete rewrite of your projects' ESLint config file as we moved to the new Flat Config format.

Start by reading ESLint's migration guide: https://eslint.org/docs/latest/use/configure/migration-guide

**ESM-only**

This release moves forward and assumes ESM-only projects, so if you're still using CommonJS, you'll need to update your project to use ESM first.

**Peer-dependencies**

Some peer dependencies have been changed:

- `@typescript-eslint/eslint-plugin` -> `typescript-eslint`
- `eslint-plugin-import` -> `eslint-plugin-import-x`
- `eslint-plugin-node` -> `eslint-plugin-n`
- `@typescript-eslint/parser` is now packaged into `typescript-eslint`
- The resolver has changed to `eslint-import-resolver-typescript`

Packages to remove:

```
eslint-plugin-import eslint-plugin-node @typescript-eslint/eslint-plugin @typescript-eslint/parser
```

Packages to add:

```
@eslint/js eslint-plugin-import-x eslint-plugin-n typescript-eslint eslint-import-resolver-typescript
```

Packages to update:

```
eslint eslint-plugin-jsx-a11y eslint-plugin-react-hooks eslint-plugin-react
```

**Prettier**

The `prettier` entry has been changed from .cjs to .js, as we are now using ESM-only.

```diff
-  "prettier": "@masterworks/eslint-config-masterworks/prettier",
+  "prettier": "@masterworks/eslint-config-masterworks/prettier/prettier.js",
```

**TypeScript**

The minimum compatible TypeScript version is now 5.7.3.

***React PropTypes***

Rules related to PropTypes have been removed, as they have been deprecated and removed by the React Core Team. You should ideally remove PropTypes from your project and use TypeScript instead.

**Improved detection of deprecated APIs**

Most presets have warnings for the usage of deprecated rules. With the different upgrades this detection has improved and you most probably will get new warnings.

[f:8h]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants