These are the ESLint and Prettier settings for a Next.js project ⚡️

• Eslint / Prettier Setup of @viclafouch 📦
• Table of Contents
  • What it does
  • Local / Per Project Install
    • Scripts
  • If you use TypeScript
    • Extend your tsconfig
    • Add the typescript eslint config
    • Better typing
    • Scripts
  • If you want to enable imports sorting
  • If you use Next.js
  • If you use React.js
  • If you want to use Prettier
  • If you use VS Code

• Lints JavaScript / TypeScript based on the latest standards
• Multiple configs react hooks next..
• Shared tsconfig.json
• Fixes issues and formatting errors with Prettier
• Check for accessibility rules on JSX elements.

1. If you don't already have a package.json file, create one with npm init.

2. Then we need to install the config:

npm i -D @viclafouch/eslint-config-viclafouch

1. Create a .eslintrc file in the root of your project's directory (it should live where package.json does). Your .eslintrc file should look like this:

2. Extends your config with the minimal base of @viclafouch config :

{
  "extends": [
    "@viclafouch/eslint-config-viclafouch"
  ]
}

or js version for .eslintrc.js file:

/**
 * @type {import("eslint").Linter.Config}
 */
module.exports = {
  extends: [
    "@viclafouch/eslint-config-viclafouch"
  ]
}

You can add two scripts to your package.json to lint and/or fix your code:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "npm run lint -- --fix",
  }
}

First, extend your current config file tsconfig.json with this following snippet:

{
  "extends": "@viclafouch/eslint-config-viclafouch/tsconfig.json",
  ...
}

Then, add the TypeScript Eslint rules to your .eslintrc file:

{
  "extends": [
    "@viclafouch/eslint-config-viclafouch",
    "@viclafouch/eslint-config-viclafouch/typescript"
  ]
}

or js version for .eslintrc.js file:

/**
 * @type {import("eslint").Linter.Config}
 */
module.exports = {
  extends: [
    '@viclafouch/eslint-config-viclafouch',
    '@viclafouch/eslint-config-viclafouch/typescript'
  ],
  parserOptions: {
    project: true,
    tsconfigRootDir: __dirname
  },
  root: true
}

TypeScript's built-in typings are not perfect. viclafouch-reset makes them better.

1. Create a reset.d.ts file in your project with these contents:

// Do not add any other lines of code to this file!
import '@viclafouch/eslint-config-viclafouch/reset.d'

2. Enjoy improved typings across your entire project.

You can add two scripts to your package.json to lint and/or fix your code:

{
  "scripts": {
    "lint": "tsc --noEmit && eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "npm run lint -- --fix",
  },
}

If you want to sort your imports using your alias at the same time from your jsonfig.json or tsconfig.json file.

{
  "extends": [
    "@viclafouch/eslint-config-viclafouch",
    "@viclafouch/eslint-config-viclafouch/imports"
  ]
}

You can also add additional rules for Next.js. It includes the following configurations : @viclafouch/eslint-config-viclafouch/react, @viclafouch/eslint-config-viclafouch/hooks and Next.js specific rules.

{
  "extends": [
    "@viclafouch/eslint-config-viclafouch",
    "@viclafouch/eslint-config-viclafouch/next"
  ]
}

You can also add additional rules for only React.js ecosystem (without Next.js).

{
  "extends": [
    "@viclafouch/eslint-config-viclafouch",
    "@viclafouch/eslint-config-viclafouch/react",
    "@viclafouch/eslint-config-viclafouch/hooks"
  ]
}

Be sure to add the prettier config at the end of your extends array.

{
  "extends": [
    "@viclafouch/eslint-config-viclafouch",
    "@viclafouch/eslint-config-viclafouch/imports",
    "@viclafouch/eslint-config-viclafouch/react",
    "@viclafouch/eslint-config-viclafouch/hooks",
    "@viclafouch/eslint-config-viclafouch/prettier" // be sure to be the last
  ]
}

Once you have done. You probably want your editor to lint and fix for you.

1. Install the ESLint package
2. Now we need to setup some VS Code settings. Create a .vscode folder at your root project, and create a settings.json file in this folder. Then, add this little config:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}