@tresinternet/eslint-config-vue3

@tresinternet/eslint-config-vue3

This package contains the ESLint configuration for Vue3-projects (or Javascript files in general) developed by TRES internet.

Installation

Install as a dev dependency along with ESLint:

pnpm add -D @tresinternet/eslint-config-vue3 eslint

Or using npm:

npm install -D @tresinternet/eslint-config-vue3 eslint

All other required packages are installed automatically as dependencies.

Usage

Configuration file

Create an eslint.config.mjs file in your project root:

import tresConfig from '@tresinternet/eslint-config-vue3'

export default tresConfig

To customize the configuration, you can use the .append() method:

import tresConfig from '@tresinternet/eslint-config-vue3'

export default tresConfig.append(
	{
		ignores: [
			// List of files or directories to ignore
		],
	},
	{
		rules: {
			// List of custom rules or overrides
		},
	},
)

Package scripts

Add the following scripts to your package.json to run ESLint:

{
	"scripts": {
		"eslint": "eslint --ext .js,.ts,.vue src",
		"eslint-fix": "eslint --ext .js,.ts,.vue src --fix"
	}
}

You can customize these commands:

• Change src to the directory you want to scan
• Modify .js,.ts,.vue to only include the file extensions you need
• Add --ignore-pattern to exclude specific directories (e.g., --ignore-pattern '**/api/*')

VS Code setup

For the best experience in VS Code:

1. Set ESLint as the default formatter for Vue files (not Volar)
2. Update your project's .vscode/settings.json with the recommended settings from this repo's .vscode/settings.json

Rules

You can find a complete list of rules in the ESLint documentation: https://eslint.org/docs/latest/rules/.

Rules are based on antfu/eslint-config (https://github.com/antfu/eslint-config) (which also uses ESLint Stylistic - https://github.com/eslint-stylistic/eslint-stylistic) and are extended with the eslint-plugin-simple-import-sort plugin (https://github.com/lydell/eslint-plugin-simple-import-sort) to force the order of imports.

Troubleshooting

No errors showing up in VS Code?

If ESLint isn't showing errors in VS Code, check the following:

1. Ensure ESLint is installed

   pnpm list eslint
   # or
   npm list eslint
   

2. Enable flat config support

   Add this to your project's .vscode/settings.json:

   {
     "eslint.useFlatConfig": true
   }
   

3. Verify ESLint validates your file types

   Add this to your project's .vscode/settings.json:

   {
     "eslint.validate": [
       "javascript",
       "javascriptreact",
       "typescript",
       "typescriptreact",
       "vue"
     ]
   }