7a1c9eb17e
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`:  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
37 lines
967 B
TypeScript
37 lines
967 B
TypeScript
import chalk from 'chalk'
|
|
import path from 'path'
|
|
|
|
import { MissingDependency } from './has-necessary-dependencies'
|
|
import { shouldUseYarn } from './helpers/should-use-yarn'
|
|
import { install } from './helpers/install'
|
|
import { getOnline } from './helpers/get-online'
|
|
|
|
export type Dependencies = {
|
|
resolved: Map<string, string>
|
|
}
|
|
|
|
export async function installDependencies(
|
|
baseDir: string,
|
|
deps: any,
|
|
dev: boolean = false
|
|
) {
|
|
const useYarn = shouldUseYarn()
|
|
const isOnline = !useYarn || (await getOnline())
|
|
|
|
if (deps.length) {
|
|
console.log()
|
|
console.log(`Installing ${dev ? 'devDependencies' : 'dependencies'}:`)
|
|
for (const dep of deps) {
|
|
console.log(`- ${chalk.cyan(dep.pkg)}`)
|
|
}
|
|
console.log()
|
|
|
|
const devInstallFlags = { devDependencies: dev, ...{ useYarn, isOnline } }
|
|
await install(
|
|
path.resolve(baseDir),
|
|
deps.map((dep: MissingDependency) => dep.pkg),
|
|
devInstallFlags
|
|
)
|
|
console.log()
|
|
}
|
|
}
|