ESLint Config

A comprehensive and flexible ESLint configuration that supports a wide range of frameworks and environments. Easily integrate clean, consistent code standards across projects by enabling settings for specific tools and libraries.

This config covers multiple setups in a single, straightforward import, helping maintain consistency across different project types and frameworks.

Usage

1. Install package:

pnpm add --save-dev eslint @azat-io/eslint-config

2. Create ESLint configuration file eslint.config.js:

import eslintConfig from '@azat-io/eslint-config'

export default eslintConfig({
  perfectionist: true,
  typescript: true,
  react: true,
  node: true,
})

3. Add script for package.json:

{
  "scripts": {
    "test:js": "eslint \"**/*.{js,ts,jsx,tsx,json}\""
  }
}

Configuration

To configure the ESLint rules based on your project’s needs, import the config and pass an object with options for each framework or tool. By default, all options are disabled, so you can enable only what's relevant to your project.

import eslintConfig from '@azat-io/eslint-config'

export default eslintConfig({
  perfectionist: true,
  typescript: true,
  svelte: true,
  vitest: true,
  astro: true,
  react: true,
  qwik: true,
  node: true,
  vue: true,
})

perfectionist

Enables rules for sorting and organizing code structures for better readability and consistency.

typescript

Adds TypeScript-specific linting rules to ensure type safety and maintain TypeScript best practices.

svelte

Enables support for Svelte, including linting rules for Svelte components and files.

vitest

Adds support for Vitest, adjusting linting for testing files and practices within Vitest projects.

astro

Configures ESLint for Astro projects, with adjustments for Astro’s file structure and conventions.

react

Includes React-specific linting rules for JSX syntax, React hooks, and best practices within React environments.

qwik

Adds support for Qwik, adjusting linting for Qwik-specific syntax and conventions.

node

Adjusts linting for Node.js environments, addressing Node-specific globals, imports, and common practices.

vue

Adds Vue-specific linting rules, supporting Vue's syntax and best practices for Vue components.

extends

You can add your own configs. Example:

import eslintConfig from '@azat-io/eslint-config'

export default eslintConfig({
  extends: [
    {
      'no-undef': 'off',
    },
  ],
})

Plugins

This config uses the following plugins:

• @eslint/js
• @vitest/eslint-plugin
• eslint-plugin-astro
• eslint-plugin-import-x
• eslint-plugin-jsdoc
• eslint-plugin-jsx-a11y
• eslint-plugin-n
• eslint-plugin-package-json
• eslint-plugin-perfectionist
• eslint-plugin-prefer-arrow
• eslint-plugin-prefer-let
• eslint-plugin-promise
• eslint-plugin-qwik
• eslint-plugin-react
• eslint-plugin-react-compiler
• eslint-plugin-react-hooks
• eslint-plugin-react-perf
• eslint-plugin-regexp
• eslint-plugin-sonarjs
• eslint-plugin-svelte
• eslint-plugin-unicorn
• eslint-plugin-vue
• typescript-eslint

License

MIT © Azat S.