@kazupon/eslint-config

ESLint config for @kazupon

🌟 Features

• Flat configuration via vite flavor defineConfig
• Support built-in preset configurations
  • javascript
  • comments
  • typescript
  • imports
  • jsdoc
  • regexp
  • promise
  • unicorn
  • prettier
  • vue
  • react
  • svelte
  • vitest
  • jsonc
  • yml
  • toml
  • markdown
• Support primitive eslint flat configuration
• Support overrides for built-in configurations
  • rules

💿 Installation

npm i -D @kazupon/eslint-config

🚀 Usage

Configurations

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

// eslint.config.mjs
import { defineConfig, javascript } from '@kazupon/eslint-config'

// You can put flat configurations (`Linter.Config | Linter.Config[]`)
export default defineConfig(
  // built-in configurations
  javascript({
    // override rules
    rules: {
      'no-console': 'error'
    }
  }),
  // You can put primitive flat configuration, and override it!
  {
    ignores: ['**/dist/**' /* something ignores ... */]
  }
)

[!IMPORTANT] Support flat configuration only, not supported Legacy style (.eslintrc)

Lint with npm scripts package.json

For example:

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

Lint with VS Code settings.json

You can lint and auto fix.

Install VS Code ESLint extension.

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

{
  // Auto fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  // Enable eslint for supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "svelte",
    "json",
    "jsonc",
    "json5",
    "markdown",
    "yaml",
    "toml"
  ],
  // Enable flat configuration
  "eslint.useFlatConfig": true
}

🔨Built-in preset configurations

The following built-in preset configurations are supported:

| Configuration | Powered by eslint plugin or package | Need to install eslint plugin or package? | | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | | javascript | @eslint/js | no (built-in) | | comments | @eslint-community/eslint-plugin-eslint-comments | no (built-in) | | typescript | typescript-eslint | yes | | imports | eslint-plugin-import, eslint-plugin-unused-imports | yes | | jsdoc | eslint-plugin-jsdoc | yes | | regexp | eslint-plugin-regexp | yes | | promise | eslint-plugin-promise | yes | | unicorn | eslint-plugin-unicorn | yes | | prettier | eslint-config-prettier | yes | | vue | eslint-plugin-vue, eslint-plugin-vue-composable, eslint-plugin-vue-scoped-css, eslint-plugin-vuejs-accessibility) | yes | | react | eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-react-refresh | yes | | svelte | eslint-plugin-svelte | yes | | vitest | @vitest/eslint-plugin | yes | | jsonc | eslint-plugin-jsonc | yes | | yml | eslint-plugin-yml | yes | | toml | eslint-plugin-toml | yes | | markdown | @eslint/markdown | yes |

You can use import syntax:

import { defineConfig, javascript, typescript } from '@kazupon/eslint-config'

export default defineConfig(
  javascript(/* ... */),
  typescript(/* ... */)
  // ...
)

⚖️ Comparing to @antfu/eslint-config and others

• Respect the recommended config by the eslint plugin in built-in configurations
• Customization is overriding it only

💖 Credit

This eslint config is inspired by:

• @antfu/eslint-config, created by Anthony Fu
• @sxzz/eslint-config, created by Kevin Deng 三咲智子
• Vite, created by Evan You and Vite community

Thank you! ❤️

©️ License

MIT