@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,
    // Required in vscode-eslint < v3.0.10 only
  "eslint.useFlatConfig": true,
  // This should not be necessary anymore (https://github.com/microsoft/vscode-eslint#version-204)
  "eslint.validate": [
    "javascript",
    "typescript",
    "vue",
  ],
}

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 a type checking on your config file, use typescript-eslint's config function:

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

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

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',
  },
});

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

• This is written in TypeScript and converted to .js & .d.ts files using tsup.
• I lint this project using itself, using experimental eslint.config.ts file loading (requires jiti + ESLint unstable_ts_config 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.