@viclafouch/eslint-config-viclafouch

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

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

• Then we need to install the config:

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

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

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

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

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

• Install the ESLint package
• 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"
  }
}