@zayne-labs/eslint-config

Reasonable defaults, best practices, only one line of config
Designed to work with TypeScript, JSX, Vue, JSON, YAML, Toml, Markdown, etc. Out-of-box.
Opinionated, but very customizable
ESLint Flat config, compose easily!
Optional React, Svelte, TailwindCSS, Astro, Solid support
Respects .gitignore by default
Requires ESLint v9.5.0+
Inspired by the legendary open sourcerer, antfu

Usage

Manual Install

If you prefer to set up manually:

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

And create eslint.config.js in your project root:

// eslint.config.js
import zayne from '@zayne-labs/eslint-config'

export default zayne()

Combined with legacy config:

If you still use some configs from the legacy eslintrc format, you can use the @eslint/eslintrc package to convert them to the flat config.

// eslint.config.mjs
import zayne from '@zayne-labs/eslint-config'
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat()

export default zayne(
  {
    ignores: [],
  },

  // Legacy config
  [
	...compat.config({
    extends: [
      'eslint:recommended',
      // Other extends...
    ],
  }),

  // Other flat configs...
  ]

)

Note that .eslintignore no longer works in Flat config, see customization for more details.

Add script for package.json

For example:

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

IDE Support (auto fix on save)

🟦 VS Code support

Install VS Code ESLint extension

Add the following settings to your .vscode/settings.json:

{
  // Auto fix
  "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"
  ]
}

🟩 Neovim Support

Update your configuration to use the following:

local lspconfig = require('lspconfig')
-- Enable eslint for all supported languages
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"
    },
  }
)

Neovim format on save

There's few ways you can achieve format on save in neovim:

nvim-lspconfig has a EslintFixAll command predefined, you can create a autocmd to call this command after saving file.

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

Customization

Normally you only need to import the zayne preset:

// eslint.config.js
import zayne from '@zayne-labs/eslint-config'

export default zayne()

And that's it! Or you can configure each integration individually, for example:

// eslint.config.js
import zayne from '@zayne-labs/eslint-config'

export default zayne({
  // Enable stylistic formatting rules
  stylistic: true,

  // TypeScript and React are autodetected, you can also explicitly enable it:
  typescript: true,
  react: true

  // Disable jsonc and yaml support
  jsonc: false,
  yaml: false,

  // `.eslintignore` is no longer supported in Flat config, use `ignores` instead
  ignores: [
    'build/**',
    // ...globs
  ]
})

The zayne factory function also accepts an array of arbitrary custom config overrides as the second argument:

// eslint.config.js
import zayne from '@zayne-labs/eslint-config'

export default zayne(
  {
    // Configures for zayne labs' config
  },

  // The second arguments is an array of ESLint Configs
 [ {
    files: ['**/*.ts'],
    rules: {},
  },
  {
    rules: {},
  }],
)

Going more advanced, you can also import fine-grained configs and compose them as you wish:

Advanced Example

We wouldn't recommend using this style in general unless you know exactly what they are doing, as there are shared options between configs and might need extra care to make them consistent.

// eslint.config.js
import {
  combine,
  comments,
  ignores,
  imports,
  javascript,
  jsdoc,
  jsonc,
  markdown,
  node,
  sortPackageJson,
  sortTsconfig,
  stylistic,
  toml,
  typescript,
  unicorn,
  vue,
  yaml,
} from '@zayne-labs/eslint-config'

export default combine(
  ignores(),
  javascript(/* Options */),
  comments(),
  node(),
  jsdoc(),
  imports(),
  unicorn(),
  typescript(/* Options */),
  stylistic(),
  vue(),
  jsonc(),
  yaml(),
  toml(),
  markdown(),
)

Check out the configs and factory for more details.

Thanks to antfu/eslint-config for the inspiration and reference.

Plugins Renaming

Since flat config requires us to explicitly provide the plugin names (instead of the mandatory convention from npm package name), we renamed some plugins to make the overall scope more consistent and easier to write.

New Prefix	Original Prefix	Source Plugin
`import/*`	`import-x/*`	eslint-plugin-import-x
`node/*`	`n/*`	eslint-plugin-n
`yaml/*`	`yml/*`	eslint-plugin-yml
`ts-eslint/*`	`@typescript-eslint/*`	@typescript-eslint/eslint-plugin
`stylistic/*`	`@stylistic/*`	@stylistic/eslint-plugin

When you want to override rules, or disable them inline, you need to update to the new prefix:

-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// eslint-disable-next-line ts-eslint/consistent-type-definitions
type foo = { bar: 2 }

Change back to original prefix

If you really want to use the original prefix, you can revert the plugin renaming by:

import zayne from '@zayne-labs/eslint-config'

export default zayne()
  .renamePlugins({
    "ts-eslint": '@typescript-eslint',
    // ...
  })

Rules Overrides

Certain rules would only be enabled in specific files, for example, ts-eslint/* rules would only be enabled in .ts files and vue/* rules would only be enabled in .vue files. If you want to override the rules, you need to specify the file extension:

// eslint.config.js
import zayne from '@zayne-labs/eslint-config'

export default zayne(
  {
    react: true,
    typescript: true
  },
  {
    files: ['**/*.jsx','**/*.tsx' ],
    rules: {
      'react/no-unstable-context-value': "off",
    },
  },
  {
    // Without `files`, they are general rules for all files
    rules: {
      'stylistic/semi': ['error', 'never'],
    },
  }
)

We also provided the overrides options in each integration to make it easier:

// eslint.config.js
import zayne from '@zayne-labs/eslint-config'

export default zayne({
  react: {
    overrides: {
       'react/no-unstable-context-value': "off",
    },
  },
  typescript: {
    overrides: {
      'ts/consistent-type-definitions': ['error', 'interface'],
    },
  },
  yaml: {
    overrides: {
      // ...
    },
  },
})

Config Composer

The factory function zayne() returns a FlatConfigComposer object from eslint-flat-config-utils where you can chain the methods to compose the config even more flexibly.

// eslint.config.js
import zayne from '@zayne-labs/eslint-config'

export default zayne()
  .prepend(
    // some configs before the main config
  )
  // overrides any named configs
  .override(
    'zayne/imports',
    {
      rules: {
        'import/order': ['error', { 'newlines-between': 'always' }],
      }
    }
  )
  // rename plugin prefixes
  .renamePlugins({
    'old-prefix': 'new-prefix',
    // ...
  })
// ...