My ESLint Config

This is my ESLint configuration for JavaScript, TypeScript, Vitest unit tests, and Vue SFCs.

Installation

As a dev-dependency

npm install --save-dev @hugo-t-b/eslint-config

Globally

npm install --global @hugo-t-b/eslint-config

Usage

Modify the extends property in your .eslintrc:

# .eslintrc.yaml
extends: "@hugo-t-b"
# ...

All rules can be modified or turned off with the rules property in your .eslintrc.

TypeScript

extends: "@hugo-t-b/eslint-config/typescript"
# ...

You will need a tsconfig.json file and to have installed @typescript-eslint/eslint-plugin, @typescript-eslint/parser, and eslint-import-resolver-typescript.

Vitest

extends: "@hugo-t-b/eslint-config/vitest"
# ...

This config builds on the TypeScript one, so you will need to follow the steps needed for that to work.

Vue

You will need to add the JavaScript config before the Vue one in the extends property of your .eslintrc:

extends: 
  - "@hugo-t-b"
  - "@hugo-t-b/eslint-config/vue"
# ...

You will need to have installed eslint-plugin-vue and vue-eslint-parser.

With the TypeScript config

The Vue config works with the TypeScript config automatically. Once you have followed the steps needed for both to work, add the TypeScript config before the Vue one in the extends property of your .eslintrc:

extends:
  - "@hugo-t-b/eslint-config/typescript"
  - "@hugo-t-b/eslint-config/vue"
# ...

Note: you will need a script or <script setup> with the lang set to ts in every SFC. To remove this requirement, set parserOptions.parser to @typescript-eslint/parser in your .eslintrc.