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)
• 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)
• Object spacing - Enforces spaces in object literals ({ foo: bar })
• No empty blocks - Prevents empty component blocks
• Reactivity safety - Prevents ref object reactivity loss

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 9 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.

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