@anoesj/eslint-config-vue-ts

@anoesj/eslint-config-vue-ts

This is an opiniated set of ESLint rules for Vue and Nuxt projects using TypeScript. It extends:

• @eslint/js recommended rules
• typescript-eslint recommended rules
• @stylistic/eslint-plugin recommended rules
• eslint-plugin-vue recommended rules
• and a bunch of opiniated rules on top of that

Installation

Install using your Node.js package manager of choice:

pnpm i -D @anoesj/eslint-config-vue-ts

You need to have NPM package eslint installed in order to start using ESLint with this configuration. Assuming your IDE of choice is VSCode, it's recommended to install VSCode plugin "ESLint" by Dirk Baeumer and set it up as follows in your VSCode workspace's settings.json:

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "never", // optional
    "source.fixAll.eslint": "explicit"
  },
  "eslint.format.enable": true,
}

Usage

In your eslint.config.js file, write the following for a simple, default setup:

// @ts-check
import vueTsEslint from '@anoesj/eslint-config-vue-ts';

export default vueTsEslint();

When you want to add more rules of your own and you want type checking on your config file, use defineConfig from eslint/config:

// @ts-check
import vueTsEslint from '@anoesj/eslint-config-vue-ts';
import { defineConfig } from 'eslint/config';

export default defineConfig(
  ...vueTsEslint(),
  {
    files: ['src/components/**/*Icon*.vue'],
    rules: {
      // Disable max-len for icon components, as they usually contain long SVG paths
      '@stylistic/max-len': 'off',
    },
  },
);

If this causes any type errors, what may be happening is that another package is installing @types/eslint, which is a package that can be removed entirely. Using pnpm overrides in your pnpm-workspace.yaml or package.json, you can prevent the installation of the package:

pnpm-workspace.yaml

overrides:
  '@types/eslint': '-'

package.json

{
  "pnpm": {
    "overrides": {
      "@types/eslint": "-"
    }
  }
}

Configuration

You can pass an object to configure some options:

• ignores: override the default list of files to ignore
• files: override the default list of files to lint
• rules: add or override the default rules

Example:

// @ts-check
import vueTsEslint, {
  defaultIgnores,
  defaultFiles,
} from '@anoesj/eslint-config-vue-ts';

export default vueTsEslint({
  ignores: [
    ...defaultIgnores,
    'cypress/**',
    '.nuxt-e2e-build/**',
  ],
  files: defaultFiles.filter((file) => !file.includes('js')),
  rules: {
    '@stylistic/max-len': 'off',
  },
});

Caveats

While ESLint provides its own defineConfig function, it does not provide type definitions for rules yet. This is a work in progress in the ESLint ecosystem:

• https://github.com/eslint/eslint/issues/19721
• https://github.com/eslint/eslint/pull/19843

Development

Maintenance

This is a project I mainly use for my own projects, but feel free to use it if you like it. I may not always be able to keep up with the latest changes in the ESLint ecosystem. Also, know that I may introduce breaking changes without notice, but I'll try to keep this README.md up-to-date.

If you have any suggestions or improvements, feel free to open an issue or a pull request. I may not respond immediately, but I'll try to get back to you as soon as possible.

Other

Building

This project is written in TypeScript and converted to .js & .d.ts files using tsdown.

Linting

I lint this project using itself, using experimental eslint.config.ts file loading.

Before Node v22.10.0, you could not load TS files natively in Node. It required jiti as a project dependency and configuring ESLint to use the unstable_ts_config flag, e.g. in your .vscode/settings.json:

{
  "eslint.options": {
    "flags": ["unstable_ts_config"],
  },
}

Since Node v22.18.0, you can use the native support for TS files in Node. This requires configuring ESLint to use the unstable_native_nodejs_ts_config flag instead, e.g. in your .vscode/settings.json:

{
  "eslint.options": {
    "flags": ["unstable_native_nodejs_ts_config"],
  },
}

Note that between Node v22.10.0 and v22.18.0, you could use the native support for TS files in Node, but it was under Node's --experimental-strip-types flag.

More

See https://eslint.org/docs/developer-guide/shareable-configs for more info on shareable ESLint configs.

Run pnpx @eslint/config-inspector@latest (or npx, bunx etc.) to inspect the rules in your project in order to debug your ESLint config.