@ximax/max-eslint-config

ESLint configuration for PIT projects with support for Prettier, TypeScript, and Vue 3.

Features

• 🚀 Modern ESLint 9 flat config format
• 💅 Prettier integration with consistent formatting rules
• 🔷 TypeScript support with comprehensive type checking
• 🖖 Vue 3 support with Composition API and <script setup> optimizations
• 📦 Modular configs - use only what you need
• ✨ Written in TypeScript with full type definitions
• 🔄 Import sorting with automatic organization and unused import removal

Installation

pnpm add -D @ximax/max-eslint-config

Peer Dependencies

Make sure you have the following peer dependencies installed:

pnpm add -D eslint prettier typescript vue

Usage

Basic JavaScript/TypeScript Project

// eslint.config.js
import { default as pitConfig } from '@ximax/max-eslint-config'

export default pitConfig

TypeScript Project

// eslint.config.js
import { default as pitConfig } from '@ximax/max-eslint-config/typescript'

export default pitConfig

Vue 3 + TypeScript Project

// eslint.config.js
import { default as pitConfig } from '@ximax/max-eslint-config/vue'

export default pitConfig

Prettier Only

// eslint.config.js
import { default as prettierConfig } from '@ximax/max-eslint-config/prettier'

export default prettierConfig

Custom Configuration

You can extend the configurations with your own rules:

// eslint.config.js
import { default as pitConfig } from '@ximax/max-eslint-config/vue'

export default [
  ...pitConfig,
  {
    rules: {
      // Your custom rules
      'no-console': 'off'
    }
  }
]

Configurations

Base Config (@ximax/max-eslint-config)

• JavaScript ES2022+ support
• Prettier integration
• Common best practices
• Import sorting and organization
• Automatic unused import removal

TypeScript Config (@ximax/max-eslint-config/typescript)

• Extends base config
• TypeScript-specific rules
• Type-aware linting
• Import/export optimizations

Vue Config (@ximax/max-eslint-config/vue)

• Extends TypeScript config
• Vue 3 specific rules
• Composition API support
• <script setup> optimizations
• Template formatting rules

Prettier Config (@ximax/max-eslint-config/prettier)

• Prettier formatting rules only
• Consistent code style
• Vue template support

Prettier Configuration

The default Prettier configuration includes:

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "printWidth": 100,
  "endOfLine": "lf",
  "arrowParens": "avoid"
}

Import Sorting

The configuration includes automatic import sorting and organization with the following features:

Import Groups (in order)

1. Built-in modules - Node.js built-in modules (fs, path, etc.)
2. External packages - Third-party packages from node_modules
   • Vue-related imports are prioritized (vue, vue/*)
   • React-related imports are prioritized (react, react/*)
3. Internal modules - Project internal modules (@/*, ~/*)
4. Parent directories - Imports from parent directories (../)
5. Sibling files - Imports from the same directory (./)
6. Index files - Index file imports (./index)

Features

• Automatic sorting - Imports are sorted alphabetically within each group
• Group separation - Empty lines are automatically added between import groups
• Unused import removal - Unused imports are automatically removed
• Duplicate detection - Duplicate imports are detected and merged
• TypeScript support - Full support for TypeScript imports and type imports

Example

Before:

import { config } from '~/config'
import axios from 'axios'
import { readFileSync } from 'fs'
import vue from 'vue'
import { someUtil } from '@/utils/helper'

After:

import { readFileSync } from 'fs'

import vue from 'vue'

import axios from 'axios'

import { someUtil } from '@/utils/helper'

import { config } from '~/config'

VS Code Integration

Add this to your .vscode/settings.json:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

License

MIT