ESLint - How to Add ESLint with Vue3, Vite, prettier and TypeScript?

NPM install

npm install -D eslint @eslint/js typescript typescript-eslint @vue/eslint-config-typescript @vue/eslint-config-prettier vite-plugin-eslint

Added eslint.config.mjs

eslint.config.mjs

// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import vueTsEslintConfig from '@vue/eslint-config-typescript';
import prettierConfig from '@vue/eslint-config-prettier';

export default tseslint.config({
  files: ['**/*.{js,ts,vue}'],
  ignores: ['**/.*', 'node_modules/**/*', 'dist/**/*'],
  extends: [
    eslint.configs.recommended,
    tseslint.configs.strict,
    tseslint.configs.stylistic,
    ...pluginVue.configs['flat/essential'],
    ...vueTsEslintConfig(),
    prettierConfig,
  ],
  rules: {
    'vue/no-unused-components': 'off',
    '@typescript-eslint/no-unused-vars': 'warn',
    // You can add rule here.
  },
});

Added vite.config.ts

vite.config.ts

import { defineConfig } from 'vite'
import eslint from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
    eslint({
      include: ['src/**/*.ts', 'src/**/*.vue'],
      failOnError: false,
    })
  ]
})

Reference