@tresinternet/eslint-config-vue3

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

Installation

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

All required packages are installed automatically, except:

• Typescript

Development

!!! Use NPM, not PNMP !!!

Linking the package for local development

1. npm install
2. npm link
3. In your project: npm link @tresinternet/eslint-config-vue3

Or, if you're using pnpm in your project:

1. npm install
2. npm link
3. In your project: pnpm link --global @tresinternet/eslint-config-vue3

Or create a symlink in node_modules to the local package:

1. npm install
2. pnpm link <path-to-local-package>tres-internet-library-eslint-vue3/dist

Deploy new package

1. npm install
2. npm run build
3. npm run bump
4. npm run npm-deploy

Usage

eslintrc.config.js

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/