npm package: @libs-for-dev/eslint-rules
Description: Libs for Dev ESLint rules
Author: libs-for-dev
Latest version: 2.7.0

# Strict ESLint rules for `libs-for-dev` repositories

> The strictest ESLint configuration for modern JavaScript/TypeScript development

## Table of Contents
- [Strict ESLint rules for `libs-for-dev` repositories](#strict-eslint-rules-for-libs-for-dev-repositories)
  - [Table of Contents](#table-of-contents)
  - [Features](#features)
  - [Requirements](#requirements)
  - [Installation](#installation)
    - [Basic Installation](#basic-installation)
    - [Peer Dependencies](#peer-dependencies)
      - [Required for all projects:](#required-for-all-projects)
      - [For React projects:](#for-react-projects)
      - [For Vue projects:](#for-vue-projects)
      - [For Svelte projects:](#for-svelte-projects)
    - [Complete Installation Examples](#complete-installation-examples)
      - [React + TypeScript project:](#react--typescript-project)
      - [Vue + TypeScript project:](#vue--typescript-project)
      - [Svelte + TypeScript project:](#svelte--typescript-project)
  - [Supported File Types](#supported-file-types)
  - [Usage](#usage)
    - [Basic Configuration](#basic-configuration)
    - [TypeScript Project](#typescript-project)
    - [Vue.js Project](#vuejs-project)
    - [Customization](#customization)
  - [ESLint Rules Overview](#eslint-rules-overview)
    - [Code Quality Rules](#code-quality-rules)
    - [Style Rules](#style-rules)
    - [TypeScript Specific](#typescript-specific)
    - [React Specific](#react-specific)
    - [Vue Specific](#vue-specific)
    - [Testing (Vitest)](#testing-vitest)
    - [Documentation](#documentation)
    - [Import/Export](#importexport)
    - [Performance](#performance)
    - [Regular Expressions](#regular-expressions)
    - [Package.json](#packagejson)

## Features
- 🎯 Zero-config setup for common project types
- 🔧 Comprehensive rule sets for JS, TS, Vue, React, Svelte and more
- 🎨 Built-in stylistic rules (no Prettier needed)
- 📝 Strict file naming conventions
- ✨ Best practices enforcement

## Requirements
- Node.js >=24.7.0
- ESLint >=9.0.0 <10.0.0

## Installation

> ⚠️ **Important**: This package uses peer dependencies. You must install the required peer dependencies separately based on your project type (React, Vue, Svelte, etc.). See the [Peer Dependencies](#peer-dependencies) section below for detailed installation instructions.

### Basic Installation

Install with your favorite package manager:

```bash
# npm
npm install --save-dev @libs-for-dev/eslint-rules

# yarn
yarn add -D @libs-for-dev/eslint-rules

# pnpm
pnpm add -D @libs-for-dev/eslint-rules

# bun
bun add -D @libs-for-dev/eslint-rules
```

### Peer Dependencies

This package requires several peer dependencies that must be installed separately based on your project type:

#### Required for all projects:
```bash
# ESLint (required)
npm install --save-dev eslint@^9.0.0
```

#### For React projects:
```bash
npm install --save-dev eslint-plugin-react@^7.37.5 eslint-plugin-react-hooks@^5.2.0 eslint-plugin-react-perf@^3.3.3 react@^19.1.1
```

#### For Vue projects:
```bash
npm install --save-dev eslint-plugin-vue@^10.4.0 eslint-plugin-vue-scoped-css@^2.12.0 eslint-plugin-vuejs-accessibility@^2.4.1 vue@^3.5.21 vue-eslint-parser@^10.2.0
```

#### For Svelte projects:
```bash
npm install --save-dev eslint-plugin-svelte@^3.12.3 svelte@^5.38.10 svelte-eslint-parser@^1.3.2
```

### Complete Installation Examples

#### React + TypeScript project:
```bash
npm install --save-dev @libs-for-dev/eslint-rules eslint@^9.0.0 eslint-plugin-react@^7.37.5 eslint-plugin-react-hooks@^5.2.0 eslint-plugin-react-perf@^3.3.3 react@^19.1.1 typescript@^5.9.2
```

#### Vue + TypeScript project:
```bash
npm install --save-dev @libs-for-dev/eslint-rules eslint@^9.0.0 eslint-plugin-vue@^10.4.0 eslint-plugin-vue-scoped-css@^2.12.0 eslint-plugin-vuejs-accessibility@^2.4.1 vue@^3.5.21 vue-eslint-parser@^10.2.0 typescript@^5.9.2
```

#### Svelte + TypeScript project:
```bash
npm install --save-dev @libs-for-dev/eslint-rules eslint@^9.0.0 eslint-plugin-svelte@^3.12.3 svelte@^5.38.10 svelte-eslint-parser@^1.3.2 typescript@^5.9.2
```

## Supported File Types
This package provides the strictest ESLint rules for next type of files:
* javascript files `**/*.js`, `**/*.cjs`, `**/*.mjs` rules:
  * [@eslint/js](https://www.npmjs.com/package/@eslint/js)(Common JS rules)
  * [@eslint-community/eslint-plugin-eslint-comments](https://www.npmjs.com/package/@eslint-community/eslint-plugin-eslint-comments)
  * [@stylistic/eslint-plugin](https://www.npmjs.com/package/@stylistic/eslint-plugin)(No needed use `prettier` anymore)
  * [eslint-plugin-check-file](https://www.npmjs.com/package/eslint-plugin-check-file)(Strict rules for files and folders naming)
  * [eslint-plugin-import-x](https://www.npmjs.com/package/eslint-plugin-import-x)
  * [eslint-plugin-jsdoc](https://www.npmjs.com/package/eslint-plugin-jsdoc)
  * [eslint-plugin-n](https://www.npmjs.com/package/eslint-plugin-n)
  * [eslint-plugin-perfectionist](https://www.npmjs.com/package/eslint-plugin-perfectionist)(Best sorting for everything in JS/TS)
  * [eslint-plugin-prefer-arrow](https://www.npmjs.com/package/eslint-plugin-prefer-arrow)(No needed use `function` anymore)
  * [eslint-plugin-promise](https://www.npmjs.com/package/eslint-plugin-promise)
  * [eslint-plugin-regexp](https://www.npmjs.com/package/eslint-plugin-regexp)
  * [eslint-plugin-unicorn](https://www.npmjs.com/package/eslint-plugin-unicorn)(🦄)
* json `**/*.jsonc`, `**/*.json` files(e.g. tsconfig.json, src/some-path/file.json) rules: [eslint-plugin-jsonc](https://www.npmjs.com/package/eslint-plugin-jsonc)
* markdown `**/*.md` files rules: [@eslint/markdown](https://www.npmjs.com/package/@eslint/markdown)
* ignores: common ignore rules for `**/dist/**`, `**/node_modules/**`
* `package.json` rules: [eslint-plugin-package-json](https://www.npmjs.com/package/eslint-plugin-package-json) + `json` rules
* react `**/*.jsx`, `**/*.tsx` files rules + `javascript`:
  * [eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y)(Static AST checker for accessibility rules on JSX elements)
  * [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks)
   [eslint-plugin-react-perf](https://www.npmjs.com/package/eslint-plugin-react-perf)
  * [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react)
* svelte `**/*.svelte` files rules: [eslint-plugin-svelte](https://www.npmjs.com/package/eslint-plugin-svelte) + `javascript` rules
* typescript `**/*.cts`, `**/*.mts`, `**/*.ts` files rules: [typescript-eslint](https://www.npmjs.com/package/typescript-eslint) + `javascript` rules
* vitest `**/*.spec.cts`, `**/*.spec.mts`, `**/*.spec.ts`, `**/*.test.cts`, `**/*.test.mts`, `**/*.test.ts` files rules: [@vitest/eslint-plugin](https://www.npmjs.com/package/@vitest/eslint-plugin)
* vue `**/*.vue` files rules + `javascript` rules:
  * [eslint-plugin-vue-scoped-css](https://www.npmjs.com/package/eslint-plugin-vue-scoped-css)
  * [eslint-plugin-vue](https://www.npmjs.com/package/eslint-plugin-vue)
  * [eslint-plugin-vuejs-accessibility](https://www.npmjs.com/package/eslint-plugin-vuejs-accessibility)(An eslint plugin for checking accessibility rules from within `.vue` files)

## Usage

### Basic Configuration
Create `eslint.config.mjs` in your project root:

```javascript
import { configs } from '@libs-for-dev/eslint-rules'

export default [
  configs.ignores,
  configs.javascript,
  configs.json,
  configs.markdown,
  configs.packageJson,
]
```

### TypeScript Project
```javascript
import { configs } from '@libs-for-dev/eslint-rules'

export default [
  configs.ignores,
  configs.typescript,
  configs.json,
  configs.markdown,
  configs.packageJson,
]
```

### Vue.js Project
```javascript
import { configs } from '@libs-for-dev/eslint-rules'

export default [
  configs.ignores,
  configs.typescript, // if using TypeScript
  configs.vue,
  configs.json,
  configs.markdown,
  configs.packageJson,
]
```

### Customization
```typescript
import { configs } from '@libs-for-dev/eslint-rules'

export default [
  configs.typescript,
  configs.vue,
  {
    files: configs.vue.files,
    languageOptions: configs.vue.languageOptions,
    plugins: configs.vue.plugins,
    rules: {
      'vue/block-lang': ['error', { script: { lang: 'js' } }],
    },
  },
  {
    plugins: {
      ...configs.javascript.plugins,
    },
    rules: {
      'check-file/filename-naming-convention': [
        'error', { '**/*.vue': 'CAMEL_CASE' },
      ],
    },
  },
  {
    files: ['**/*.test.ts'],
    rules: {
      'max-lines-per-function': ['error', { max: 80 }],
    },
  },
  {
    files: ['/some/specific/folder/*.ts'],
    rules: {
      'max-lines': 'off',
    },
  }
]
```

## ESLint Rules Overview

### Code Quality Rules
- **Error Prevention**
  - `no-unused-vars` - Prevent unused variables
  - `no-undef` - Prevent usage of undeclared variables
  - `no-console` - Disallow console.log and similar methods
  - `no-debugger` - Disallow debugger statements

- **Best Practices**
  - `prefer-arrow` - Enforce using arrow functions
  - `prefer-const` - Require const declarations for variables that are never reassigned
  - `no-var` - Prevent usage of var
  - `promise/catch-or-return` - Enforce handling of Promises rejection

### Style Rules
- **Formatting**
  - `@stylistic/indent` - Enforce consistent indentation
  - `@stylistic/quotes` - Enforce consistent quote style
  - `@stylistic/semi` - Enforce consistent semicolon usage
  - `@stylistic/comma-dangle` - Enforce consistent comma style

- **Naming Conventions**
  - `check-file/filename-naming-convention` - Enforce file naming conventions
  - `check-file/folder-naming-convention` - Enforce folder naming conventions

### TypeScript Specific
- **Type Safety**
  - `@typescript-eslint/strict-boolean-expressions`
  - `@typescript-eslint/no-explicit-any`
  - `@typescript-eslint/explicit-function-return-type`
  - `@typescript-eslint/explicit-member-accessibility`

### React Specific
- **Hooks**
  - `react-hooks/rules-of-hooks` - Enforce Rules of Hooks
  - `react-hooks/exhaustive-deps` - Verify dependencies array

- **Accessibility**
  - `jsx-a11y/alt-text` - Enforce alt text for images
  - `jsx-a11y/click-events-have-key-events` - Ensure keyboard accessibility

### Vue Specific
- **Template**
  - `vue/no-unused-components` - Prevent unused components
  - `vue/valid-template-root` - Enforce valid template root
  - `vue/multi-word-component-names` - Enforce multi-word component names

- **Accessibility**
  - `vuejs-accessibility/alt-text` - Enforce alt text for images
  - `vuejs-accessibility/click-events-have-key-events` - Ensure keyboard accessibility

### Testing (Vitest)
- **Best Practices**
  - `vitest/expect-expect` - Enforce expecting test results
  - `vitest/no-disabled-tests` - Disallow disabled tests
  - `vitest/no-focused-tests` - Disallow focused tests

### Documentation
- **JSDoc**
  - `jsdoc/require-jsdoc` - Require JSDoc comments
  - `jsdoc/require-param` - Require parameter documentation
  - `jsdoc/require-returns` - Require return documentation

### Import/Export
- **Organization**
  - `import-x/order` - Enforce import order
  - `import-x/no-duplicates` - Prevent duplicate imports
  - `perfectionist/sort-imports` - Sort import statements

### Performance
- **React**
  - `react-perf/jsx-no-new-object-as-prop` - Prevent new objects in props
  - `react-perf/jsx-no-new-array-as-prop` - Prevent new arrays in props

- **Vue**
  - `vue/no-async-in-computed-properties` - Prevent async computed properties
  - `vue/no-side-effects-in-computed-properties` - Prevent side effects in computed

### Regular Expressions
- **Safety**
  - `regexp/no-empty-group` - Disallow empty regex groups
  - `regexp/no-useless-quantifier` - Prevent useless quantifiers

### Package.json
- **Maintenance**
  - `package-json/sort-fields` - Enforce consistent field ordering
  - `package-json/valid-dependencies` - Ensure valid dependencies