# Vyriy ESLint Config

Shared ESLint configuration for Vyriy projects.

Published: 2026-05-12
Tags: vyriy, eslint, typescript, prettier, config
Source: https://vyriy.dev/examples/vyriy-eslint-config/

---

# Vyriy ESLint Config

`@vyriy/eslint-config` is a shared ESLint configuration package for Vyriy projects.

It provides a common linting baseline for TypeScript code and helps keep packages, examples, and workspaces consistent.

The config can work independently. It does not require every project to install or configure Prettier separately.  
At the same time, it can also be combined with `@vyriy/prettier-config` when a project wants an explicit shared Prettier setup.

## Install ESLint config

Install the shared TypeScript config, shared ESLint config, and ESLint:

```bash
yarn add @vyriy/typescript-config @vyriy/eslint-config eslint
```

## TypeScript config

Create `tsconfig.json`:

```json
{
  "extends": "@vyriy/typescript-config/index.json",
  "include": ["*.ts"]
}
```

## ESLint config

Create `eslint.config.mjs`:

```js
export { default } from '@vyriy/eslint-config';
```

This keeps the local ESLint setup very small.  
The project only re-exports the shared Vyriy config and does not need to duplicate common linting rules.

## Example TypeScript file

Create `index.ts`:

```ts
export type User = {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
};

export type FormatUser = (user: User) => string;

export const formatUser: FormatUser = (user) => {
  const status = user.isActive ? 'active' : 'inactive';

  return `${user.name} <${user.email}> is ${status}`;
};
```

The code is valid TypeScript, but it does not fully match the formatting rules used by the shared config.

## Run ESLint

Run ESLint for the current project:

```bash
npx eslint .
```

Output:

```bash
eslint.config.mjs
  1:25  warning  Replace `'@vyriy/eslint-config'` with `"@vyriy/eslint-config"`  prettier/prettier

index.ts
  11:34  warning  Replace `'active'·:·'inactive'` with `"active"·:·"inactive"`  prettier/prettier
  14:2   warning  Insert `;`                                                    prettier/prettier

✖ 3 problems (0 errors, 3 warnings)
  0 errors and 3 warnings potentially fixable with the `--fix` option.
```

This means ESLint is working and can detect formatting issues through the shared configuration.

The important part is that the ESLint setup itself is independent from a local Prettier config file.  
A project can start with only `@vyriy/eslint-config` and still receive consistent linting feedback.

## Fix automatically with ESLint

The warnings are fixable, so you can run:

```bash
npx eslint . --fix
```

After the fix, `eslint.config.mjs` becomes:

```js
export { default } from '@vyriy/eslint-config';
```

And `index.ts` becomes:

```ts
export type User = {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
};

export type FormatUser = (user: User) => string;

export const formatUser: FormatUser = (user) => {
  const status = user.isActive ? 'active' : 'inactive';

  return `${user.name} <${user.email}> is ${status}`;
};
```

Run ESLint again:

```bash
npx eslint .
```

When everything is fixed, the command does not print warnings or errors.

## Optional: use shared Prettier config

The ESLint config can work on its own, but a project may still want a dedicated shared Prettier config.

Install Prettier and the Vyriy Prettier config:

```bash
yarn add @vyriy/prettier-config prettier
```

Create `prettier.config.mjs`:

```js
export { default } from '@vyriy/prettier-config';
```

Now Prettier can be used directly:

```bash
npx prettier .
```

And ESLint can still be used as the linting layer:

```bash
npx eslint .
```

This gives two clean workflows:

- Prettier formats the files.
- ESLint checks code quality and catches remaining linting issues.

## Why this setup?

This approach keeps the project setup calm and flexible.

For a small package, ESLint can work with only:

```bash
@vyriy/typescript-config
@vyriy/eslint-config
eslint
```

For a package that also wants direct formatting commands, Prettier can be added later:

```bash
@vyriy/prettier-config
prettier
```

The result is a simple layered setup:

```text
TypeScript config  -> shared compiler baseline
ESLint config      -> shared linting baseline
Prettier config    -> optional shared formatting baseline
```

Each tool has a clear responsibility, and each project can choose only the parts it needs.

## Documentation

See the [ESLint config API documentation](https://vyriy.dev/storybook/?path=/docs/config-eslint--api).