@scayle/eslint-config-storefront

A shared eslint 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, 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
• Official ESLint Documentation

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:

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

export default eslintConfigStorefront()

Add script for package.json

For example:

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

VS Code support (auto fix on save)

Install VS Code ESLint extension

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

{
  // 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:

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

export default eslintConfigStorefront()

Extended Configuration

// 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 | | node/* | n/* | eslint-plugin-n | | yaml/* | yml/* | eslint-plugin-yml | | ts/* | @typescript-eslint/* | @typescript-eslint/eslint-plugin | | test/* | vitest/* | eslint-plugin-vitest | | test/* | no-only-tests/* | eslint-plugin-no-only-tests |

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

-// 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 built a visual tool to help you view what rules are enabled in your project and apply them to what files, @eslint/config-inspector.

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

npx @eslint/config-inspector