`next lint` + ESLint in Create Next App #25064

housseindjirdeh · 2021-05-12T19:38:59Z

This PR does the following:

Removes the experimental eslint flag
Introduces next lint which when run for the first time:
- Provides a guided setup to install any required dependencies (eslint, eslint-config-next) if they are not installed
- Automatically creates an .eslintrc file with the default config (extends: "next")
- Runs linton the pages/ dir on or other specified directories
Adds a --no-lint flag for next build to disable ESLint running as a build step
Adds an additional next/core-web-vitals entry point to eslint-config-next to error on a few core rules that affect Core Web Vitals
Includes ESLint in both Create Next App templates for new applications (not when using --example or --example-path)
- eslint and eslint-config-next are included as dev dependencies
- extends: ["next" , "next/core-web-vitals"] is included by default in .eslintrc
Adds documentation

housseindjirdeh · 2021-05-13T14:17:38Z

@timneutkens We can merge this PR last once we're okay with everything, happy with the proposed idea of adding ESLint to Create Next App and made sure all the appropriate rules have landed to the plugin 🙏

merceyz · 2021-05-14T21:16:28Z

The PnP e2e test is failing due to missing dependencies

ijjk · 2021-05-24T22:51:15Z

Failing test suites

Commit: ee29a91

test/integration/create-next-app/index.test.js

create next app > should support typescript flag

Expand output

● create next app › should support typescript flag

expect(received).toEqual(expected) // deep equality

- Expected  - 0
+ Received  + 2

  Array [
    "@types/react",
+   "eslint",
+   "eslint-config-next",
    "typescript",
  ]

  143 |         'react-dom',
  144 |       ])
> 145 |       expect(Object.keys(pkgJSON.devDependencies)).toEqual([
      |                                                    ^
  146 |         '@types/react',
  147 |         'typescript',
  148 |       ])

  at integration/create-next-app/index.test.js:145:52
  at usingTempDir (integration/create-next-app/index.test.js:20:5)
  at Object.<anonymous> (integration/create-next-app/index.test.js:104:5)

housseindjirdeh · 2021-05-24T23:51:57Z

@merceyz Modified the build command to not run ESLint in the PnP test. Otherwise it fails since it resolves to .eslintrc.json used for the Next.js repo itself but doesn't find up the required deps that aren't used in any of the examples (eslint-config-next, eslint)

… next app templates, and documentation

timneutkens · 2021-06-01T07:56:27Z

Seems that when the checks pass there's no output except 2 empty lines

yarn next lint test/integration/basic
yarn run v1.22.10
$ node --trace-deprecation packages/next/dist/bin/next lint test/integration/basic


✨  Done in 1.74s

docs/basic-features/eslint.md

timneutkens · 2021-06-01T07:59:10Z

docs/basic-features/eslint.md

+If you do not want ESLint to run as a build step, it can be disabled using the `--no-lint` flag:
+
+```bash
+next build --no-lint


This should be a next.config.js flag in my opinion, similar to TypeScript

Agreed 👍

timneutkens · 2021-06-01T08:01:41Z

docs/basic-features/eslint.md

+
+## Linting Custom Directories
+
+By default, Next.js will only run ESLint for all files in the `pages/` directory. However, you can specify other custom directories to run by using the `--dir` flag in `next lint`:


The default should definitely be pages, components, and lib as those are the most common setup

Agreed 👍 and in next.config.js globally.

timneutkens · 2021-06-01T08:02:37Z

docs/basic-features/eslint.md

+
+## ESLint Plugin
+
+Next.js provides an ESLint plugin, [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next), that makes it easier to catch common issues and problems in a Next.js application. The full set of rules can be found in the [package repository](https://github.com/vercel/next.js/tree/master/packages/eslint-plugin-next/lib/rules).


Instead of linking to them we should maintain a list in this document to allow for a description, but for now it's fine to have it linked 👍

docs/basic-features/eslint.md

…-next-app

ijjk · 2021-06-02T18:37:23Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
buildDuration	14.7s	15.1s	⚠️ +376ms
buildDurationCached	3.9s	4s	⚠️ +138ms
nodeModulesSize	46.7 MB	46.7 MB	⚠️ +6.43 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.686	2.688	0
/ avg req/sec	930.67	930.18	⚠️ -0.49
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.613	1.587	-0.03
/error-in-render avg req/sec	1550.03	1575.73	+25.7

Client Bundles (main, webpack, commons)

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	19.5 kB	19.5 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	59.5 kB	59.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Rendered Page Sizes

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
index.html gzip	559 B	559 B	✓
link.html gzip	568 B	568 B	✓
withRouter.html gzip	556 B	556 B	✓
Overall change	1.68 kB	1.68 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
buildDuration	16.7s	16.8s	⚠️ +184ms
buildDurationCached	5.2s	5.2s	-48ms
nodeModulesSize	46.7 MB	46.7 MB	⚠️ +6.43 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	19.5 kB	19.5 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	59.5 kB	59.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Serverless bundles

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
_error.js	16.9 kB	16.9 kB	✓
404.html	2.42 kB	2.42 kB	✓
500.html	2.41 kB	2.41 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.61 kB	1.61 kB	✓
css.html	1.79 kB	1.79 kB	✓
hooks.html	1.67 kB	1.67 kB	✓
index.js	17.2 kB	17.2 kB	✓
link.js	17.4 kB	17.4 kB	✓
routerDirect.js	17.4 kB	17.4 kB	✓
withRouter.js	17.4 kB	17.4 kB	✓
Overall change	107 kB	107 kB	✓

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
buildDuration	13.7s	13.3s	-395ms
buildDurationCached	5.8s	6s	⚠️ +224ms
nodeModulesSize	46.7 MB	46.7 MB	⚠️ +6.43 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.853	2.793	-0.06
/ avg req/sec	876.16	895.19	+19.03
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.695	1.633	-0.06
/error-in-render avg req/sec	1475.32	1530.58	+55.26

Client Bundles (main, webpack, commons)

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
677f882d2ed8..HASH.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.26 kB	7.26 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
_app-HASH.js gzip	1.07 kB	1.07 kB	✓
_error-HASH.js gzip	3.74 kB	3.74 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.63 kB	1.63 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	9.16 kB	9.16 kB	✓

Client Build Manifests

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	housseindjirdeh/next.js eslint-create-next-app	Change
index.html gzip	614 B	614 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Commit: 06c0929

leerob · 2021-06-05T18:12:24Z

docs/basic-features/eslint.md

+If you do not want ESLint to run as a build step, it can be disabled using the `--no-lint` flag:
+
+```bash
+next build --no-lint


