Eslint / Prettier Setup of @viclafouch 📦

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

Table of Contents

• 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

What it does

• 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.

Local / Per Project Install

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"
  ]
}

Scripts

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",
  }
}

If you use TypeScript

Extend your tsconfig

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

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

Add the typescript eslint config

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
}

Better typing

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.

Scripts

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 enable imports sorting

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"
  ]
}

If you use Next.js

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"
  ]
}

If you use React.js

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"
  ]
}

If you want to use Prettier

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
  ]
}

If you use VS Code

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"
  }
}