@vue-storefront/eslint-config

Common ESLint configuration used in Alokai projects. These configurations are compatible with ESLint 9.

Usage

Install

yarn add -D eslint prettier @vue-storefront/eslint-config

Building Blocks

This ESLint configuration is composed of several building blocks, each tailored for specific use cases:

• ecma: For ECMAScript projects.
• typescript: For TypeScript projects.
• style: For Prettier and Perfectionist plugins.
• nextjs: For Next.js projects.
• playwright: For Playwright projects.
• architecture: For enforcing architectural rules.

Options

All options are optional. You don't have to set these options if you are okay with the default configuration.

ecma

• files (default: "**/*.{mjs,cjs,js,jsx}"): The glob pattern for files to lint.
• isStrict (default: true): Enables extra rules for stricter checking.
• withImport (default: true): Enables eslint-plugin-import.

typescript

• files (default: "**/*.{ts,tsx,mts,cts,mtsx,ctsx}"): The glob pattern for files to lint.
• isStrict (default: true): Enables extra rules for stricter checking.
• withImport (default: true): Enables eslint-plugin-import.

style

• files (default: "**/*.{mjs,cjs,js,jsx,ts,tsx,mts,cts,mtsx,ctsx}"): The glob pattern for files to lint.

nextjs

• files (default: "**/*.{mjs,cjs,js,jsx,ts,tsx,mts,cts,mtsx,ctsx}"): The glob pattern for files to lint. Here you can pass the general file glob pattern for all directories with Next.js/React code. But for better results please pass the glob for the components folders and hooks. Those two are passed to the special rules just for them.

files: {
  general: "**/*.{js,jsx,ts,tsx}",
  components: "src/components/**/*.{js,jsx,ts,tsx}",
  hooks: "src/hooks/**/*.{js,jsx,ts,tsx}"
}

• isStrict (default: true): Enables extra rules for stricter checking.

playwright

• files (default: "**/*.test.ts"): The glob pattern for files to lint.

architecture

• files (default: "**/*.{mjs,cjs,js,jsx,ts,tsx,mts,cts,mtsx,ctsx}"): The glob pattern for files to lint.
• maxComplexity (default: 6): The maximum cyclomatic complexity allowed in a program.
• maxDepth (default: 4): The maximum depth that blocks can be nested.
• maxStatementsPerLine (default: 1): The maximum number of statements allowed per line.
• maxLines (default: 300): The maximum number of lines per file.
• maxLinesPerFunction (default: 60): The maximum number of lines of code in a function.
• maxStatements (default: 10): The maximum number of statements allowed in function blocks.
• maxNestedCallbacks (default: 5): The maximum depth that callbacks can be nested.
• maxParams (default: 3): The maximum number of parameters in function definitions.

Example configurations

Config eslint.config.js

import { ecma, typescript, style } from "@vue-storefront/eslint-config";

export default [
  ecma(),
  typescript(),
  style()
];

Usage with Next.js eslint.config.js

Vue Storefront Next.js specific linting rules.

import { ecma, nextjs } from "@vue-storefront/eslint-config";

export default [
  ecma(),
  nextjs({
    files: {
      general: "**/*.{js,jsx,ts,tsx}",
      components: "src/components/**/*.{js,jsx,ts,tsx}",
      hooks: "src/hooks/**/*.{js,jsx,ts,tsx}"
    },
    isStrict: true
  })
];

Usage with Nuxt 3

For projects using Nuxt 3, we recommend using the Nuxt ESLint module and adding styling and architecture configurations to it.

Here is a basic config using the ESLint Nuxt module:

import withNuxt from './.nuxt/eslint.config.mjs';
import { ecma, typescript, style, architecture } from "@vue-storefront/eslint-config";

export default withNuxt(
  ecma(),
  typescript(),
  style(),
  architecture({
    maxComplexity: 10,
    maxDepth: 5,
    maxStatementsPerLine: 1,
    maxLines: 500,
    maxLinesPerFunction: 100,
    maxStatements: 15,
    maxNestedCallbacks: 3,
    maxParams: 4
  })
);

Usage with Node.js eslint.config.js

Vue Storefront Node.js specific linting rules.

import { ecma } from "@vue-storefront/eslint-config";

export default [
  ecma()
];

Usage with Playwright eslint.config.js

Vue Storefront Playwright specific linting rules.

import { ecma, playwright } from "@vue-storefront/eslint-config";

export default [
  ecma(),
  playwright({
    files: "**/*.test.ts",
    isStrict: true
  })
];

Usage with TypeScript eslint.config.js

Vue Storefront TypeScript specific linting rules.

import { ecma, typescript } from "@vue-storefront/eslint-config";

export default [
  ecma(),
  typescript()
];

Usage with Architectural Rules eslint.config.js

Vue Storefront Architectural specific linting rules.

import { ecma, architecture } from "@vue-storefront/eslint-config";

export default [
  ecma(),
  architecture({
    maxComplexity: 10,
    maxDepth: 5,
    maxStatementsPerLine: 1,
    maxLines: 500,
    maxLinesPerFunction: 100,
    maxStatements: 15,
    maxNestedCallbacks: 3,
    maxParams: 4
  })
];

Using concat function

You can use the concat function to combine configurations from different sources.

import { ecma, typescript, concat } from "@vue-storefront/eslint-config";
import customConfig from "./custom-eslint-config";

export default concat(
  ecma(),
  typescript(),
  customConfig
);

Overriding rules in a factory

You can override rules in one of our factories by passing a custom rules object.

import { ecma, typescript } from "@vue-storefront/eslint-config";

export default [
  ecma(),
  typescript({}, {
    name: 'custom-config',
    files: ['**/*.ts'],
    rules: {
      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }]
    }
  })
];

Used rulesets & plugins

• unicorn
• no-secrets
• promise
• unused-imports
• prettier