@ntnyq/eslint-config

@ntnyq/eslint-config

ESLint config for JavaScript, TypeScript, Vue, JSON, Markdown, YAML, TOML, SVG, and more.

Feel free to create and maintain your own fork if you think this is too opinionated.

Requirements

• Node.js ^20.19.0 || ^22.13.0 || >=24
• ESLint ^9.38.0

For Node.js v18 support, please use v4.

For Node.js versions below 20.19.0, please use v5.

Features

• Designed to work alongside formatters, e.g. Prettier or oxfmt
• Opinionated: single quote, no semi, trailing comma, etc
• Respect .gitignore via eslint-config-flat-gitignore
• Out-of-the-box support for TypeScript, Vue, JSON, Markdown, YAML, TOML, SVG, Astro, Svelte, etc
• Strict but provides useful rules to guard your codebase
• Custom ESLint commands for eslint-plugin-command
• ESLint flat config for ESLint v9.38.0+

Install

npm i eslint typescript @ntnyq/eslint-config -D

yarn add eslint typescript @ntnyq/eslint-config -D

pnpm add eslint typescript @ntnyq/eslint-config -D

bun add eslint typescript @ntnyq/eslint-config -D

Usage

Highly recommend using eslint.config.mjs as the config file:

// @ts-check

import { defineESLintConfig } from '@ntnyq/eslint-config'

export default defineESLintConfig(
  // Options here
  {
    // Enable a config
    svgo: true,
    // Disable a config
    jsdoc: false,
    vue: {
      // Overrides built-in rules
      overrides: {
        'vue/slot-name-casing': 'off',
      },
    },
  },
  // Optional user configs here
  [
    {
      files: ['**/utils/*.ts'],
      rules: {
        'antfu/top-level-function': 'error',
      },
    },
  ],
)

Add a lint script to package.json:

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

npm i prettier @ntnyq/prettier-config -D

yarn add prettier @ntnyq/prettier-config -D

pnpm add prettier @ntnyq/prettier-config -D

bun add prettier @ntnyq/prettier-config -D

// prettier.config.mjs
// @ts-check

import { defineConfig } from '@ntnyq/prettier-config'

export default defineConfig({
  // Custom options if needed
  printWidth: 100,
  trailingComma: 'none',
  overrides: [
    {
      files: ['**/*.html'],
      options: {
        singleAttributePerLine: false,
      },
    },
    {
      files: ['**/*.{css,scss,less}'],
      options: {
        singleQuote: false,
      },
    },
  ],
})

{
  "eslint.enable": true,
  "prettier.enable": true,
  "editor.formatOnSave": true,
  "prettier.configPath": "./prettier.config.mjs",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never",
    "source.sortImports": "never"
  },
  "eslint.validate": [
    "vue",
    "yaml",
    "toml",
    "json",
    "jsonc",
    "json5",
    "markdown",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ]
}

pnpm add husky nano-staged -D

{
  "scripts": {
    "prepare": "husky"
  },
  "nano-staged": {
    "*.{js,ts,cjs,mjs,jsx,tsx,vue,md,svg,yml,yaml,toml,json}": "eslint --fix",
    "*.{css,scss,html}": "prettier -uw"
  }
}

echo "nano-staged" > .husky/pre-commit

View what rules are enabled

Please check eslint-config-inspector powered by @eslint/config-inspector.

Advanced config

For details, see:

• ./src/types/config.ts
• ./src/core.ts

Config interface

export interface ConfigOptions {
  /**
   * Shareable options
   */
  shareable?: OptionsShareable

  /**
   * Configs enabled by default
   */
  command?: ConfigCommandOptions
  eslintComments?: ConfigESLintCommentsOptions
  ignores?: ConfigIgnoresOptions
  javascript?: ConfigJavaScriptOptions
  node?: ConfigNodeOptions

  /**
   * Configs below can be disabled
   */
  antfu?: boolean | ConfigAntfuOptions
  deMorgan?: boolean | ConfigDeMorganOptions
  depend?: boolean | ConfigDependOptions
  githubAction?: boolean | ConfigGitHubActionOptions
  gitignore?: boolean | ConfigGitIgnoreOptions
  importX?: boolean | ConfigImportXOptions
  jsdoc?: boolean | ConfigJsdocOptions
  jsonc?: boolean | ConfigJsoncOptions
  markdown?: boolean | ConfigMarkdownOptions
  ntnyq?: boolean | ConfigNtnyqOptions
  perfectionist?: boolean | ConfigPerfectionistOptions
  pinia?: boolean | ConfigPiniaOptions
  prettier?: boolean | ConfigPrettierOptions
  regexp?: boolean | ConfigRegexpOptions
  sort?: boolean | ConfigSortOptions
  specials?: boolean | ConfigSpecialsOptions
  test?: boolean | ConfigTestOptions
  toml?: boolean | ConfigTomlOptions
  typescript?: boolean | ConfigTypeScriptOptions
  unicorn?: boolean | ConfigUnicornOptions
  unocss?: boolean | ConfigUnoCSSOptions
  vue?: boolean | ConfigVueOptions
  yml?: boolean | ConfigYmlOptions

  /**
   * Configs below are disabled by default
   */
  astro?: boolean | ConfigAstroOptions
  html?: boolean | ConfigHtmlOptions
  pnpm?: boolean | ConfigPnpmOptions
  oxfmt?: boolean | ConfigOxfmtOptions
  svelte?: boolean | ConfigSvelteOptions
  svgo?: boolean | ConfigSVGOOptions
  eslintPlugin?: boolean | ConfigESLintPluginOptions
  unusedImports?: boolean | ConfigUnusedImportsOptions
}

Versioning policy

This project aims to follow Semantic Versioning for releases.

Changes treated as Breaking Changes

• Node.js version requirement changes
• Huge refactors that might break the config
• Plugins made major changes that might break the config
• Changes that might affect most of the codebases

Changes treated as Non-Breaking Changes

• Enable/disable rules and plugins (that might become stricter)
• Rule option changes
• Version bumps of dependencies

Credits

• @sxzz/eslint-config
• @antfu/eslint-config

License

MIT License 2023-PRESENT ntnyq