Agreed 👍

leerob · 2021-06-05T18:12:38Z

docs/basic-features/eslint.md

+
+## Linting Custom Directories
+
+By default, Next.js will only run ESLint for all files in the `pages/` directory. However, you can specify other custom directories to run by using the `--dir` flag in `next lint`:


Agreed 👍 and in next.config.js globally.

leerob · 2021-06-05T18:13:38Z

docs/basic-features/eslint.md

+}
+```
+
+This configuration extends recommended rule sets from various Eslint plugins:


ESLint capitalization here is different than the rest of the doc.

leerob · 2021-06-05T18:15:19Z

docs/basic-features/eslint.md

+
+### Core Web Vitals
+
+A stricter `next/core-web-vitals` entrypoint can also be specified in `.eslintrc`:


"entry point" instead of "entrypoint" IMO.

leerob · 2021-06-05T18:17:14Z

docs/api-reference/cli.md

@@ -84,6 +84,16 @@ The application will start at `http://localhost:3000` by default. The default po
 npx next start -p 4000
 ```

+## Lint
+
+`next lint` runs ESLint for all files in the `pages` directory and provides a guided setup to install any required dependencies if ESLint is not already configured in your application.


If we change from just pages, let's update here too 👍

Some slight tweaks based on my review of the docs. A few outstanding questions left 😄 #25064 (review)

Co-authored-by: Tim Neutkens <tim@timneutkens.nl> Co-authored-by: Tim Neutkens <timneutkens@me.com>

Some slight tweaks based on my review of the docs. A few outstanding questions left 😄 vercel#25064 (review)

housseindjirdeh requested review from divmain, ijjk, leerob, lfades, shuding and timneutkens as code owners May 12, 2021 19:39

ijjk added create-next-app Related to our CLI tool for quickly starting a new Next.js application. type: documentation type: next labels May 12, 2021

This comment has been minimized.

Sign in to view

housseindjirdeh changed the title ~~Moves ESLint to stable + add to Create Next App templates~~ (WIP) Moves ESLint to stable + add to Create Next App templates May 12, 2021

This comment has been minimized.

Sign in to view

housseindjirdeh added the type: chrome label May 13, 2021

housseindjirdeh changed the title ~~(WIP) Moves ESLint to stable + add to Create Next App templates~~ Moves ESLint to stable + add to Create Next App templates May 13, 2021

housseindjirdeh changed the title ~~Moves ESLint to stable + add to Create Next App templates~~ (WIP) Moves ESLint to stable + add to Create Next App templates May 14, 2021

This comment has been minimized.

Sign in to view

housseindjirdeh changed the title ~~(WIP) Moves ESLint to stable + add to Create Next App templates~~ next lint + ESLint in Create Next App templates May 17, 2021

housseindjirdeh changed the title ~~next lint + ESLint in Create Next App templates~~ next lint + ESLint in Create Next App May 17, 2021

This comment has been minimized.

Sign in to view

removes eslint flag, adds lint cli command, includes eslint in create…

919192a

… next app templates, and documentation

This comment has been minimized.

Sign in to view

timneutkens reviewed Jun 1, 2021

View reviewed changes

docs/basic-features/eslint.md Outdated Show resolved Hide resolved

Update docs/basic-features/eslint.md

04c7903

timneutkens reviewed Jun 1, 2021

View reviewed changes

docs/basic-features/eslint.md Outdated Show resolved Hide resolved

Update docs/basic-features/eslint.md

8a13da3

timneutkens reviewed Jun 1, 2021

View reviewed changes

docs/basic-features/eslint.md Outdated Show resolved Hide resolved

timneutkens and others added 2 commits June 1, 2021 10:36

Update docs/basic-features/eslint.md

68fb379

Merge branch 'canary' of github.com:vercel/next.js into eslint-create…

5895713

…-next-app

timneutkens previously approved these changes Jun 1, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

Merge branch 'canary' into eslint-create-next-app

06c0929

housseindjirdeh dismissed timneutkens’s stale review via 06c0929 June 2, 2021 18:24

timneutkens merged commit bbc28cc into vercel:canary Jun 3, 2021

leerob reviewed Jun 5, 2021

View reviewed changes

leerob mentioned this pull request Jun 5, 2021

Update ESLint docs. #25816

Merged

kodiakhq bot pushed a commit that referenced this pull request Jun 5, 2021

Update ESLint docs. (#25816)

5d38d06

Some slight tweaks based on my review of the docs. A few outstanding questions left 😄 #25064 (review)

sync-by-unito bot mentioned this pull request Jun 16, 2021

chore(deps): bump next from 10.1.2 to 11.0.0 filecoin-project/slate#793

Closed

flybayer pushed a commit to blitz-js/next.js that referenced this pull request Jun 16, 2021

next lint + ESLint in Create Next App (vercel#25064)

019ed23

Co-authored-by: Tim Neutkens <tim@timneutkens.nl> Co-authored-by: Tim Neutkens <timneutkens@me.com>

flybayer pushed a commit to blitz-js/next.js that referenced this pull request Jun 16, 2021

Update ESLint docs. (vercel#25816)

30e006f

Some slight tweaks based on my review of the docs. A few outstanding questions left 😄 vercel#25064 (review)

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`next lint` + ESLint in Create Next App #25064

`next lint` + ESLint in Create Next App #25064

housseindjirdeh commented May 12, 2021 •

edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

housseindjirdeh commented May 13, 2021 •

edited

merceyz commented May 14, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented May 24, 2021

This comment has been minimized.

housseindjirdeh commented May 24, 2021

This comment has been minimized.

timneutkens commented Jun 1, 2021

timneutkens Jun 1, 2021 •

edited

leerob Jun 5, 2021

timneutkens Jun 1, 2021

leerob Jun 5, 2021

timneutkens Jun 1, 2021 •

edited

This comment has been minimized.

ijjk commented Jun 2, 2021

leerob Jun 5, 2021

leerob Jun 5, 2021

leerob Jun 5, 2021

leerob Jun 5, 2021

leerob Jun 5, 2021


		## Linting Custom Directories

		By default, Next.js will only run ESLint for all files in the `pages/` directory. However, you can specify other custom directories to run by using the `--dir` flag in `next lint`:


		## ESLint Plugin

		Next.js provides an ESLint plugin, [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next), that makes it easier to catch common issues and problems in a Next.js application. The full set of rules can be found in the [package repository](https://github.com/vercel/next.js/tree/master/packages/eslint-plugin-next/lib/rules).


		### Core Web Vitals

		A stricter `next/core-web-vitals` entrypoint can also be specified in `.eslintrc`:

next lint + ESLint in Create Next App #25064

next lint + ESLint in Create Next App #25064

Conversation

housseindjirdeh commented May 12, 2021 • edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

housseindjirdeh commented May 13, 2021 • edited

merceyz commented May 14, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented May 24, 2021

Failing test suites

This comment has been minimized.

housseindjirdeh commented May 24, 2021

This comment has been minimized.

timneutkens commented Jun 1, 2021

timneutkens Jun 1, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

timneutkens Jun 1, 2021 • edited

Choose a reason for hiding this comment

This comment has been minimized.

ijjk commented Jun 2, 2021

Stats from current PR

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

`next lint` + ESLint in Create Next App #25064

`next lint` + ESLint in Create Next App #25064

housseindjirdeh commented May 12, 2021 •

edited

housseindjirdeh commented May 13, 2021 •

edited

timneutkens Jun 1, 2021 •

edited

timneutkens Jun 1, 2021 •

edited