@kouts/eslint-config v3.0.4

@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:

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