# Quick Start

## Setup (Choose One)

### Option 1: Flat Config (Recommended - Simplest!)

Create **`eslint.config.js`** (NOT `.eslintrc.js`):

```javascript
const shopMinisConfig = require('@shopify/shop-minis-react/eslint/config')

module.exports = [shopMinisConfig]
```

**Important:**

- File must be named `eslint.config.js` (no dot, no "rc")
- This will lint all `.js`, `.jsx`, `.ts`, `.tsx` files in your project
- TypeScript and JSX parsing is configured automatically

### Option 2: Traditional Config (.eslintrc.js)

**Important:** Traditional config cannot use `extends` with our plugin. Set it up manually:

Create `.eslintrc.cjs`:

```javascript
const shopMinisPlugin = require('@shopify/shop-minis-react/eslint')

module.exports = {
  plugins: {
    'shop-minis': shopMinisPlugin,
  },
  rules: {
    'shop-minis/no-internal-imports': 'error',
    'shop-minis/prefer-sdk-components': 'warn',
  },
}
```

**Note:** Don't try to use `extends` with traditional config - it won't work because the plugin is bundled. Use flat config (Option 1) for the simplest setup!

## Usage

**With Flat Config (eslint.config.js):**

```bash
# Check for errors
npx eslint .

# Auto-fix (converts <img> to <Image> automatically)
npx eslint . --fix
```

**With Traditional Config (.eslintrc.cjs):**

```bash
# Check for errors
npx eslint . --ext .ts,.tsx,.js,.jsx

# Auto-fix
npx eslint . --ext .ts,.tsx,.js,.jsx --fix
```

## What You Get

- ✅ No internal imports allowed
- ✅ Warnings for `<img>` tags (suggests `<Image>`)
- ✅ Auto-fix support

## Troubleshooting

**Error: "Property is the wrong type" or config is invalid**

**Most common cause:** Wrong file name!

- Flat config MUST be named `eslint.config.js` (not `.eslintrc.js` or `.eslintrc.cjs`)
- Traditional config MUST be named `.eslintrc.cjs` or `.eslintrc.js`

**Check:**

1. Using flat config? → File must be `eslint.config.js`
2. Using traditional config? → File must be `.eslintrc.cjs` (with the dot and rc)

**Error: "Cannot find plugin"**

The plugin is bundled - use one of the setups above, don't install it separately.

**Error: "Invalid option '--ext'"**

You're using flat config (eslint.config.js) which doesn't use `--ext`. Just run:

```bash
npx eslint .
```

The `--ext` flag is only for traditional config (.eslintrc.cjs).

**No files being linted / runs too fast**

The config lints `**/*.{js,jsx,ts,tsx}` files by default. If ESLint runs instantly with no output:

1. Make sure you have `.js/.jsx/.ts/.tsx` files in your project
2. Specify the directory: `npx eslint src/`
3. Check you have an `<img>` tag to test the rule

If your files are in a custom location, customize the config:

```javascript
const shopMinisConfig = require('@shopify/shop-minis-react/eslint/config')

module.exports = [
  {
    ...shopMinisConfig,
    files: ['app/**/*.{js,jsx,ts,tsx}'], // Your custom path
  },
]
```

## Adding More Components

Edit `eslint/rules/prefer-sdk-components.cjs`:

```javascript
const defaultComponents = {
  img: 'Image',
  button: 'Button', // Add this
  input: 'Input', // Add this
  a: 'TransitionLink', // Add this
}
```

All consumers automatically get the new rules - no config changes needed on their end!
