@tresinternet/eslint-config-vue3 v3.1.0

@tresinternet/eslint-config-vue3

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

Installation

npm install @tresinternet/eslint-config-vue3 --save-dev

All required packages are installed automatically, except:

• Typescript

Single-line installation

npm install eslint typescript @tresinternet/eslint-config-vue3 --save-dev

Usage

.eslintrc

Create an .eslintrc-file with the following contents:

{
	"root": true,
	"extends": [
		"@tresinternet/eslint-config-vue3"
	]
}

Vue-files / VS Code

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

Use these settings in your project located in <project>/.vscode/settings.json:

{
	...
	"editor.detectIndentation": false,
	"editor.tabSize": 2,
	"eslint.alwaysShowStatus": true,
	"eslint.format.enable": true,
		"eslint.validate": [
		"javascript",
		"typescript",
		"vue"
	]
}

As seperate task

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

"eslint": "eslint --ext .ts,.vue .",
"eslint-fix": "eslint --ext .ts,.vue . --fix"

Rules

Rules are subject to change, depending on developer preferences. The following rules are applied:

• plugin:vue/vue3-recommended - https://eslint.vuejs.org/rules/
• Typescript-rules found in typescript.js
• ESLint-rules found in eslint.js
• Vue-rules found in index.js

Some specific rules are described below.

Tabs vs Spaces

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

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

Vue2

These settings should also work for Vue2.