@ntnyq/eslint-config

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

Important

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

Requirement

• NodeJS v20.11.0+
• ESLint v9.20.0+

Tip

For NodeJS v18 support, please use v4

Features

• Designed to work alongside with Prettier and TypeScript
• Opinionable: single quote, no semi, trailing comma, etc
• Respect .gitignore via eslint-config-flat-gitignore
• Out-of-box support for TypeScript, Vue, JSON, Markdown, YAML, TOML, SVG and etc
• Strict but provides useful rules to guard your codebase
• Custom ESLint commands for eslint-plugin-command
• ESLint flat config for ESLint v9.20.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 recommended 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 scripts lint in package.json:

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

💼 Intergrated with Prettier, VSCode, husky and nano-staged

Prettier config

Feel free to use your own prettier config.

Install prettier and setup your prettier config:

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,
      },
    },
  ],
})

VSCode Config

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

Lint changed files only

1. Add dependencies

pnpm add husky nano-staged -D

2. Config in package.json

{
  "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"
  }
}

3. Add a Git hook

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

View what rules are enabled

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

Advanced config

Check for detail in:

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

Config interface

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

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

  /**
   * Configs bellow 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 bellow are disabled by default
   */
  astro?: boolean | ConfigAstroOptions
  html?: boolean | ConfigHtmlOptions
  pnpm?: boolean | ConfigPnpmOptions
  svelte?: boolean | ConfigSvelteOptions
  svgo?: boolean | ConfigSVGOOptions
  eslintPlugin?: boolean | ConfigESLintPluginOptions
}

Versioning policy

This project aims to follows Semantic Versioning for releases.

Changes considered 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 considered as Non-Breaking Changes

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

Credits

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

License

MIT License © 2023-PRESENT ntnyq