rsnext/packages/next/lib/eslint/runLintCheck.ts
Houssein Djirdeh 7a1c9eb17e
[ESLint] Introduce a new setup process when next lint is run for the first time (#26584)
This PR introduces an improved developer experience when `next lint` is run for the first time.

### Current behavior

`eslint-config-next` is a required package that must be installed before proceeding with `next lint` or `next build`:

![image](https://user-images.githubusercontent.com/12476932/123468791-43088100-d5c0-11eb-9ad0-5beb80b6c968.png)

Although this has helped many developers start using the new ESLint config, this has also resulted in a few issues:

- Users are required to install the full config (`eslint-config-next`) even if they do not use it or use the Next.js plugin directly (`eslint-plugin-next`).
  - #26348

- There's some confusion  on why `eslint-config-next` needs to be installed or how it should be used instead of `eslint-plugin-next`.
  - #26574
  - #26475
  - #26438

### New behavior

Instead of enforcing `eslint-config-next` as a required package, this PR prompts the user by asking what config they would like to start. This happens when `next lint` is run for the first time **and** if no ESLint configuration is detected in the application.

<img src="https://user-images.githubusercontent.com/12476932/124331177-e1668a80-db5c-11eb-8915-38d3dc20f5d4.gif" width="800" />

- The CLI will take care of installing `eslint` or `eslint-config-next` if either is not already installed
- Users now have the option to choose between a strict configuration (`next/core-web-vitals`) or just the base configuration (`next`)
- For users that decide to create their own ESLint configuration, or already have an existing one, **installing `eslint-config-next` will not be a requirement for `next lint` or `next build` to run**. A warning message will just show if the Next.js ESLint plugin is not detected in an ESLint config. 

  <img width="682" alt="Screen Shot 2021-06-25 at 3 02 12 PM" src="https://user-images.githubusercontent.com/12476932/123473329-6cc4a680-d5c6-11eb-9a57-d5c0b89a2732.png">

---

In addition, this PR also:

- Fixes #26348
- Updates documentation to make it more clear what approach to take for new and existing ESLint configurations
2021-08-04 21:53:15 +00:00

331 lines
9.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { promises as fs } from 'fs'
import chalk from 'chalk'
import path from 'path'
import findUp from 'next/dist/compiled/find-up'
import semver from 'next/dist/compiled/semver'
import * as CommentJson from 'next/dist/compiled/comment-json'
import { LintResult, formatResults } from './customFormatter'
import { writeDefaultConfig } from './writeDefaultConfig'
import { hasEslintConfiguration } from './hasEslintConfiguration'
import { ESLINT_PROMPT_VALUES } from '../constants'
import { existsSync, findPagesDir } from '../find-pages-dir'
import { installDependencies } from '../install-dependencies'
import { hasNecessaryDependencies } from '../has-necessary-dependencies'
import { isYarn } from '../is-yarn'
import * as Log from '../../build/output/log'
import { EventLintCheckCompleted } from '../../telemetry/events/build'
type Config = {
plugins: string[]
rules: { [key: string]: Array<number | string> }
}
const requiredPackages = [
{ file: 'eslint/lib/api.js', pkg: 'eslint' },
{ file: 'eslint-config-next', pkg: 'eslint-config-next' },
]
async function cliPrompt() {
console.log(
chalk.bold(
`${chalk.cyan(
'?'
)} How would you like to configure ESLint? https://nextjs.org/docs/basic-features/eslint`
)
)
try {
const cliSelect = (await import('next/dist/compiled/cli-select')).default
const { value } = await cliSelect({
values: ESLINT_PROMPT_VALUES,
valueRenderer: (
{
title,
recommended,
}: { title: string; recommended?: boolean; config: any },
selected: boolean
) => {
const name = selected ? chalk.bold.underline.cyan(title) : title
return name + (recommended ? chalk.bold.yellow(' (recommended)') : '')
},
selected: chalk.cyan(' '),
unselected: ' ',
})
return { config: value?.config }
} catch {
return { config: null }
}
}
async function lint(
baseDir: string,
lintDirs: string[],
eslintrcFile: string | null,
pkgJsonPath: string | null,
lintDuringBuild: boolean = false,
eslintOptions: any = null,
reportErrorsOnly: boolean = false,
maxWarnings: number = -1,
formatter: string | null = null
): Promise<
| string
| null
| {
output: string | null
isError: boolean
eventInfo: EventLintCheckCompleted
}
> {
try {
// Load ESLint after we're sure it exists:
const deps = await hasNecessaryDependencies(baseDir, requiredPackages)
if (deps.missing.some((dep) => dep.pkg === 'eslint')) {
Log.error(
`ESLint must be installed${
lintDuringBuild ? ' in order to run during builds:' : ':'
} ${chalk.bold.cyan(
isYarn(baseDir)
? 'yarn add --dev eslint'
: 'npm install --save-dev eslint'
)}`
)
return null
}
const mod = await import(deps.resolved.get('eslint')!)
const { ESLint } = mod
let eslintVersion = ESLint?.version ?? mod?.CLIEngine?.version
if (!eslintVersion || semver.lt(eslintVersion, '7.0.0')) {
return `${chalk.red(
'error'
)} - Your project has an older version of ESLint installed${
eslintVersion ? ' (' + eslintVersion + ')' : ''
}. Please upgrade to ESLint version 7 or later`
}
let options: any = {
useEslintrc: true,
baseConfig: {},
errorOnUnmatchedPattern: false,
extensions: ['.js', '.jsx', '.ts', '.tsx'],
...eslintOptions,
}
let eslint = new ESLint(options)
let nextEslintPluginIsEnabled = false
const pagesDirRules = ['@next/next/no-html-link-for-pages']
for (const configFile of [eslintrcFile, pkgJsonPath]) {
if (!configFile) continue
const completeConfig: Config = await eslint.calculateConfigForFile(
configFile
)
if (completeConfig.plugins?.includes('@next/next')) {
nextEslintPluginIsEnabled = true
break
}
}
const pagesDir = findPagesDir(baseDir)
if (nextEslintPluginIsEnabled) {
let updatedPagesDir = false
for (const rule of pagesDirRules) {
if (
!options.baseConfig!.rules?.[rule] &&
!options.baseConfig!.rules?.[
rule.replace('@next/next', '@next/babel-plugin-next')
]
) {
if (!options.baseConfig!.rules) {
options.baseConfig!.rules = {}
}
options.baseConfig!.rules[rule] = [1, pagesDir]
updatedPagesDir = true
}
}
if (updatedPagesDir) {
eslint = new ESLint(options)
}
} else {
Log.warn(
'The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config'
)
}
const lintStart = process.hrtime()
let results = await eslint.lintFiles(lintDirs)
let selectedFormatter = null
if (options.fix) await ESLint.outputFixes(results)
if (reportErrorsOnly) results = await ESLint.getErrorResults(results) // Only return errors if --quiet flag is used
if (formatter) selectedFormatter = await eslint.loadFormatter(formatter)
const formattedResult = formatResults(
baseDir,
results,
selectedFormatter?.format
)
const lintEnd = process.hrtime(lintStart)
const totalWarnings = results.reduce(
(sum: number, file: LintResult) => sum + file.warningCount,
0
)
return {
output: formattedResult.output,
isError:
ESLint.getErrorResults(results)?.length > 0 ||
(maxWarnings >= 0 && totalWarnings > maxWarnings),
eventInfo: {
durationInSeconds: lintEnd[0],
eslintVersion: eslintVersion,
lintedFilesCount: results.length,
lintFix: !!options.fix,
nextEslintPluginVersion: nextEslintPluginIsEnabled
? require(path.join(
path.dirname(deps.resolved.get('eslint-config-next')!),
'package.json'
)).version
: null,
nextEslintPluginErrorsCount: formattedResult.totalNextPluginErrorCount,
nextEslintPluginWarningsCount:
formattedResult.totalNextPluginWarningCount,
},
}
} catch (err) {
if (lintDuringBuild) {
Log.error(
`ESLint: ${err.message ? err.message.replace(/\n/g, ' ') : err}`
)
return null
} else {
throw new Error(err)
}
}
}
export async function runLintCheck(
baseDir: string,
lintDirs: string[],
lintDuringBuild: boolean = false,
eslintOptions: any = null,
reportErrorsOnly: boolean = false,
maxWarnings: number = -1,
formatter: string | null = null,
strict: boolean = false
): ReturnType<typeof lint> {
try {
// Find user's .eslintrc file
const eslintrcFile =
(await findUp(
[
'.eslintrc.js',
'.eslintrc.yaml',
'.eslintrc.yml',
'.eslintrc.json',
'.eslintrc',
],
{
cwd: baseDir,
}
)) ?? null
const pkgJsonPath = (await findUp('package.json', { cwd: baseDir })) ?? null
let packageJsonConfig = null
if (pkgJsonPath) {
const pkgJsonContent = await fs.readFile(pkgJsonPath, {
encoding: 'utf8',
})
packageJsonConfig = CommentJson.parse(pkgJsonContent)
}
const config = await hasEslintConfiguration(eslintrcFile, packageJsonConfig)
let deps
if (config.exists) {
// Run if ESLint config exists
return await lint(
baseDir,
lintDirs,
eslintrcFile,
pkgJsonPath,
lintDuringBuild,
eslintOptions,
reportErrorsOnly,
maxWarnings,
formatter
)
} else {
// Display warning if no ESLint configuration is present during "next build"
if (lintDuringBuild) {
Log.warn(
`No ESLint configuration detected. Run ${chalk.bold.cyan(
'next lint'
)} to begin setup`
)
return null
} else {
// Ask user what config they would like to start with for first time "next lint" setup
const { config: selectedConfig } = strict
? ESLINT_PROMPT_VALUES.find(
(opt: { title: string }) => opt.title === 'Strict'
)!
: await cliPrompt()
if (selectedConfig == null) {
// Show a warning if no option is selected in prompt
Log.warn(
'If you set up ESLint yourself, we recommend adding the Next.js ESLint plugin. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config'
)
return null
} else {
// Check if necessary deps installed, and install any that are missing
deps = await hasNecessaryDependencies(baseDir, requiredPackages)
if (deps.missing.length > 0)
await installDependencies(baseDir, deps.missing, true)
// Write default ESLint config.
// Check for /pages and src/pages is to make sure this happens in Next.js folder
if (
existsSync(path.join(baseDir, 'pages')) ||
existsSync(path.join(baseDir, 'src/pages'))
) {
await writeDefaultConfig(
baseDir,
config,
selectedConfig,
eslintrcFile,
pkgJsonPath,
packageJsonConfig
)
}
}
Log.ready(
`ESLint has successfully been configured. Run ${chalk.bold.cyan(
'next lint'
)} again to view warnings and errors.`
)
return null
}
}
} catch (err) {
throw err
}
}