English | 中文

A shareable and reusable ESLint configuration by ZL Asica, designed to provide consistent linting rules across JavaScript, TypeScript, and React projects with Prettier compatibility. (For Prettier configuration, please check here)

• Installation
• Usage
  • Basic Usage (JavaScript Projects)
  • TypeScript Projects
  • React Projects
  • TypeScript + React Combined
• Configuration Details
• Why Use This Configuration?

Install this package as a development dependency in your project (npm 7+):

npm install --save-dev eslint eslint-config-zl-asica
# or with Yarn
yarn add -D eslint eslint-config-zl-asica
# or with pnpm
pnpm add -D eslint eslint-config-zl-asica

This configuration offers three modular configurations: default (JavaScript), TypeScript, and React. You can import each as needed.

For JavaScript projects, import the base configuration:

// `eslint.config.js` or `eslint.config.mjs`
import { zlAsicaConfig } from 'eslint-config-zl-asica';

export default [
  ...zlAsicaConfig,

  // Custom modifications
  {
    rules: {
      'no-console': 'warn',
    },
  },
];

For TypeScript projects, use zlAsicaTsConfig, which includes the base configuration plus TypeScript rules:

// `eslint.config.js` or `eslint.config.mjs`
import { zlAsicaTsConfig } from 'eslint-config-zl-asica';

export default [
  ...zlAsicaTsConfig,

  // Custom modifications
  {
    rules: {
      'no-console': 'warn',
    },
  },
];

For React projects, use zlAsicaReactConfig, which includes the base configuration plus React rules:

// `eslint.config.js` or `eslint.config.mjs`
import { zlAsicaReactConfig } from 'eslint-config-zl-asica';

export default [
  ...zlAsicaReactConfig,

  // Custom modifications
  {
    rules: {
      'no-console': 'warn',
    },
  },
];

For projects using both TypeScript and React, use zlAsicaTsReactConfig, a combination of all configurations:

// `eslint.config.js` or `eslint.config.mjs`
import { zlAsicaTsReactConfig } from 'eslint-config-zl-asica';

export default [
  ...zlAsicaTsReactConfig,

  // Custom modifications
  {
    rules: {
      'no-console': 'warn',
    },
  },
];

This configuration includes the following rule sets and plugins:

• JavaScript Rules: Consistent formatting and style conventions for JavaScript (and jsx).
• TypeScript Rules: Type-safe coding standards for TypeScript projects.
• React Rules: React-specific rules for React and React hooks.
• Prettier Compatibility: Integrates eslint-config-prettier to disable formatting rules that might conflict with Prettier.

• import/ignore: Ignores CSS and other stylesheets for imports.
• import/order: External first then internal, newline in between.
• React Version Detection: Automatically detects the installed React version.

This configuration ensures:

• A consistent code style across multiple projects.
• Easy integration with JavaScript, TypeScript, and React projects.
• Compatibility with Prettier, reducing formatting conflicts.

If you’d like to suggest improvements, please feel free to open a pull request or issue on GitHub.

This project is licensed under the MIT License.