@kouts/eslint-config

@kouts/eslint-config

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

[!NOTE]
Starting from v1, this ESLint config uses the ESLint Flat config and is only compatible with ESLint v9 or v8.50.0+.
If you're looking for the previous version, checkout the README here.

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({
    env: ['browser'], // Add your environment globals here
  }),
  {
    // Add custom rules here
  },
]

Customizing the config

The configuration comes with default settings that extend the neostandard config. You can further customize it by passing an object to the config function:

Config settings defaults:

Option	Type	Description	Default
ts	boolean	Enable TypeScript support	true
noJsx	boolean	No jsx rules will be added	true
noStyle	boolean	No style rules will be added	true
semi	boolean	Use semicolons	false
vue	boolean	Enable Vue.js support	true
vueVersion	2 or 3	Specify the version of Vue.js	3
vitest	boolean	Enable Vitest support	true

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

Ad 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

• Based 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

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

Changelog

3.0.4 (2025-05-03)

Bug Fixes

• added vue require name rule (bc34723)