Creating a basic ESLint configuration file
Demonstrate how to set up a basic .eslintrc.js file for a Next.js 14 project by defining environments, extending recommended rules and plugins like React.
module.exports = {
env: {
browser: true,
es2022: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@next/next/recommended'
],
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 'latest',
sourceType: 'module'
},
settings: {
react: {
version: 'detect'
}
},
plugins: [
'react'
],
rules: {
// Place to specify ESLint rules - can be used to overwrite rules
// specified from the extended configs e.g. "quotes": ["error", "double"]
}
};
This code creates a basic ESLint configuration for a Next.js 14 project. It specifies the environment settings for the browser, ES2022, and Node.js. It extends 'eslint:recommended' for basic linting rules, 'plugin:react/recommended' for React-specific linting, and 'plugin:@next/next/recommended' for Next.js-specific best practices. The config also sets up parser options to support the latest ECMAScript version and JSX syntax. React's version is auto-detected with the settings property. It also includes the react plugin for React-specific linting rules. Users can add or overwrite rules in the 'rules' object.