Enable @typescript-eslint/recommended(-type-checked) in create-next-app --typescript #37151
Replies: 4 comments 1 reply
-
I talked a bit with @anthonyshew (thanks for the advice Anthony!) about which benefits of the linting presets are most salient for Next.js & its team. The main points are: Embracing the Ecosystem StandardExtending the recommended rulesets is how you're strongly encouraged to use typescript-eslint. We've been working on getting more of the ecosystem to use them (typescript-eslint/typescript-eslint#6760). For example, Remix is on the A flip side of not using the standard is that Next.js isn't dogfooding/using the rules that many users are. See https://twitter.com/jullerino/status/1676926270309793794 as an example: the Fixing Common IssuesThe Next.js team has had to deal with a trickle of user reports caused by bad practices that would be caught by the typescript-eslint recommended rules.
In general, the recommended rules help flag common bugs and misuses of TypeScript - which improves the Next.js dev experience and can help reduce the amount of incoming issue reports. |
Beta Was this translation helpful? Give feedback.
-
Love it, @JoshuaKGoldberg! I talked to @timneutkens real quick and our idea that it might help with a lower triage burden didn't turn out. However, Tim also did agree this should be done, anyway! Would you be able to make a PR? Server Actions would be a spot where we would need to pay special attention that I can think of. There may be others. 🤔 |
Beta Was this translation helpful? Give feedback.
-
Glad that someone brought up this topic! For my new Next.js Book I wanted to provide students with standard ESLint rules such as |
Beta Was this translation helpful? Give feedback.
-
Cross-linking this to the "async functions discouraged in event handler props" topic that has been trending recently Just want to highlight that enabling the (because of the recommended-type-checked configuration of
import 'react';
export default function Component() {
return <button onClick={async () => 0} />;
} Error message:
|
Beta Was this translation helpful? Give feedback.
-
Describe the feature you'd like to request
Right now, Next.js projects created with
create-next-app --typescript
use the TSESLint parser for TypeScript projects -great!- but haven't enabled any of its preset configurations. Those configurations are recommended for most-to-all TypeScript projects by the TSESLint maintenance team (including @armano2, @bradzacher, @JamesHenry, and myself; CCing). At the very least they'd resolve some of the issues mentioned in #27051 around detecting floating promises.To verify the list of ESLint rules used in an app newly created with
create-next-app --typescript
, you can run:npx eslint --print-config pages/index.tsx > rules.json
Is there a particular reason not to include the
@typescript-eslint/recommended
and@typescript-eslint/recommended-requiring-type-checking
@typescript-eslint/recommended-type-checked
edit: updated for the v6 streamlining of the config configs for CNA users by default?A couple of notes on why that's likely more desirable now than in the past:
If there are still overly chafe-y rules, we're gearing up for a 6.X release and would be happy to move those to the new strict configurationEdit: we did this already 🙂Cheers!
Describe the solution you'd like
next/typescript
lint config ineslint-plugin-next
that extends from@typescript-eslint/recommended
and@typescript-eslint/recommended-requiring-type-checking
@typescript-eslint/recommended-type-checked
edit: updated for the v6 streamlining of the configcreate-next-app
, when--typescript
is provided, change the.eslintrc.json
file contents to:Note that this was started in #28181 by @kyliau.
Describe alternatives you've considered
@kyliau brought up a good point in #28181 that this adds a dependency on the
@typescript-eslint/eslint-plugin
package -which is separate from@typescript-eslint/parser
- for JS consumers. An alternative approach could be to have both of those be added topackage.json
and.eslintrc.js
as described in https://typescript-eslint.io/docs/linting/ only for--typescript
users.Edit July 11th, 2023: renamed from
recommended-requiring-type-checking
torecommended-type-checked
per Announcing typescript-eslint v6Beta Was this translation helpful? Give feedback.
All reactions