My go-to Next.js ESlint config

If you're working on Next.js project, setting up ESLint is a solid move for keeping your code clean and consistent. ESLint is a powerful and widely-used static code analysis tool designed to identify problematic patterns or code that doesn't adhere to certain style guidelines in JavaScript and TypeScript codebases.

Adding eslint to the toolbox

As of Next.js 11, ESLint is integrated right out of the box. For existing projects, or if you need to manually set it up, it's as straightforward as running a couple of commands:

pnpm install eslint eslint-config-next --save-dev

Then, you can set up your initial ESLint configuration file by running:

npx eslint --init

Recommended config

ESLint offers a wide range of community-established patterns and practices known as the "recommended" config. This configuration is a curated list of rules that aim to catch common bugs and enforce a consistent coding style.

My go-to config looks something like this:

const { resolve } = require("node:path");
 
const project = resolve(process.cwd(), "tsconfig.json");
 
/** @type {import("eslint").Linter.Config} */
module.exports = {
	extends: [
		"eslint:recommended",
		"prettier",
		"next",
		"next/core-web-vitals"
		require.resolve("@vercel/style-guide/eslint/next"),
	],
	globals: {
		React: true,
		JSX: true,
		window: true,
	},
	env: {
		node: true,
	},
	plugins: [],
	settings: {
		"import/resolver": {
			typescript: {
				project,
			},
		},
	},
	ignorePatterns: [
		// Ignore dotfiles
		".*.js",
		"node_modules/",
	],
	overrides: [{ files: ["*.js?(x)", "*.ts?(x)"] }],
	parser: "@typescript-eslint/parser",
	parserOptions: {
		project: true,
	},
	rules: {
		"no-unused-vars": "off",
	},
};
 

Note that that I’m using .eslintrc.js file to be able to run Javascript code. One of the perfect packages I know is @vercel/style-guide. It’s going to go over your head most of the times, but believe me it’s worth it! Enjoy lots of lint warning and errors!

Continue Reading