Eslint config

Flat ESLint config for JavaScript, TypeScript, Vue 2, Vue 3, Prettier. Thanks to sxzz for example.

Features

• Format with Prettier.
• Designed to work with TypeScript, Vue 2 and 3 out-of-box.
• Support JSON(5), YAML, Markdown...
• Sort imports, package.json, tsconfig.json...
• ESLint Flat config, compose easily!
• Reasonable defaults, best practices, only one-line of config

Usage

Install

npm install @karta.io/eslint-config eslint --save-dev

# or with pnpm:
pnpm add -D @karta.io/eslint-config eslint

Require Node.js >= 18.18, and ESLint >= 9.0.0.

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

// eslint.config.mjs
import { createConfig } from '@karta.io/eslint-config';

export default createConfig();

Add script for package.json

For example:

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

VS Code support

{
  "eslint.experimental.useFlatConfig": true,
}

Customization

We use ESLint Flat config. It provides much better organization and composition.

Normally you only need to import the createConfig function:

// eslint.config.mjs
import { createConfig } from '@karta.io/eslint-config';

export default createConfig();

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

// eslint.config.mjs
import { createConfig } from '@karta.io/eslint-config';

export default createConfig({
  settings: {
    // Vue is auto-detected, you can also explicitly enable or disable them:
    vue: true,

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

    // Disable prettier support
    prettier: false,

    // Disable jsonc support and sorting keys for package.json and tsconfig.json
    jsonc: false,
    sortKeys: false,
  },
});

And also you can override any rule:

// eslint.config.mjs
import { createConfig } from '@karta.io/eslint-config';

export default createConfig({
  // https://eslint.org/docs/latest/use/configure/configuration-files#configuration-objects
  config: [
    {
      files: ['**/*.ts'],
      rules: {
        '@typescript-eslint/no-redeclare': 'off',
      },
    },
    {
      files: ['**/*.vue'],
      rules: {
        'vue/no-dupe-keys': 'error',
      },
    },
  ],
});