@layer/web-configs

Introduction

@layer/web-configs provides a centralized style guide with shared configurations for linting, formatting, and TypeScript. It helps ensure consistency across all web projects.

Available configurations:

• Prettier
• ESLint
• TypeScript

Installation

# Using npm
npm install --save-dev @layer/web-configs

# Using yarn
yarn add --dev @layer/web-configs

# Using pnpm
pnpm install --save-dev @layer/web-configs

Prettier

Note: Prettier is a peer dependency and must be installed in your project.

To use the shared Prettier configuration, add the following to package.json:

{
  "prettier": "@layer/web-configs/prettier"
}

This enables consistent formatting across your project using our predefined rules.

ESLint

Note: ESLint is a peer dependency and must be installed in your project.

The available base configurations are:

• @layer/web-configs/eslint/recommended – Core rules for general JavaScript development.
• @layer/web-configs/eslint/typescript – TypeScript-specific linting rules.
• @layer/web-configs/eslint/react – React best practices and JSX linting.

Configuring ESLint

Use the provided layer export to compose your ESLint configuration:

// eslint.config.js
import layer from '@layer/web-configs/eslint';

export default [
  ...layer.configs.recommended,
  ...layer.configs.typescript,
  ...layer.configs.react,
  {
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname
      }
    }
  }
];

ESLint + TypeScript: Supporting Multiple tsconfig Files

If project uses multiple TypeScript configuration files (like tsconfig.app.json, tsconfig.node.json, etc.), ESLint may require a dedicated config to avoid circular references.

Update ESLint Configuration

export default [
  ...layer.configs.recommended,
  ...layer.configs.typescript,
  ...layer.configs.react,
  {
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname
      }
    }
  }
];

TypeScript

This package includes multiple TypeScript configuration presets for different types of projects.

Available Configurations

| Config Path | Description | | --------------------------------------------- | --------------------------------------------- | | @layer/web-configs/typescript/react | Base config for React applications | | @layer/web-configs/typescript/react-library | Config optimized for reusable React libraries |

To use one, extend it in your tsconfig.json:

{
  "extends": "@layer/web-configs/typescript/react",
  "compilerOptions": {
    // your overrides here
  }
}