@khuibeom/eslint-config-next v0.0.4

Description

Opinionated eslint config that I use for Next application.

Install

Install @khuibeom/eslint-config-next

npm i -D @khuibeom/eslint-config-next
# or
pnpm i -D @khuibeom/eslint-config-next
# or
yarn add -D @khuibeom/eslint-config-next

Extend it in .eslintrc

{
  "extends": "@khuibeom/next"
}

VS Code auto fix

If you want to auto fix code on save, add the following in .vscode/settings.json. Make sure ESLint extension is installed.

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Note

This is a wrapper around eslint config from Next-js-Boilerplate. I made some changes to the original config, however, including:

1. Removing prettier. I was influenced by this article
2. Allowing var and removing prefer-const. You can read about it here
3. Removing jest/cypress related configs.

You can always override the eslint config to include custom rules. For instance, you can use following config for adding back jest/cypress config from Next-js-Boilerplate that I removed:

{
  // Configuration for JavaScript files
  "extends": "@khuibeom/next",
  "overrides": [
    // Configuration for testing
    {
      "files": ["**/*.test.ts", "**/*.test.tsx"],
      "plugins": ["jest", "jest-formatting", "testing-library", "jest-dom"],
      "extends": [
        "plugin:jest/recommended",
        "plugin:jest-formatting/recommended",
        "plugin:testing-library/react",
        "plugin:jest-dom/recommended"
      ]
    },
    // Configuration for e2e testing (Cypress)
    {
      "files": ["cypress/**/*.ts"],
      "plugins": ["cypress"],
      "extends": ["plugin:cypress/recommended"],
      "parserOptions": {
        "project": "./cypress/tsconfig.json"
      }
    }
  ]
}

License

License