@gem-sdk/eslint-plugin

Shared ESLint rules for all GemPages frontend repositories.

Consolidates every custom rule from web-builder-shopify-app, web-builder, and web-builder-elements into a single publishable npm package. The architecture rules support both React (.tsx) and Vue (.vue) files.

The package name is @gem-sdk/eslint-plugin, so its ESLint plugin prefix is @gem-sdk (scoped packages drop the eslint-plugin- segment). Reference rules as @gem-sdk/<rule> and shareable configs as plugin:@gem-sdk/<config>.

Installation

yarn add -D @gem-sdk/eslint-plugin

Usage

Choose the config that matches your tech stack:

React projects

{
  "extends": ["plugin:@gem-sdk/react"]
}

Vue projects

{
  "extends": ["plugin:@gem-sdk/vue"]
}

All repos (architecture + i18n only)

{
  "extends": ["plugin:@gem-sdk/recommended"]
}

Manual rule selection

{
  "plugins": ["@gem-sdk"],
  "rules": {
    "@gem-sdk/module-structure": "error",
    "@gem-sdk/no-module-barrel": "error",
    "@gem-sdk/module-import-boundary": "error",
    "@gem-sdk/pure-ui-layer": "error",
    "@gem-sdk/module-index-required": "error",
    "@gem-sdk/no-t-for-variable": "error",
    "@gem-sdk/not-use-store-to-refs": "error",
    "@gem-sdk/not-use-custom-color-class": "warn",
    "@gem-sdk/no-export-type-from-component": "error",
    "@gem-sdk/no-export-type-from-tsx": "error",
    "@gem-sdk/no-import-from-package-path": "error",
    "@gem-sdk/no-multiple-component-exports": "error"
  }
}

What each config enables

| Rule | recommended | vue | react | | --- | :---: | :---: | :---: | | module-structure | error | error | error | | no-module-barrel | error | error | error | | module-import-boundary | error | error | error | | pure-ui-layer | error | error | error | | module-index-required | error | error | error | | no-t-for-variable | error | error | error | | not-use-store-to-refs | — | error | — | | not-use-custom-color-class | — | warn | — | | no-export-type-from-component | — | error | — | | no-export-type-from-tsx | — | — | error | | no-import-from-package-path | — | — | error | | no-multiple-component-exports | — | — | error |

vue and react both extend recommended. Vue configs require vue-eslint-parser.

no-export-type-from-component and no-export-type-from-tsx enforce the same thing (no export type/export interface from a component file) — the former also matches .vue files, the latter is React-only. They're kept separate so each config only reports once per file.

no-import-from-package-path options

Deep-path imports can be exempted with the ignore option, which accepts exact import paths or path prefixes:

{
  "rules": {
    "@gem-sdk/no-import-from-package-path": [
      "error",
      { "ignore": ["@gem-sdk/components/internal/Button"] }
    ]
  }
}

Any import path that matches an entry exactly, or starts with an entry followed by /, is allowed.