.eslintrc

{
  "root": true,
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "@vue/eslint-config-typescript"
  ],
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "rules": {
    /* ================ linting ================ */
    // disables the no-unused-vars rule
    "no-unused-vars": [
      "off"
    ],
    // forces the use of const or let instead of var
    "no-var": [
      "error"
    ],
    /* ================ formatting ================ */
    // use 2 spaces for indentation
    "indent": [
      "error",
      2
    ],
    // use double quotes
    "quotes": [
      "error",
      "single"
    ],
    // dont move comma to new line
    "comma-dangle": [
      "error",
      "never"
    ],
    // use unix linebreaks
    "linebreak-style": [
      "error",
      "unix"
    ],
    // add a space before and after brackets
    "array-bracket-spacing": [
      "error",
      "always"
    ],
    // adds a space before and after curly braces
    "object-curly-spacing": [
      "error",
      "always"
    ],
    // moves the dot before a function call to the next line
    "newline-per-chained-call": [
      "error",
      {
        "ignoreChainWithDepth": 2
      }
    ],
    // ensures that functions are defined before they are used
    "func-style": [
      "error",
      "declaration",
      {
        "allowArrowFunctions": true
      }
    ],
    // new line for ternary operator
    "multiline-ternary": [
      "error",
      "always-multiline"
    ],
    // new line for operators
    "operator-linebreak": [
      "error",
      "none",
      {
        "overrides": {
          "?": "before",
          ":": "before",
          "||": "after",
          "&&": "after"
        }
      }
    ],
    // new line for function arguments
    "function-call-argument-newline": [
      "error",
      "consistent"
    ]
  },
  // rules for .vue files
  "overrides": [
    {
      "files": [
        "*.vue"
      ],
      "rules": {
        // only one attribute per line
        "vue/max-attributes-per-line": [
          "error",
          {
            "singleline": {
              "max": 1
            },
            "multiline": {
              "max": 1
            }
          }
        ],
        // first attribute on the line below opening tag
        "vue/first-attribute-linebreak": [
          "error",
          {
            "singleline": "beside",
            "multiline": "below"
          }
        ],
        // closing tag on the same line as the last attribute
        "vue/html-closing-bracket-newline": [
          "error",
          {
            "singleline": "never",
            "multiline": "never"
          }
        ],
        // disable multi-word component names
        "vue/multi-word-component-names": [
          "off"
        ],
        // use kebab-case for component names
        "vue/component-name-in-template-casing": [
          "error",
          "kebab-case"
        ],
        // indent template
        "vue/html-indent": [
          "error",
          2
        ]
      }
    }
  ]
}