@tresinternet/eslint-config-vue3

This package contains the ESLint configuration for Vue3-projects developed by TRES internet.

Installation

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

All required packages are installed automatically, except:

• Typescript

Deploy new package

1. pnpm install
2. pnpm run bump
3. pnpm run npm-deploy

Single-line installation

pnpm -i -D eslint typescript @tresinternet/eslint-config-vue3

Usage

.eslintrc

Create an eslintrc.config.js-file with the following contents:

import eslintConfig from './index.js'

export default eslintConfig

Vue-files / VS Code

The default formatter for Vue-files in VS Code should be 'ESLint', not 'Volar'

Update the settings in your project located in <project>/.vscode/settings.json with the settings in this repo located in <root>/.vscode/settings.json

As seperate task

Add the following command to the scripts-section of your package.json-file:

{
	"scripts": {
		"lint": "eslint .",
		"lint:fix": "eslint . --fix"
	}
}

Rules

Rules are based on antfu/eslint-config and are extended with the eslint-plugin-simple-import-sort plugin to force the order of imports.

Import sort

Imports in Vue- and Typescript-files are sorted using simple-import-sort. Sorting is as follows:

• vue-imports
• @package-imports
• @/components and @/views-imports
• @/-imports
• ../-imports
• ./-imports
• Style-imports

Tabs vs Spaces

https://adamtuttle.codes/blog/2021/tabs-vs-spaces-its-an-accessibility-issue/