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

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

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

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

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

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

export default prettierConfig

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

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

• 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

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

• 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

• 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

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

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

MIT