Blog>
Snippets

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.