@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 !!!

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/