npm package: @scayle/eslint-config-storefront
Description: SCAYLE Commerce Engine specific eslint configuration
Author: SCAYLE Commerce Engine
Latest version: 4.8.0

# @scayle/eslint-config-storefront

A [shared `eslint` config](https://eslint.org/docs/latest/extend/shareable-configs#creating-a-shareable-config) for SCAYLE Storefront projects and packages.
Provides SCAYLE-specific `eslint` configuration for Frontend and Node.js projects using TypeScript.

We migrated to `eslint@9` and [ESLint Flat config](https://eslint.org/docs/latest/use/configure/configuration-files), to provide improved organization and composition.

Should you require support for `eslint@8`, please use `@scayle/eslint-config-storefront@3`.

- Partially based on [@antfu/eslint-config](https://github.com/antfu/eslint-config)
- [Official ESLint Documentation](https://eslint.org/docs/latest/)

---

## Install

Add the `@scayle/eslint-config-storefront` manually to your project:

`pnpm i -D eslint @scayle/eslint-config-storefront`

`yarn add -D eslint @scayle/eslint-config-storefront`

And create a `eslint.config.mjs` in your project root:

```js
// eslint.config.mjs
import eslintConfigStorefront from '@scayle/eslint-config-storefront'

export default eslintConfigStorefront()
```

### Add script for package.json

For example:

```json
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}
```

## VS Code support (auto fix on save)

Install [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

Add the following settings to your `.vscode/settings.json`:

```jsonc
{
  // Enable the ESlint flat config support
  "eslint.experimental.useFlatConfig": true,

  // Auto fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml"
  ]
}
```

## Customization

### Provides shared configurations

#### Default config / `@scayle/eslint-config-storefront`

Normally you only need to import the antfu preset:

```js
// eslint.config.mjs
import eslintConfigStorefront from '@scayle/eslint-config-storefront'

export default eslintConfigStorefront()
```

### Extended Configuration

```js
// eslint.config.mjs
import eslintConfigStorefront from '@scayle/eslint-config-storefront'

export default eslintConfigStorefront({
  // If set to `true` removes all rule configurations
  // that are provided by the `@nuxt/eslint` package
  isNuxt: true, // Default via auto-detection of package `@nuxt/eslint`

  // If set to `true` adds `eslint-plugin-tailwind`
  isTailwind: true, // Default via auto-detection of package `eslint-plugin-tailwind`

  typescript: {
    // Enables type-aware rules
    // Only works if `isNuxt` is `false`!
    // <https://github.com/antfu/eslint-config?tab=readme-ov-file#type-aware-rules>
    tsconfigPath: 'path/to/tsconfig.ts',
  },
})
```

### Plugins Renaming

Since flat config requires us to explicitly provide the plugin names (instead of the mandatory convention from npm package name), we renamed some plugins to make the overall scope more consistent and easier to write.

| New Prefix | Original Prefix        | Source Plugin                                                                              |
| ---------- | ---------------------- | ------------------------------------------------------------------------------------------ |
| `import/*` | `import-x/*`           | [eslint-plugin-import-x](https://github.com/un-es/eslint-plugin-import-x)                  |
| `node/*`   | `n/*`                  | [eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n)                     |
| `yaml/*`   | `yml/*`                | [eslint-plugin-yml](https://github.com/ota-meshi/eslint-plugin-yml)                        |
| `ts/*`     | `@typescript-eslint/*` | [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint) |
| `test/*`   | `vitest/*`             | [eslint-plugin-vitest](https://github.com/veritem/eslint-plugin-vitest)                    |
| `test/*`   | `no-only-tests/*`      | [eslint-plugin-no-only-tests](https://github.com/levibuzolic/eslint-plugin-no-only-tests)  |

When you want to override rules, or disable them inline, you need to update to the new prefix:

```diff
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// eslint-disable-next-line ts/consistent-type-definitions
type foo = { bar: 2 }
```

## View what rules are enabled

[Anthony Fu](https://github.com/antfu) built a visual tool to help you view what rules are enabled in your project and apply them to what files, [@eslint/config-inspector](https://github.com/eslint/config-inspector).

Go into your project root that contains eslint.config.js and run:

`npx @eslint/config-inspector`

## License

Licensed under the [MIT License](https://opensource.org/license/mit/)