Frontend Configs

A shareable ESLint and Prettier configuration package for frontend projects.

Installation

npm install --save-dev @oliviacl/tutorial-frontend-config eslint prettier

Usage

ESLint Configuration

Create eslint.config.js:

import { eslintConfig } from '@oliviacl/tutorial-frontend-config';

export default eslintConfig;

Or import from the subpath:

import config from '@oliviacl/tutorial-frontend-config/eslint';

export default config;

Features:

• ESLint 9 flat config format
• TypeScript support via typescript-eslint
• React and React Hooks rules
• JSX accessibility checks (jsx-a11y)
• Import ordering and organization
• Prettier integration

Prettier Configuration

Create .prettierrc.js:

import { prettierConfig } from '@oliviacl/tutorial-frontend-config';

export default prettierConfig;

Or import from the subpath:

import config from '@oliviacl/tutorial-frontend-config/prettier';

export default config;

Configuration:

• Single quotes
• Semicolons enabled
• 2 space indentation
• 100 character line width
• Trailing commas (ES5)
• Arrow function parentheses (always)
• Line endings (LF)

Development

This is a monorepo using npm workspaces. The example-app directory contains a sample project demonstrating the configs.

Setup

npm install

Version Management

This project uses Changesets for version management.

To create a changeset:

npm run changeset

Publishing

Publishing is automated via GitHub Actions. When changesets are merged to main, a PR is automatically created to bump versions. Merging that PR will publish to npm with provenance.

Package Structure

frontend-configs/
├── packages/
│   └── configs/              # @oliviacl/tutorial-frontend-config
│       ├── index.js         # Exports both configs
│       ├── eslint.js        # ESLint config
│       └── prettier.js      # Prettier config
└── example-app/             # Example usage

License

MIT