Eslint Config for NextTS project

This package provides Eslint's Config for NextJs Project.

Note 1: Only support the new Eslint flat config.

Note 2: This config is using the Airbnb eslint config.

Usage

1. Install package

pnpm add -D @lcbase/eslint-config-nextts eslint

2. Add config to your eslint.config.js. Please read more about Eslint Flat Config

import { baseNextTsConfig } from '@lcbase/eslint-config-nextts';

export default baseNextTsConfig;

3. Create a tsconfig.eslint.json file in root folder

{
  // extend your base config to share compilerOptions, etc
  "extends": "./tsconfig.json",
  "compilerOptions": {
    // ensure that nobody can accidentally use this config for a build
    "noEmit": true
  },
  "include": [
    // whatever paths you intend to lint
    "**/*.ts",
    "**/*.tsx"
  ]
}

4. Add script to your package.json and update esm config files.

• package.json

{
  "type": "module",
  "scripts": {
    "lint": "eslint \"src/**/*.{ts,tsx}*\"",
    "lint:fix": "pnpm lint --fix"
  }
}

• tailwind.config.js change module.exports to export default.
• next.config.js change module.exports to export default.
• change postcss.config.js to postcss.config.cjs.

5. Combine with @lcbase/prettier-config packages

pnpm add -D prettier @lcbase/prettier-config

{
  "prettier": "@lcbase/prettier-config",
  "scripts": {
    "lint": "eslint \"src/**/*.{ts,tsx}*\"",
    "lint:fix": "pnpm lint --fix",
    "prettify": "prettier src --check",
    "prettify:fix": "prettier src --write",
    "format": "pnpm prettify:fix && pnpm lint:fix"
  }
}

6. Configuration your VScode.

In root your project's folder. Create .vscode folder with structure:

.vscode
  - settings.json

{
  "eslint.experimental.useFlatConfig": true,
  // if mono-repo remove below line comment
  // "eslint.workingDirectories": [{ "pattern": "./apps/*/" }, { "pattern": "./packages/*/" }],
  "eslint.options": {
    "overrideConfigFile": "eslint.config.js"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

7. Setup git hooks

• Install packages and global setup husky, lint-staged.

pnpm add -D husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"

• Add the following to your package.json:

{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,cjs,mjs,jsx,cjsx,mjsx,ts,mts,cts,tsx,mtsx,ctsx}": ["pnpm format"],
    "*.{json,css,md,html}": ["pnpm prettify:fix"]
  }
}

Extends

You can extends this config by:

import { extendBaseNextTsConfig } from '@lcbase/eslint-config-nextts';

const config = extendBaseNextTsConfig({
  files: (Linter.FlatConfigFileSpec | Linter.FlatConfigFileSpec[])[] | undefined, // files that you want to lint
  extendConfig: Linter.FlatConfig | Linter.FlatConfig[] | undefined, // your override extends config here
});

export default config;