@kouts/eslint-config

@kouts/eslint-config

Custom ESLint and Prettier config with Vue.js support and sensible defaults

[!NOTE] This config uses the ESLint Flat config, requires Node.js ^22.13.0 || >=24, and supports ESLint 10. If you're looking for the previous version, see README_V0.md.

Installation

pnpm i -D @kouts/eslint-config eslint prettier

Usage

ESLint config

Add an eslint.config.js (or eslint.config.cjs if your project is CommonJS) that imports the config function:

import { config } from '@kouts/eslint-config'

export default [
  ...config(),
  {
    // Add custom rules here
  },
]

Customizing the config

The configuration composes neostandard with Vue, Vitest, Prettier, import checking, and project-specific rules. You can customize it by passing an object to config.

Config defaults:

Example:

config({
  ts: false,
  vue: true,
  vueVersion: 3,
  vitest: false,
})

Prettier config

Create a prettier.config.js file with the following content:

import prettierConfig from '@kouts/eslint-config/prettier'

export default prettierConfig

package.json scripts

Add the following ESLint commands to your package.json for linting and autofixing:

{
  "lint": "eslint \"**/*.{vue,ts,js}\"",
  "lint-fix": "eslint --fix \"**/*.{vue,ts,js}\""
}

VS Code settings

Add the following settings to your VS Code project settings for autofix on save:

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Features

• Built on neostandard
• Prettier for code formatting
• Plugins
  • eslint-plugin-html for linting inline scripts contained in HTML files
  • eslint-plugin-vue for linting Vue.js files
  • eslint-config-prettier for disabling all rules that conflict with Prettier
• eslint-plugin-prettier for using Prettier as a code formatter with eslint --fix
• eslint-plugin-simple-import-sort for auto-fixing imports order
• eslint-plugin-vitest for linting Vitest test files
• eslint-plugin-import-x for import/export checks in JavaScript, TypeScript and Vue files

Vue-specific Rules

This configuration extends the ESLint plugin Vue recommended preset but makes several modifications to enhance code quality and consistency in Vue components.

Disabled Rules

• vue/max-attributes-per-line: Turned off to allow flexibility in attribute formatting
• vue/singleline-html-element-content-newline: Turned off for cleaner code with fewer line breaks

Strengthened Rules (set to 'error')

• vue/attributes-order: Enforces consistent order of component attributes
• vue/block-order: Enforces consistent order of component blocks
• vue/no-lone-template: Prevents unnecessary template wrappers
• vue/no-multiple-slot-args: Prevents passing multiple arguments to slots
• vue/no-v-html: Prevents use of v-html to mitigate XSS risks
• vue/order-in-components: Enforces consistent order of component options
• vue/this-in-template: Prevents usage of this in templates
• vue/require-prop-types: Requires type definitions for props
• vue/component-name-in-template-casing: Enforces PascalCase for component names in templates
• vue/no-static-inline-styles: Prevents inline styles in templates
• vue/require-explicit-emits: Requires explicit emit declarations
• vue/require-name-property: Requires components to have a name property
• vue/html-self-closing: Enforces self-closing style for components with no content
• vue/dot-notation: Enforces dot notation where possible in templates

Custom Vue Rules

• kouts/vue-require-name-in-setup: Enforces that Vue components using <script setup> must have a component name.

Customizing/Disabling Vue Rules

You can customize or disable any of these rules in your ESLint config:

// eslint.config.js
import { config } from '@kouts/eslint-config'

export default [
  ...config(),
  {
    rules: {
      // Disable custom rule
      'kouts/vue-require-name-in-setup': 'off',

      // Modify strengthened Vue rules
      'vue/attributes-order': 'warn',
      'vue/no-v-html': 'off',

      // Re-enable rules that were turned off
      'vue/max-attributes-per-line': [
        'error',
        {
          singleline: { max: 3 },
          multiline: { max: 1 },
        },
      ],
    },
  },
]

License

MIT