@yungezeit/eslint-vue NPM

@yungezeit/eslint-vue

Personal ESLint flat configuration with Vue and TypeScript support.

Features

All features of @yungezeit/eslint-base.
All features of @yungezeit/eslint-typescript.
Vue support using eslint-plugin-vue.

Install

# using pnpm
pnpm add -D @yungezeit/eslint-vue
# using npm
npm add -D @yungezeit/eslint-vue
# using yarn
yarn add -D @yungezeit/eslint-vue
# using bun
bun add -D @yungezeit/eslint-vue

Usage

Raw configuration

You may simply spread the raw configuration array:

// eslint.config.js
import vuePreset from '@yungezeit/eslint-vue';

export default [...vuePreset];

Configuration function

Alternatively, you can use the createVueConfig function to create/merge a ESLint configuration array for a Vue project. Using this function lets you tweak the base configuration behaviour by passing some options as a second argument.

// eslint.config.js
import { createVueConfig } from '@yungezeit/eslint-vue';

export default createVueConfig([ /** Your configs… */], {
  /** (optional) Path to tsconfig root dir (see "Type-aware" linting below) */
  tsconfigRootDir: 'path/to/project',
  /** (optional) Internal patterns passed to `enforceImportOrder` (see "Imports order" below). */
  internalPatterns: [],
  /** (optional) Should node environment be supported? */
  node: true,
});

VSCode

You may want to add the following settings to your .vscode/settings.json:

{
  // Turn on ESLint for preset's supported languages if needed.
  "eslint.validate": [
    "vue",
    "javascript", "javascriptreact",
    "typescript", "typescriptreact",
    "json", "jsonc", "json5", "markdown", "yaml",
  ],
  // If you want ESLint to autofix problems on save.
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
  }
}