Eslint Config Next TS

This package provides eslint config for the nextjs projects use the typescript.

Only support the new Eslint flat config.

Prettier and Linters

1. Prettier Config: Prettier config for the Front-end projects.
2. Prettier Config: Prettier config for the Svelte projects.
3. Eslint Config Base: Eslint config for the Javascript projects.
4. Eslint Config Typescript: Eslint config for the Typescript projects.
5. Eslint Config React JS: Eslint config for the React JS projects.
6. Eslint Config React TS: Eslint config for the React TS projects.
7. Eslint Config Next JS: Eslint config for the Next JS projects.
8. Eslint Config Next TS: Eslint config for the Next TS projects.
9. Eslint Config Lit JS: Eslint config for the Lit JS projects.
10. Eslint Config Lit TS: Eslint config for the Lit TS projects.
11. Eslint Config Node ESM: Eslint config for the Node Esm projects.
12. Eslint Config Svelte JS: Eslint config for the Svelte projects.
13. Eslint Config Svelte TS: Eslint config for the Svelte TS projects.

and more to come.

Usage

1. Install package

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

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

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

export default [...config];

3. Add script to your package.json.

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

4. tsconfig.eslint.json and tsconfig.json.

• Search for the tsconfig.eslint.json file from the folder containing the eslint.config.js file up to the root folder.
• if tsconfig.eslint.json file is not found. The tsconfig.json file in the current folder will be used.
• If you have a tsconfig.json file and its include paths include all the files you'd like to lint, you can directly use that file without using the tsconfig.eslint.json file.

5. Monorepo

• Should only create a tsconfig.eslint.json in root monorepo.
• parserOptions.project supports ['./tsconfig.eslint.json', './packages/*/tsconfig.json', './apps/*/tsconfig.json'].

Configuration your VScode.

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

.vscode
  - settings.json

{
  "eslint.experimental.useFlatConfig": true,
  // if the `eslint.config.js` file is in mono-repo please remove comment of the below line.
  // "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
}

Setup git hooks

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

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

• Add the following to your package.json:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["pnpm format", "pnpm lint:fix"],
    "*.{json,css,md,html}": ["pnpm format"]
  }
}