@febase/eslint-config-react

Eslint Config React JS

This package provides eslint config for the reactjs projects.

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-react eslint

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

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

export default [...config];

If you only want to use standalone react config.

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

export default [reactConfig];

3. Add script to your package.json.

{
  "scripts": {
    "lint": "eslint \"src/**/*.{js,jsx}\"",
    "lint:fix": "pnpm lint"
  }
}

Configuration your VScode.

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

.vscode
  - settings.json

{
  "eslint.experimental.useFlatConfig": true,
  // if 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"]
  }
}