ESLint Setup

Overview

The @zayne-labs/eslint-config provides an opinionated ESLint configuration with sensible defaults and zero-config setup. It works out-of-the-box with TypeScript, JSX, Vue, JSON, YAML, TOML, Markdown, and more.

Key Features

One-line setup with reasonable defaults and best practices
ESLint Flat config for easy composition
Respects .gitignore by default
Highly customizable when needed
Interactive CLI for easy setup
Requires ESLint v9.5.0+ and Node.js v20+

Installation

Interactive CLI (Recommended)
Manual Installation

The CLI provides the easiest way to set up your ESLint configuration:

Run the CLI

pnpx @zayne-labs/eslint-config@latest

Follow the prompts

The CLI will guide you through:

Framework selection (React, Vue, Svelte, Astro)
Additional integrations (TailwindCSS, etc.)
Automatic dependency installation

Start linting

Your configuration is ready! The CLI automatically creates eslint.config.js and installs dependencies.

Install dependencies

pnpm add -D eslint @zayne-labs/eslint-config

Create config file

Create eslint.config.js in your project root:

import { zayne } from "@zayne-labs/eslint-config";

export default zayne();

Add package scripts

Add these scripts to your package.json:

{
  "scripts": {
    "lint:eslint": "eslint .",
    "lint:eslint-fix": "eslint . --fix"
  }
}

Legacy Config Migration

Combining with existing eslintrc configs

If you have existing eslintrc configs, use @eslint/eslintrc to convert them:

import { FlatCompat } from "@eslint/eslintrc";
import { zayne } from "@zayne-labs/eslint-config";

const compat = new FlatCompat();

export default zayne(
  {
    ignores: [],
  },
  ...compat.config({
    extends: [
      "eslint:recommended",
      // Other extends...
    ],
  })
  // Other flat configs...
);

.eslintignore no longer works in flat config. Use the ignores option instead.

IDE Configuration

Configure your editor to auto-fix ESLint issues on save for the best development experience.

VS Code
Neovim

Install the ESLint extension

Install the ESLint extension from the VS Code marketplace.

Configure settings

Create or update .vscode/settings.json in your project:

{
  // Auto fix on save
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "svelte",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ]
}

Restart VS Code

Reload your VS Code window to apply the changes.

Configure LSP

Update your Neovim configuration to enable ESLint for all supported languages:

local lspconfig = require('lspconfig')

lspconfig.eslint.setup({
  filetypes = {
    "javascript",
    "javascriptreact",
    "javascript.jsx",
    "typescript",
    "typescriptreact",
    "typescript.tsx",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "svelte",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  },
})

Enable format on save

Choose one of these options:Option 1: Built-in EslintFixAll command

lspconfig.eslint.setup({
  on_attach = function(client, bufnr)
    vim.api.nvim_create_autocmd("BufWritePre", {
      buffer = bufnr,
      command = "EslintFixAll",
    })
  end,
})

Option 2: Use formatting pluginsUse conform.nvim, none-ls, or nvim-lint

Running ESLint

Once configured, you can run ESLint using the package scripts:

# Check for issues
pnpm lint:eslint

# Fix issues automatically
pnpm lint:eslint-fix

Inspecting Your Configuration

View your active ESLint rules and configuration using the ESLint Config Inspector:

npx @eslint/config-inspector@latest

This opens an interactive UI in your browser showing all enabled rules, their sources, and configurations.

Get Started

Packages

Guides

Overview

Key Features

Installation

Legacy Config Migration

IDE Configuration

Running ESLint

Inspecting Your Configuration

Next Steps

Customize Rules

Framework Setup

Build docs developers (and LLMs) love

Get Started

Packages

Guides

​Overview

​Key Features

​Installation

​Legacy Config Migration

​IDE Configuration

​Running ESLint

​Inspecting Your Configuration

​Next Steps

Customize Rules

Framework Setup

Build docs developers (and LLMs) love

Overview

Key Features

Installation

Legacy Config Migration

IDE Configuration

Running ESLint

Inspecting Your Configuration

Next Steps