Eslint Config Vue

ESLint configuration for Vue projects with TypeScript. Supports prettier by default.

💿 Installation

Create a new project with vite:

pnpm create vite <app-name> --template vue-ts
cd <app-name>

Install eslint and the config:

pnpm add -D eslint @lehoczky/eslint-config-vue

💻 Usage

With Type Checking

eslint.config.mjs:

import { configLehoczkyVue } from "@lehoczky/eslint-config-vue"

export default configLehoczkyVue({
  parserOptionsForTypeChecking: {
    projectService: true,
    tsconfigRootDir: import.meta.dirname,
  },
})

See more: typescript-eslint | Linting with Type Information

Without Type Checking

import { configLehoczkyVue } from "@lehoczky/eslint-config-vue"

export default configLehoczkyVue()

Combining with Astro

import { configLehoczkyVue } from "@lehoczky/eslint-config-vue"
import { defineConfig } from "eslint/config"
import eslintPluginAstro from "eslint-plugin-astro"

export default defineConfig([
  ...configLehoczkyVue({
    parserOptionsForTypeChecking: {
      projectService: true,
      tsconfigRootDir: import.meta.dirname,
    },
  }),
  ...eslintPluginAstro.configs["flat/recommended"],
])

📢 Commands

package.json:

{
  "scripts": {
    "eslint:check": "eslint --max-warnings=0",
    "eslint:fix": "eslint --max-warnings=0 --fix"
  }
}