@skagerakenergi/eslint-config-vue3-ts

eslint-config-vue3-ts

Installation

The default export contains all default ESLint rules for Vue3 TypeScript, including the recommended ruleset for Vue, the opinionated recommended ruleset for TypeScript and the ones listed in the rules section.

Install the package with:

npm install --dev @skagerakenergi/eslint-config-vue3-ts

Usage

Now add the config to your eslint.config.ts file:

import skagerakConfig from '@skagerakenergi/eslint-config-vue3-ts'

export default [...skagerakConfig]

Configuration Details

This configuration includes the following key features and rule overrides:

Base Configurations:

• Vue.js recommended rules - Complete ruleset for Vue 3 development
• TypeScript recommended rules - Opinionated TypeScript linting with type checking
• Vue Accessibility rules - Ensures accessible Vue components
• Prettier integration - Disables conflicting formatting rules

Vue-specific Rule Overrides:

• Component naming - Multi-word component names not required (vue/multi-word-component-names: off)
• Casing consistency - Enforces camelCase (vue/camelcase) and consistent component-name casing in templates (vue/component-name-in-template-casing)
• Strict equality - Requires ===/!== in templates (vue/eqeqeq)
• Block order enforcement - Script, template, style block ordering (vue/block-order)
• Type-based declarations - Enforces type-based props and emits definitions
• Typed refs - Requires typed refs for better type safety (vue/require-typed-ref)
• No empty blocks - Prevents empty component blocks
• Reactivity safety - Prevents ref object reactivity loss

Note: Purely stylistic/whitespace concerns (bracket spacing, operator spacing, brace style, trailing commas, etc.) are intentionally not enforced here — they're fully delegated to @skagerakenergi/prettier-config via @vue/eslint-config-prettier's skipFormatting, so ESLint and Prettier never disagree. Run Prettier (or eslint --fix won't help here — use prettier --write) to apply formatting.

File Targeting:

• TypeScript and Vue files - **/*.{ts,mts,tsx,vue}
• Test file integration - Vitest plugin for test files in src/**/__tests__/*
• Global ignores - Excludes dist/, dist-ssr/, coverage/ directories

Assumptions

This ESLint configuration comes with some fundamental assumptions:

• eslint 10 and flat config
• vue.js 3 and/or node environment
• browser and/or node environment
• vite
• TypeScript

Despite some assumptions, you can easily overwrite, extend and unset rules and any other setting in your custom eslint config.

Version Compatibility

Internally this config is built on @vue/eslint-config-typescript's withVueTs(...) helper (the API recommended since v14.9, superseding defineConfigWithVueTs(...)). withVueTs(...) is asynchronous, but this package resolves it at the top level, so the default export you consume is still a plain, ready-to-spread config array — no await needed on your end.

Make sure your project's eslint-plugin-vue version matches the one this package depends on (see packages/eslint-config/package.json / the installed @skagerakenergi/eslint-config-vue3-ts version). If your lockfile ends up with two different eslint-plugin-vue versions installed side-by-side, ESLint will print Multiple instances of eslint-plugin-vue detected and silently fall back to one of them, which can produce inconsistent linting (e.g. ignore patterns like **/dist/** not being honored as expected). Dedupe/align the version if you see that warning.

Use with Vitest

// eslint.config.ts
import skagerakConfig from '@skagerakenergi/eslint-config-vue3-ts'
import pluginVitest from '@vitest/eslint-plugin'

export default [
  ...skagerakConfig,
  {
    name: 'Vitest',
    ...pluginVitest.configs.recommended,
    files: ['src/**/__tests__/*']
  },
  {
    rules: {
      // your custom overrides here
    }
  }
]