@javalce/eslint-config v0.12.2

@javalce/eslint-config

This configuration is opinionated and it may not fit your needs. You can extend it and override the rules that you don't like.

• @javalce/eslint-config
  • Features
  • Installation
  • Basic Usage
  • Configuration
    • Overriding rules
    • Ignore files
    • TypeScript
  • React
  • Next.js
  • Svelte
  • Solidjs
  • Vue
    • Vue 2
  • Astro
  • Testing
    • Testing with Jest
    • Testing with Vitest
    • Testing + React or Vue

Features

• Supports ESLint v9
• ESLint Flat Config file format
• Does not lint .gitignore listed files (I think that if you don't want to track a file, you don't want to lint it)
• Designed to work with TypeScript, React, Next.js, Node.js, and more smoothly out of the box
• Automatically loads the config for the framework you are using
• Some rules can be auto-fixed with eslint --fix
• Uses some stylistic rules to make your code more readable and consistent

!WARNING I like to use Prettier to format my code, so the enabled stylistic rules are the ones that Prettier doesn't format.

If you want to use Prettier, you can use my personal config @javalce/prettier-config.

Installation

Install ESLint and this config as dev dependencies:

pnpm add --save-dev eslint @javalce/eslint-config

Basic Usage

Create an eslint.config.mjs file in the root of your project with the following content:

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({});

By default it uses the ecmaVersion 2023. If you want to use a different version, you can specify it in the configuration:

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  ecmaVersion: 2021,
});

Configuration

To configure ESLint, you have to use the defineConfig function, as shown in the previous section. This function will return the ESLint configuration object.

T, you have to enable each framework configuration explicitly, otherwise it will not be loaded except for the typescript config, which is loaded automatically.

After you enable a framework, if you don't have the required ESLint plugins for this framework installed, ESLint will throw an error when you run it showing you the missing plugins.

For more information about each configuration option, check the respective section.

Overriding rules

You can override the rules by passing an array of ESLint configurations to the overrides option.

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  overrides: [
    {
      files: ['*.ts'],
      rules: {
        'no-undef': 'off',
      },
    },
    {
      files: ['*.js'],
      rules: {
        'no-undef': 'error',
      },
    },
  ],
});

Ignore files

By default, the ESLint configuration will ignore all files in the .gitignore file. If you want to ignore additional files, you can pass the ignores option to the configuration:

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  ignores: ['src/types.d.ts'],
});

TypeScript

To enable TypeScript support, you only need to install the typescript package:

pnpm add --save-dev typescript

By default, it will automatically load the typescript config and the configuration will look for a tsconfig.json file in the root of your project.

Some projects use a tsconfig.eslint.json file to specify the typescript configuration for ESLint. In that case, it will automatically load the tsconfig.eslint.json file if it exists, otherwise it will load the tsconfig.json file.

If you want, you can enable explicitly the TypeScript config:

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  typescript: true,
});

Also, if you want to use a different file, you can specify it in the configuration:

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  typescript: './path/to/tsconfig.custom.json',
});

Or you can use multiple tsconfig files:

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  typescript: ['./path/to/tsconfig.json', './path/to/another/tsconfig.json'],
});

Instead of using the passing the path to the tsconfig file(s) in the configuration, you can only pass the filename(s) and let the configuration resolve the absolute path for you.

React

To enable React support, you need to install the eslint-plugin-react, eslint-plugin-react-hooks and eslint-plugin-jsx-a11y packages:

pnpm add --save-dev eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-plugin-jsx-a11y

Then, update your ESLint configuration file to enable the React config:

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  react: true,
});

Next.js

To enable Next.js support, you need to install all the react plugins and the @next/eslint-plugin-next packages:

pnpm add --save-dev eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-plugin-jsx-a11y @next/eslint-plugin-next

Then, update your ESLint configuration file to enable the react and Next.js config:

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  react: true,
  next: true,
});

This will enable the react rules and the Next.js specific rules.

Svelte

To enable Svelte support, you need to install the eslint-plugin-svelte and svelte-eslint-parser packages:

pnpm add --save-dev eslint-plugin-svelte svelte-eslint-parser

Then, update your ESLint configuration file to enable the Svelte config:

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  svelte: true,
});

Solidjs

To enable Solidjs support, you need to install the eslint-plugin-solid package:

pnpm add --save-dev eslint-plugin-solid

Then, update your ESLint configuration file to enable the Solidjs config:

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  solidjs: true,
});

Vue

To enable Vue support, you need to install the eslint-plugin-vue and vue-eslint-parser package:

pnpm add --save-dev eslint-plugin-vue vue-eslint-parser

Then, update your ESLint configuration file to enable the Vue config:

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  vue: true,
});

Vue 2

Vue 2 has reached EOL and it's not recommended to use it. However, if you still want to use it, you can enable the Vue 2 config:

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  vue: {
    version: 2,
  },
});

Astro

To enable Astro support, you need to install the astro-eslint-plugin, astro-eslint-parser and eslint-plugin-jsx-a11y package:

pnpm add --save-dev astro-eslint-plugin astro-eslint-parser eslint-plugin-jsx-a11y

Then, update your ESLint configuration file to enable the Astro config:

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  astro: true,
});

Astro can be integrated with other frameworks like React, Vue, Svelte, Solidjs, etc. You can enable the respective configs to lint the code of the framework.

Testing

To enable testing support, you must enable the testing option in the configuration. You can choose between jest or vitest and it will load the recommended rules for each testing library.

Testing with Jest

If you are using Jest, install the eslint-plugin-jest package:

pnpm add --save-dev eslint-plugin-jest

Then, update your ESLint configuration file to enable the Jest config:

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  testing: 'jest',
});

Testing with Vitest

If you are using Vitest, install the eslint-plugin-vitest package:

pnpm add --save-dev eslint-plugin-vitest

Then, update your ESLint configuration file to enable the Vitest config:

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  testing: 'vitest',
});

Testing + React or Vue

To enable testing with React or Vue, you only need to enable the respective config and the testing config and it will load the recommended rules for the @testing-library package.

import { defineConfig } from '@javalce/eslint-config';

export default defineConfig({
  react: true, // or vue
  testing: 'vitest', // or vitest
});

Also, you need to install the eslint-plugin-testing-library package:

pnpm add --save-dev eslint-plugin-testing-library